Tooltip does not work dynamic

Question

Notice that line:

response.write "<span data-toggle='tooltip' data-original-title='" & TitleBadge & "' style='margin-right:3px;'>"

This line is inside a file that is called via ajax. If I put inside html:

<span data-toggle='tooltip' data-original-title='Titulo' style='margin-right:3px;'>

It works, but not via ajax.

I already understand why, but I haven’t solved it yet. When you initialize the tooltip function, everything you have title="" becomes data-original-title="" and so does not take what comes dynamic.

I’ve tried to come straight with the data-original, but also it was not.

The page that has the tooltip I call it so:

function PegarSemanaConsultaFinan(DataProcura){

    dados = "DataProcura="+DataProcura

    $.ajax({
        url: "financeiro-procura-semana.asp?"+dados,
        Type: "POST",
        success: function(result){
            $("#results-div-finan").html(result);
        },
        error: function(){
        }           
    });
}

Does anyone have any tips?

Answer 1

The problem you are having is that your tooltip is being dynamically added to your page.

Try this:

$("body").tooltip({
selector: '[data-toggle="tooltip"]'
});

For me it works properly, but if it doesn’t work, try to use it:

$(document).on('mouseenter','[data-toggle=tooltip]', function(){
    $(this).tooltip('show');
});

$(document).on('mouseleave','[data-toggle=tooltip]', function(){
    $(this).tooltip('hide');
});