javascript - jQuery- Generate link names from ajax response

Question

I′m using the jQuery UI tooltip script. Therefore I have tooltip links with different "data-id" values like that:

<a tooltip-link data-id="12555"></a>
<a tooltip-link data-id="38"></a>

The "data-id" values get sent with ajax to my server sided script and the ajax-results are shown in the tooltips.

Additionally I want to dynamically generate the link names out of a certain part of this ajax-response.

The part of the ajax-response which should be used for the link names is the content of every <div class=""> which contains parts of the item-title class:

ajax response

<div class="item-title">Item12555</div>
<div class="item-title3">Item38</div>

This is my working tooltip-jQuery script so far. How can I implement the generation of the link names?

 jQuery(function($) {   

  $( "[tooltip-link]" ).each(function(i) {
    var id = $(this).attr("data-id");
    $(this).tooltip({
      tooltipClass: "test",
      content: function( response ) {
          $.ajax({ 
          url: "/datenbank/itemscript.php",
          data: {
                  'var': id
              },
          type: "GET"
          })
            .then(function( data ) {
               response( data );
            });
      },
      items: "*"
    });
  })

});

Answer 1

You can select and create elements with the jQuery selector $(). Pass a string to the selector while combining the strings with the data from the response and the id from the data attribute.

The content property function is called every time you hover over a tooltip element. This will invoke an $.ajax call for every hover which will be very expensive.

Turn it around by doing the AJAX requests first and set the data from the request as the value of the content property.

As for the <div class="item-title"> just append it to the anchor element that is stored in the $tooltip variable.

And last, the tooltip elements need a title attribute in the HTML. This is not clearly documented, but it won't work without the attribute. There doesn't need to be a value in the title.

<a tooltip-link data-id="12555" title=""></a>

jQuery(function($) {
  
  $("[tooltip-link]").each(function() {
    let $tooltip = $(this);
    let id = $tooltip.attr("data-id");

    $.ajax({ 
      url: "/datenbank/itemscript.php",
      type: "GET",
      data: {
        "var": id
      }
    }).then(function(data) {
      let $content = $(data);
      let title = $content.find('.item-title3').text()

      $tooltip.tooltip({
        tooltipClass: "test",
        content: data
      });

      $tooltip.append(title);
    });
  });
    
});