3

I have some buttons that show detailed information with Bootstrap tooltips. My main problem is that these buttons are initially hidden in a div (display:none;) and when the div is shown (display:block;) the tooltips don't work.

How can i overcome this issue?

Knut Holm
  • 3,988
  • 4
  • 32
  • 54
Ricky
  • 2,912
  • 8
  • 47
  • 74

2 Answers2

1

Ok, i figured out my problem...

I'm initializing bootstrap's tooltip in $(document).ready():

$(document).ready(function ()
{
    $(".bsTool").tooltip();
});

Everything ok, but... since i'm using UpdatePanels (ASP.NET) and my content is show/hidden via async postback, $(document).ready() doesn't get called!!!

In order to initialize the tooltip plugin on every async postback (and normal postbacks), i added it to a page load function:

function pageLoad()
{
    $(".bsTool").tooltip();
}

pageLoad() function is called by ASP.NET Ajax on the web page's first load, but also on each async postback. Therefore the tooltip plugin is registered again after the async postback.

Problem solved :)

Ricky
  • 2,912
  • 8
  • 47
  • 74
0

Be aware that Bootstrap's tooltip.js does not work well on hidden elements. Here's a note from Bootstrap's docs (link).

Don't try to show tooltips on hidden elements

Invoking $(...).tooltip('show') when the target element is display: none; will cause the tooltip to be incorrectly positioned.

Tony
  • 1,433
  • 1
  • 15
  • 18
  • why not do that?In some case need do that. Such as using [jquery-validation-bootstrap-tooltip](https://github.com/Thrilleratplay/jquery-validation-bootstrap-tooltip) and [chosen](https://harvesthq.github.io/chosen/) –  Jan 23 '17 at 09:00