Bootstrap Tooltip Causing Buttons to Jump

Tooltip button moving when hover

Tooltips in button groups and input groups require special setting

When using tooltips on elements within a .btn-group or an
.input-group, you'll have to specify the option container: 'body'
(documented below) to avoid unwanted side effects (such as the element
growing wider and/or losing its rounded corners when the tooltip is
triggered).

– Bootstrap Explanation for Tooltips

Here what you need to change in your code

JS

$('[rel=tooltip]').tooltip({container: 'body'});

HTML

Add this attribute to your buttons

data-container="body"

Here is Bootply link

Example

Twitter Bootstrap Tooltip: flickers when placed on top of button, but works fine when placed at the left/right/bottom

I found a quick solution for my problem. Although relatively short, my initial tooltip description was getting split on two lines. By chance, I tried shortening the tooltip text to fit on a single line. Once this was done, the tooltip was properly displayed. Therefore, I am assuming there must be a problem with the length of the tooltip text and the fact that the button is displayed all the way to the right of the page (and at the top of the page). I will not investigate this further for the time being.

bootstrap tooltip causing screen resizing when triggered on hover

I had a similar issue and I solved it like this:

$('body').tooltip({
    selector: '[rel=tooltip]',
    placement: 'auto',
    fallbackPlacement: 'flip',
    container: 'body'
});

The container: body part makes the parent element the body, which removed flickering for me.

Bootstrap tooltip in wrong position on initial hover, then in correct position

Here is a codepen of the original problem

I had made the position of the body 'relative' so that my child elements could be positioned absolutely in the way I wanted, and I also had set the the body's margin to '0 auto' to center the content. These styles interfered with the tooltip container option solution that Eric mentioned in his answer.

/*original css*/
body {
  position: relative;
  width: 980px;

  /*set as important to work in codepen example*/
  margin:0 auto !important;
}

#sample-menu{
  position: absolute;
  top: 109px;
  left: 600px;
}

//js that didn't solve tooptip positioning issue
$(function(){
  $('[data-toggle="tooltip"]').tooltip({
    container: 'body'
  });
});

It was bad practice to have that styling applied to the body in the first place. Here is a codepen that solves this problem and still gives me the appearance and behavior I want without the tooltip issues. I added a container around the content to apply the styles, and then the tooltip "container: 'body' " solution that Eric G suggested worked.

/*new css with styling on a container div instead of the body*/
.container {
  position: relative;
  width: 980px;
  margin:0 auto;
}

#sample-menu{
  position: absolute;
  top: 109px;
  left: 600px;
}

//js now fixes the tooltip positioning issue
$(function(){
  $('[data-toggle="tooltip"]').tooltip({
   container: 'body'
  });
});

Bootstrap tooltip not hiding after drag and drop event

please change your script to:

$('[data-toggle="tooltip"]').tooltip({
    trigger : 'hover'
});

bootstrap tooltip dont invoke child

It depends on the case, but you could use the tooltip methods:

$('[data-toggle="tooltip"]').tooltip();
$('li').hover(  function () {    $('ul').tooltip('hide');}, function () {    $('ul').tooltip('show');});

body { padding-top: 50px }ul {    padding: 20px;    background: red;}li {    padding: 20px;    background: yellow;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script><link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/><ul data-toggle="tooltip" data-title="hello world">    <li data-toggle="tooltip" data-title="content 1">content 1</li>    <li data-toggle="tooltip" data-title="content 2">content 2</li>    <li data-toggle="tooltip" data-title="content 3">content 3</li></ul>

Triggering bootstrap tooltip by hovering over another element

Where #thumbs is the added trigger, and .resetPrice is the element with the tooltip, add this code:

$('#thumbs').hover(
    function(e){$('.resetPrice').tooltip('toggle');}
);

See This updated fiddle

HTH,

-Ted

Tooltip set on a button displaying a modal dialog is reappearing after closing the dialog

The problem is that the button is gaining focus when the modal is closed. To get around the tooltip showing again after the modal is closed you could restrict the tooltips trigger to a hover like so:

$(function () {
    $('[data-tooltip="tooltip"]').tooltip({
        trigger: 'hover'
    });
});

I forked your JSFiddle and have a working demo you can check out.

Hope that helps!

---

Related Topics