Search code examples
twitter-bootstraptooltiptwitter-bootstrap-tooltip

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?

Solution

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