Problem with hover tooltips

[AgentSmith0]

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

[AgentSmith0]

The code worked well in v5.1.3.

[mdo]

Our hover tooltips look fine at https://twbs-bootstrap.netlify.app/docs/5.1/components/tooltips/#enable-tooltips.

[AgentSmith0]

Could you please try my code at codepen.io or jsfiddle.net? Did I made something wrong? Maybe there is a problem with the delay option?

[AgentSmith0]

@mdo Were there any breaking changes to the tooltip functionality since v5.1.3?

[hanneswylaers]

From what I read in the description of this ticket, this feels related to: #35202, isn't it?
See #35202 (comment) for a codepen which demonstrates this issue.

[AgentSmith0]

My issue is probably caused by a regression, since it worked fine in v5.1.3.

[julien-deramond]

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

[AgentSmith0]

@julien-deramond Yes, this recreates my issue. Thank you!

[mohammadizanloo55]

I think we do not understand the problem well so I will explain the problem in more detail:
The problem is that when we click on other tooltips that are not custom and then move the mouse out of it, the tooltips element is still there and it disappears if we click elsewhere.
But this does not happen in the tooltips that we made as a custom, and it closes after the mouse exits our tooltips element (hover).

Here is a video that conveys the point to some extent:

output.mp4

[AgentSmith0]

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.

[GeoSot]

@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

[mohammadizanloo55]

@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

[AgentSmith0]

Why has this issue been closed? It should be possible to use the title attribute in some way as selector. Otherwise I need to replace all my 1000+ title attributes. There must be some workaround...

[AgentSmith0]

This is also a question of browser compatibility. If a browser does not support JavaScript the title attributes remain as a fallback to the custom tooltips by bootstrap. I think it's important to bring the title attribute back in some way.

[GeoSot]

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.

[AgentSmith0]

//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 }});
});

Unfortunately, none of them would work in my case: I use other libraries, which use the title attribute by default and there are elements with title attributes coming after js initialization of the tooltips, which would not be handled by your code.
It would be very nice to get the previous functionality of the tooltips back somehow.

[GeoSot]

Since title is an optional attribute of buttons, whatever the “other libraries” are doing seems weird if they are based only on the presence/absence of title

I am interested to provide me, a CodePen with the real use case using these “other libraries”.

PS: another workaround is to make an empty title attr during show

$('[title]').on('tooltip.bs.show, ev => {
   ev.target.attr('title','')
});

[AgentSmith0]

I think there is a little misunderstanding, the libraries I use do not need the title attribute at runtime, of course. But they use the title attribute to show tooltips. And I would like to have customized tooltips with bootstrap. In the current main branch there is a problem that it isn't possible anymore to make hover tooltips using the code I shared my test case.

[AgentSmith0]

To make things clearer:

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

  function test() {
     document.body.innerHTML += '<span title="test">Test</span>';
  }
});

How would it be possible to initialize the new element created in the test function as a tooltip without calling a function every time calling the test function and without adding a class or using another attribute than title on it.

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

This line of code did it all in v5.1.3.

[AgentSmith0]

@GeoSot Is this issue better to understand now?

[AgentSmith0]

I tried to create a workaround, which adds another attribute to the element on hover:

$('body').mouseover(function(e) {
	var that = e.target;
	if(that.hasAttribute('title') && !that.hasAttribute('data-tooltip-title')) {
		that.setAttribute('data-tooltip-title', that.getAttribute('title'));
		that.removeAttribute('title');
	}
});

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

Can anyone explain why this solution isn't working? It seems that the tooltip selector does not work anymore with dynamically created DOM elements, although it is mentioned that it should work (https://twbs-bootstrap.netlify.app/docs/5.1/components/tooltips/#options under selector).

[AgentSmith0]

Does anybody have an idea for a workaround?

[AgentSmith0]

I was able to fix my workaround:

$('body').mouseover(function(e) {
	var that = e.target;
	if(that.hasAttribute('title') && !that.hasAttribute('data-bs-title')) {
		that.setAttribute('data-bs-title', that.getAttribute('title'));
		that.removeAttribute('title');
	}
});

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

I just changed the attribute name, it seems I was a bit confused by the selector parameter...

Anyway, this workaround solves my problem. If you have any improvements or ideas regarding my workaround, please tell.

I think this issue can now be closed...

Thank you!