Change bootstrap title in an jQuery ajax Request

Question

I want to load my contents for Bootstrap Tooltips dynamic with ajax. So if a user hovers over the button, the data should be loaded and shown in a tooltip.

I am using jQuery 3.6.0 with this little code:

$('document').ready(()=> {

$('.t1').on('mouseover', function(event) {    
    $.get("MyURL/playground/t1/" + $(this).attr('number'), function ( data ){
        console.log(data);  // <--- this is working
        $(this).attr('data-original-title',data)  // <--- this is NOT working :-/
    }) 

    $(this).attr('data-original-title','bla bla bla')   // <--- this is working
})
})

The strange thing is that every function I need is working but they are not working together. I get my data via $.get() and can put it into my console. I can also change the title for my hovered button.

Maybe someone has experience with jQuery/ajax and bootstrap and can help me here?

Best regards, Niklas

score 1 · Accepted Answer · answered Sep 06 '21 at 13:30

I think $(this) inside ajax is wrong. this is referring to inner object and not the main t1. Try something like this.

$('document').ready(()=> {

$('.t1').on('mouseover', function(event) {    
    let self = this;
    $.get("MyURL/playground/t1/" + $(this).attr('number'), function ( data ){
        console.log(data);  // <--- this is working
        $(self).attr('data-original-title',data)  // <--- this is NOT working :-/
    }) 

    //$(this).attr('data-original-title','bla bla bla')   // <--- this is working
})
})

1

ahh of course! Thank you!! – Niklas Sep 06 '21 at 13:58

Change bootstrap title in an jQuery ajax Request

1 Answers1