更改 jQuery 工具提示的“div 类”

Question

I´m using the jQuery UI tooltip plugin.

Now I want to change the <div class="ui-tooltip-content"> in <div class="ui-tooltip-content2"> with jQuery.

I´m using $('.ui-tooltip-content').addClass('ui-tooltip-content2').removeClass('ui-tooltip-content') inside the "each" function but it doesn´t show any effect. I don´t get an error in the console.

I´ve made a JSFiddle . Just inspect the tooltip and you will see that the class hasn´t changed.

Complete code:

$('*[data-id]').tooltip({
    tooltipClass: "tooltipitem",
    content: '<div class="loading">Laden...</p>',
    hide: {
        effect: "slide",
        delay: "10000"
     },
    position: {
        my: "left+153 top+20",
        collision: "flipfit"
     },
});

$('*[data-id]').each(function () {

    let $tooltip = $(this);
    let id = $tooltip.attr("data-id");

    ajaxManager.add({
        url: "https://xy.eu/datenbank/itemscript.php",
        type: "GET",
        cache: "true",
        data: {
            "var": id,
        },

        success: function (data) {

            let $content = $(data);
            let title = $content.siblings('[class^=item-titletl]').text()
            let icon = $content.siblings('[class^=parent2]').html()

            $tooltip.tooltip({
                content: function () {        
                        return [data];  
                },
            });

            $('.ui-tooltip-content').addClass('ui-tooltip-content2').removeClass('ui-tooltip-content');
   
            $tooltip.attr("title", "=")

           $("<img class='icon-small' src='https://xy.eu/images/icons/" + icon + "'/                         
           >" + title + "</>").appendTo($tooltip);
            
        }
    });
});

});

Answer 1

The problem is that the tooltip appends when you hover over the element, that's why this code doesn't working, you element was not created yet, at that moment.

$('.ui-tooltip-content').addClass('ui-tooltip-content2').removeClass('ui-tooltip-content');

You can do it by adding this option, this will add additional class to ui-tooltip-content

classes: {
    "ui-tooltip-content": "ui-tooltip-content2"
  },

The full code will be

$tooltip.tooltip({
classes: {
    "ui-tooltip-content": "ui-tooltip-content2"
  },
  content: function () {        
       return [data];  
    },
});

Remove this line:

$('.ui-tooltip-content').addClass('ui-tooltip-content2').removeClass('ui-tooltip-content'); 

You can check the docs here .

Answer 2

the problem is in your code you are trying to add and remove classes but the element is not present in DOM. I have modified your code

jQuery(document).ready(function ($) {

        var ajaxManager = $.manageAjax.create('cacheQueue', {
            queue: true,
            cacheResponse: true
        });
    
// Tooltip Script

        $('*[data-id]').tooltip({
            tooltipClass: "tooltipitem",
            content: '<div class="loading">Laden...</p>',
            hide: {
                effect: "slide",
                delay: "100000"
      },
      position: {
         my: "left+153 top+20",
         collision: "flipfit"
        },
        });


        $('*[data-id]').each(function () {

            let $tooltip = $(this);
            let id = $tooltip.attr("data-id");

            ajaxManager.add({
                url: "https://elder-scrolls-online.eu/datenbank/itemscript.php",
                type: "GET",
                cache: "true",
                data: {
                    "var": id,
                },

                success: function (data) {

                    let $content = $(data);
                    let title = $content.siblings('[class^=item-titletl]').text()
                    let icon = $content.siblings('[class^=parent2]').html()

                    $tooltip.tooltip({

                        content: function () {
        
                                return [data];  
                        },
                    });
          setTimeout(AdAndRemoveClass,500);
                    $tooltip.attr("title", "=")
          console.log($tooltip)
          $("<img class='icon-small' src='https://www.elder-scrolls-online.eu/images/icons/" + icon + "'/                       >" + title + "</>").appendTo($tooltip);
                    
                }
            });
        });
    });
  
  function AdAndRemoveClass(){

var tool= $('.ui-tooltip-content');
if(tool.length ==0){
  setTimeout(AdAndRemoveClass,500);
}
else{
          console.log(tool)
          tool.addClass('ui-tooltip-content2');
          tool.removeClass('ui-tooltip-content');
          }
  }

check the working fiddle here