Toggling Bootstrap Tooltip divs within a nested structure triggers the Tooltip of the parent div

Question

Toggling Bootstrap Tooltip divs within a nested structure triggers the Tooltip of the parent div

I have a setup with 2 nested <div> elements, both utilizing the tooltip() function.
When I hover over the inner <div>, the tooltip of the outer <div> also displays.
To resolve this issue, I attempted to clear the title of the inner <div> on :hover.

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

A functioning example is available in my CodePen demo. Note that I changed the title to 'red' for visibility.

Why doesn't changing the title alter the tooltip's content?
What is the process for modifying the Bootstrap Tooltip's content? (This could be its own standalone question on Stack Overflow)

css twitter-bootstrap tooltip

Answer 1

Answer №1

Response to query #1:

Upon thorough examination of the components and observing their behavior with your JavaScript code, I have discovered an attribute within the divs labeled as data-original-title. It appears that even when changed to green, this attribute continues to retain "blue," which is what the tooltip element interprets and shows. To address this issue, you can modify your script as follows:

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

Executing this adjustment transforms the color from blue to red. Do you find this solution satisfactory?

Answer 2

Response to query #1:

Upon thorough examination of the components and observing their behavior with your JavaScript code, I have discovered an attribute within the divs labeled as data-original-title. It appears that even when changed to green, this attribute continues to retain "blue," which is what the tooltip element interprets and shows. To address this issue, you can modify your script as follows:

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

Executing this adjustment transforms the color from blue to red. Do you find this solution satisfactory?

Answer 3

Answer №2

To make the tooltip hide and show, you can use .tooltip('hide') and .tooltip('show').
Credit to @BuddhistBeast for providing part of this answer!

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

Answer 4

To make the tooltip hide and show, you can use .tooltip('hide') and .tooltip('show').
Credit to @BuddhistBeast for providing part of this answer!

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

Answer 5

Answer №3

Find out if you are currently hovering inside the inner block

Using jQuery:

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

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


  $("#a").on('mousemove', function(){  
    if(isHovering) {
      $(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 Customized Example: http://codepen.io/anon/pen/JGqXPw

Answer 6

Find out if you are currently hovering inside the inner block

Using jQuery:

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

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


  $("#a").on('mousemove', function(){  
    if(isHovering) {
      $(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 Customized Example: http://codepen.io/anon/pen/JGqXPw

Toggling Bootstrap Tooltip divs within a nested structure triggers the Tooltip of the parent div

Answer №1

Answer №2

Answer №3

Similar questions

Issue with slideout menu hyperlinks malfunctioning

Various hues blending and intertwining with one another

Responsive navigation menus can create confusion when hover and click events overlap

The functionality of Bootstrap tooltips becomes disabled as soon as any element on the page is clicked

Enhancing this testimonial slider with captivating animations

Place a vertical slider adjacent to an HTML element on either the left or right side

Tips for retrieving the primary key of the highlighted row in bs_grid

The art of arranging React components

Setting up a textarea tooltip using highlighter.js

Struggling to grasp the concept of using z-index in CSS

What is the best way to incorporate an icon into my HTML search bar?

What adjustments can be made to the Bootstrap code to prevent it from causing layout issues with the Signin Form and Footer?

jQuery Autocomplete API Issue: Undefined

Is it possible to maintain the width of an element even when its height is set to 0px?

Troubleshooting HTML/CSS and JavaScript Issues with Dropdown Menus

Having trouble with Tailwind CSS not functioning correctly once the font is imported?

The hamburger menu on the responsive navbar fails to open when clicked on

Having trouble getting the align-items-end property in Bootstrap 4 to function

Combining the p class with flexbox for optimal layout design

"Opt for a horizontal WordPress drop-down menu instead of the typical vertical layout