When I hover over a button and the tooltip appears, the buttons jump. If I disable the tooltip, it does not jump. Additionally, the right button loses the rounded edges. How can I prevent this from happening?
<div class="btn-group">
<a rel="tooltip" class="btn" href="#" data-title="View Details"><i class="icon-list-alt"></i></a>
<a rel="tooltip" class="btn" href="#" data-title="Delete"><i class="icon-trash"> </i></a>
</div>
Javascript:
$('[rel=tooltip]').tooltip();
Working version...
http://jsfiddle.net/BA4zM/147/
Here is a website that has it working without the jumping...
http://wrapbootstrap.com/preview/WB005S479
To avoid the jump, you need to set the container attribute. This is documented.
When using tooltips and popovers with the Bootstrap input groups,
you'll have to set the container option to avoid
unwanted side effects.
Try the following:
$('[rel=tooltip]').tooltip({container: 'body'});
As Howie said at https://stackoverflow.com/a/14770263/7598367, it's necesary to add the 'container' to tooltip.
That didn't solve my issue (I had the same problem), it's also necesary to declare at JS file BEFORE the .tooltip() initilization, this way:
$('[data-toggle=tooltip]').tooltip({container: 'body'});
$('[data-toggle="tooltip"]').tooltip();
Hope this helps if somebody has the same problem in the future.
Related
I have build a dropdown menu that works a sweet as it gets.
Right click on an element, brings up he dropdown menu, i hover over the first choise, soo far so good, the font color and the background color changes as it should and the sub-menue opens. The problem is that when i hover over the sub-menu, the i "loose" the gray background color of the "parent"
Any ideas ?
<div id="contextMenu" class="dropdown-menu" role="menu" style="display: block; left: 997px; top: 438px;">
<ul class="dropdown-menu side" role="menu" aria-labelledby="dropdownMenu" style="display:block;position:static;"><li class="dropdown-submenu"><i class="fa fa-paste" aria-hidden="true"></i> PARENT OPTION <ul class="dropdown-menu"> <li> <a tabindex="-1" data-url="/common/docitem/copymove/?document=247&dest=1&obj_table=companydocument&f=null" id="add_id_copy_p" style="cursor:pointer;" class="js-movecopy-docitem"> Siblin Option</a> </li>
First things first, you must include a code segment to make it easier to understand the issue, as #Paulie-d and #Rokibol Hasan mentioned. To be honest, this sounds like maybe you have conflicting CSS rules or lack of specificity, which results in your parent element being affected on :hover.
These would be the steps I would use to solve this:
Use the find function of your development IDE (CTRL + F) to find :hover elements. Avoid using very broad CSS selectors.
Make sure you have assigned the correct id and class attributes in the desired section of code.
Refresh your memory on CSS specificity. I provide you this website instead of Mozilla only because I do not know if you can handle it. If you are experienced, prefer this website.
Refresh your memory on CSS selectors.
At this point, go in your CSS and start commenting out and testing one by one sections of code that may affect the parent element you speak of.
I am using a simple implementation of a button on a simple MDL website with material design lite. When i click the button, areas of the UI go grey until the browser repaints that area.
<button onclick="ZoomWindow();" class="mdl-button mdl-js-button mdl-button--icon" id="ZoomWindow" style="vertical-align:top;">
<!-- Zoom Window -->
<i class="material-icons md-light">loupe</i>
</button>
<div class="mdl-tooltip mdl-tooltip--right" for="ZoomWindow">
Zoom window
</div>
It doesnt happen with all buttons set up this way, leading us to believe it could be some kind of timing issue.
I have narrowed the problem down to the tooltip, as when it is removed, the problem no longer occurs.
Is there a way to force the entire DOM to redraw, or a fix for the issue we are seeing?
We managed to track this problem down to the tooltips, and we made a simple modification to fix it. We simply created something a little like this to hide and show the tooltip on mouse down and mouse up:
<script>
function hideTooltips(){
$(".mdl-tooltip").css('display','none');
}
function unhideTooltips(){
$(".mdl-tooltip").css('display','inline');
}
</script>
<button onmousedown="hideTooltips();" onmouseup="unhideTooltips();ZoomWindow();" class="mdl-button mdl-js-button mdl-button--icon" id="ZoomWindow" style="vertical-align:top;">
<!-- Zoom Window -->
<i class="material-icons md-light">loupe</i>
</button>
<div class="mdl-tooltip mdl-tooltip--right" for="ZoomWindow">
Zoom window
</div>
This solved the issue for us
I am updating an Angular app to use Bootstrap 3 glyphicons instead of some images, and have run into the following difficulty:
I have this glyph in a view that's in my content section:
<i class="glyphicon glyphicon-play"></i>
and this one in a pull-down menu:
<i class="glyphicon glyphicon-log-out"></i>
It seems that when I pull down the menu, the "-play" glyph is not hidden and still shows through it.
I'm not 100% sure what the issue is without seeing more of your code, but you could add some quick jQuery to show/hide the appropriate icon on click.
$('.the-dropdown').on('click', function() {
$('i.glyphicon-play').hide();
});
I have a simple button, and I want to use CSS to make it onhover, bring up a dropdown of a few more buttons with links, and when the button is pressed I want the button to stay at the onhover state. How can this be accomplished? For example a games button that when hovered over it drops down to buttons that have different links to games. Sorry if this is unclear. Thanks in advanced.
Unfortunately not a plain CSS thing to do, but check out Drop, my lightweight script for this sort of thing. It's NOT jQuery - it's vanilla JavaScript.
http://cferdinandi.github.io/drop/
I think this may take more effort than you're expecting. To make things much easier, I recommend using Twitter-Bootstrap, which is a set of CSS/JS files that come packaged with usable components. The Dropdown component is probably what you're looking for. It is built in with part of the functionality you desire, the other part can be done with jQuery.
Here is the HTML:
<div id="hoverbutton" class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Dropdown link</li>
<li>Dropdown link</li>
</ul>
</div>
Here is the jQuery needed to make the hover effect:
$('#hoverbutton').mouseover(function() {
$('#hoverbutton').addClass("open");
});
look into mouseover and mouseleave inside jquery.
you could come up with a simple function to detect if the mouse is over the element or not.
Since i have some source code open already here is some..
function over(ELEMENT){
ELEMENT.mouseover(function(){
//mouse over
});
ELEMENT.mouseleave(function(){
//mouse not over
});
}
I have a portfolio that works fine but I'm currently building a CMS for it so that I can simply upload the image and it adds it to the site for me. Before I build it, I'm rebuilding some of the scrappy code and converting the what was a JS powered gallery to a CSS powered one.
I'm trying to achieve this click effect in CSS. http://www.tomdwyerdesign.com/graphics/
I thought I could do it via the :focus selector but I've run into a little problem.
This is the HTML:
<a class="tile" href="#">
<img src="images/thumbs/DLPWD.png" class="dlpwd" />
</a>
and this is the CSS:
.tile:focus img{
background-image: url("images/large/DLPWD.png");
width: 771px;
height: 600px;
}
It doesn't seem to select it properly. Any one know why?
Thanks.
The problem is that a link is not necessarily focused when it's clicked, it's focused when you navigate to it. You can do this with the keyboard, or you could add a click handler to the link. Of course at that point, you're back into javascript, but it shows what's happening.
E.g.
<a class="tile" href="#" onclick="this.focus()">
<img src="images/thumbs/DLPWD.png" class="dlpwd" />
</a>
Luckily, there is a better solution, and one that doesn't require javascript. If you add a tabindex to the link, clicking it will focus it even if the href is going nowhere. So...
<a class="tile" href="#" tabindex="0">
<img src="images/thumbs/DLPWD.png" class="dlpwd" />
</a>
Should do what you want.
(your next problem is going to be that the background-image won't be visible in front of the src image - you're just going to get a stretched version of the thumbnail. But I think that's a different question)
:focus is only available on elements that receive keyboard input (i.e. form elements). You could try :active but it will only apply the CSS while the mouse button is down.