只要在页面上单击任何内容，Bootstrap工具提示就会停止工作

Question

On my page, I initialize Bootstrap tooltips this way

<script>
    $(document).ready(function () {
        $(function () {
            $('[data-toggle="tooltip"]').tooltip();
        });
    });
</script>

This question suggests that any time an event happens you have to reload tooltips. However, across various ajax page updating there are probably 50+ events to account for. (This site is using asp.net web forms and ajaxcontroltoolkit)

How can I universally reinitiate tooltips every time an event takes place? -- or is there a simpler solution to solving this problem?

Answer 1

You need a javascript reference to Sys.WebForms.PageRequestManager

Take a look at the beginRequest/endRequest events. Since asp.net ajax is replacing your html you'll need to rebind the bootstrap widgets after asp.net is finished with its ajax.

Try this:

<script>
var prm = Sys.WebForms.PageRequestManager.getInstance();
//func to rebind tooltip
function reBind () { $('[data-toggle="tooltip"]').tooltip(); }
$(document).ready(function () {
    $(function () {
        reBind();            
        prm.add_endRequest(reBind);
    });
});
</script>

Be warned some bootstrap widgets will break if they are bound twice, so use your discretion; some elements might need to have their events monitored to see if they are bound more than once.