Nested Bootstrap Tooltip divs Toggles Parent div's Tooltip

Question

I have 2 nested <div>s, both with tooltip().
When I hover over the inner <div>, the outer <div> also shows it's tooltip.
I tried to work around this by setting the inner <div>'s title to an empty string on :hover.

$(inner).hover({
  $(outer).attr('title','');
},{
  $(outer).attr('title','original title');
});

I created a codepen example

note: I changed title to 'red' so you can see that the title did indeed change.

Why is it that changing the title doesn't change tooltip's content?
How do we change the Bootstrap Tooltip's content? (this should be a stackoverflow question of it's own)

Mindbender · Answer 1 · 2016-02-18T18:57:36.740

1

Answering #1:

By inspecting the elements and watching it change with your JS code, i noticed a attribute on the divs called data-original-title which still holds "blue" when you enter green (this is what the tooltip element reads and displays). By changing your script to

 $('#a').attr({"data-original-title": "red"});

the blue becomes red. Does this answer your question?

edited Feb 18 '16 at 18:57

answered Feb 18 '16 at 18:37

Mindbender

81
1
6

Also, this appears to answer your question: http://stackoverflow.com/questions/15801805/how-do-i-update-the-content-in-jquery-ui-tooltip-in-realtime – Mindbender Feb 18 '16 at 18:39
Thanks, I didn't know about this attribute. However, it's not imediate. So using ` $('#a').attr({"data-original-title": ""});` as a means to temporary hide the outer `
`s tooltip doesn't help in this case.
– warkentien2 Feb 18 '16 at 18:43
Sorry, I was answering #1 and #2. I think @BuddhistBeast might have what you want – Mindbender Feb 18 '16 at 18:45
edit your answer to explicitly say "answering #1" so I can check it as a valid answer – warkentien2 Feb 18 '16 at 18:54
Completed as requested. – Mindbender Feb 18 '16 at 18:58
I tested out the suggestions and posted a functioning answer. Thanks – warkentien2 Feb 18 '16 at 19:00

BuddhistBeast · Answer 2 · 2016-02-18T19:03:58.063

You can check whether you are currently hovering inside of the inner block

jQuery:

$(document).ready(function(){
  var bIsShown = true;
  $("#b").on('mouseenter', function(){  
      bIsShown = true;

  }).on('mouseleave', function() {
      bIsShown = false;
  })


  $("#a").on('mousemove', function(){  
    if(bIsShown) {
      $(this).data("bs.tooltip").$tip.removeClass("in");
    }
    else {
      $(this).data("bs.tooltip").$tip.addClass("in");
    }
  })
  $('[data-toggle="tooltip"]').tooltip({
    animated : 'fade',
    placement : 'bottom',
    container: 'body'});
});

Your Example: http://codepen.io/anon/pen/JGqXPw

almost there, must get the outer div (a) to toggle back. – warkentien2 Feb 18 '16 at 18:47 — warkentien2, Feb 18 '16 at 18:47

score 0 · Answer 3 · answered Feb 18 '16 at 18:59

Use .tooltip('hide') and .tooltip('show')
this was answered in part by @BuddhistBeast, thanks!

$("#b").on('mouseover', function(){   
    $('#a').tooltip('hide');
  }).on('mouseleave', function(){   
    $('#a').tooltip('show');
  });
  $('[data-toggle="tooltip"]').tooltip({
    animated : 'true',
    placement : 'bottom',
    container: 'body'});

Nested Bootstrap Tooltip divs Toggles Parent div's Tooltip

3 Answers3