简体   繁体   中英

How do enable tooltip on dynaically added code?

I have a site, which uses paging.

I use the following plugin for tooltips: http://plugins.jquery.com/project/tooltip

I use AJAX to update a div container. This is the code:

$(".page-number").live("click", function () 
    {

        var page = parseInt($(this).html());
        var progressbarValue = ((page / $("#NumberOfPages").val()) * 100);
        var catId = $("#CategoryID").val();

        $.ajax({
            url: '@Url.Action("QuestionList")',
            data: { "categoryId": catId, "page": page },
            success: function (data) {
                $("#question-list").html(data);
                $("#progressbar").progressbar("value", progressbarValue);
                $("#progresstext").html("<p>" + Math.round(progressbarValue) + "% gennemgået</p>");
                EnableDisableToolTip();
            }
        });
    });

This is the function to enable/disable tooltips:

<script type="text/javascript">
function EnableDisableToolTip() {

    var help_text = $("#helptext_checkbox").is(':checked:');

    if (help_text) {
    alert("true");
        $(".tooltip").qtip("enable")
    }
    else if (!help_text) {
    alert("false");
    $(".tooltip").qtip("disable");
    }        
}
</script>

When i load a new page, i cannot see any tooltips when i hover the mouse over an element with class="tooltip". Also, when i view the source code, the dynamically added code isnt there. It works on the first page, and the source code with class="tooltip" is there. But not with the dynamic stuff.

How can i solve this issue?

[EDIT]

The tooltip code:

        $(".tooltip").each(function() 
    { 
    $(this).qtip({

        show: 'mouseover',
        hide: 'mouseout',

        style: {
            name: 'light', // Inherit from preset style
            width: {
                min: 0,
                max: 250
                },
        },

        position: {
            corner: {
                target: 'topMiddle',
                tooltip: 'bottomLeft'
            },
            adjust: {
                screen: true,
                scroll: false

            }
         }
   });
});

Viewing the page source shows what was delivered to the client when the page was originally requested. It does not show the current DOM.

When you add the new content to the page, it does not know what has been run. You need to rescan the page for tooltips when the content is added.

In EnableDisableToolTip there is a condition to enable/disable the tooltip ( $("#helptext_checkbox").is(':checked:') ). Are you sure it is checked when you make a ajax call? I think it is not checked due to which the tooltip is not enabled.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM