CODEWITHSUNDEEP
twitter-bootstraptooltiptwitter-bootstrap-tooltip
Ricky
Ricky

Reputation: 3072

Bootstrap Tooltip doesn't work if element is initially hidden

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?

Upvotes: 3

Views: 2725

Answers (2)

Tony
Tony

Reputation: 1463

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.

Upvotes: 0

Ricky
Ricky

Reputation: 3072

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 :)

Upvotes: 1

Related Questions