Tooltip does not work dynamically

Question

Tooltip does not work dynamically

Navigation

#1 by (1 votes)

2

Look at this 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 it inside the html:

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

It works, but via non-ajax.

I understand why, but I have not resolved yet. When you initialize the tooltip function, everything that has title="" becomes data-original-title="" and so it does not take what comes dynamically.

I've tried to come straight with data-original , but it was not either.

The page that has the tooltip I call it like this:

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?

asp.net ajax asp tooltip

asked by anonymous 01.07.2015 / 01:20

1 answer

How to include Bootstrap files in a theme? First page - Ionic and ui-router

score 1 · 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 this works correctly, but if it does not work, try using this:

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

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