bootstrap: Problem with hover tooltips

Prerequisites

I have searched for duplicate or closed issues
I have validated any HTML to avoid common problems
I have read the contributing guidelines

Describe the issue

When you hover over an element, the tooltip shows, but does not hide when going away from the element. I am using the below.

Reduced test cases

I am including the following files: JS: https://twbs-bootstrap.netlify.app/docs/5.1/dist/js/bootstrap.bundle.min.js and https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js CSS: https://twbs-bootstrap.netlify.app/docs/5.1/dist/css/bootstrap.min.css

HTML code: <span title="test">Test</span>

JS code:

$(function() {
  $('body').tooltip({selector: "[title]", trigger: "hover", delay: { show: 1000, hide: 0 }});
});

What operating system(s) are you seeing the problem on?

Windows, macOS, Android, iOS, Linux

What browser(s) are you seeing the problem on?

Chrome, Safari, Firefox, Microsoft Edge, Opera

What version of Bootstrap are you using?

main branch

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 23 (5 by maintainers)

Most upvoted comments

Why has this issue been closed?

Because you thumb up without any answer 😄

It should be possible to use the title attribute in some way as selector.

It is being handled by js, and doesn’t seem right to keep an empty attribute. More or less it is a fallback way. However we are open to suggestion/PRs

There must be some workaround…


//one way 
$('body').tooltip({selector: ".tooltip", trigger: "hover", delay: { show: 1000, hide: 0 }}); 

//other way
$("[title]").each(()=>this.addClass('tooltip-extra-class'))
$('body').tooltip({selector: "[title]", trigger: "hover", delay: { show: 1000, hide: 0 }}); 
});

Does any of these works for you?

If a browser does not support JavaScript the title attributes remain as a fallback to the custom tooltips by bootstrap.

So the code will not work and the title will remain there.

I think it’s important to bring the title attribute back in some way.

The title attribute was never staying there. If you check the changed code, it was removing the title attribute value PS: I had tried to keep it filled (as you suggested), but was messing the native browser functionality with the BS tooltip functionality.

GeoSot on May 4, 2022

@mohammadizanloo55 Try this, it works. The reason behind this, is that title attribute is removed after initialization (first refactoring PR of tootlip. Till then title was just blanked)

ref: #34519 _fixTitle

GeoSot on May 4, 2022

@AgentSmith0 Does this CodePen recreate your issue? (equivalent CodePen with 5.1.3)

julien-deramond on May 1, 2022

@mohammadizanloo55 Try this is works. The reason behind this, is that title attribute is removed after initialization (first refactoring PR of tootlip. Till then title was just blanked)

ref: #34519 _fixTitle

Thanks for your explanation, your example worked for me

mohammadizanloo55 on May 4, 2022

Not exactly, this is just a side effect. The real problem is that hover tooltips do not hide when going away with the cursor. Just compare the two codepens by julien-deramond.

AgentSmith0 on May 3, 2022