qTip 2多个带有AJAX内容的工具提示

qTip 2 multiple tooltips with AJAX content

本文关键字：工具提示 AJAX qTip      更新时间：2023-09-26

我在我的网站上使用qTip 2工具提示，使用这个初始化代码:

        $(document).ready(function(){
        $('#tooltip').each(function() {
            $(this).qtip({
               overwrite: false,
               content: {
                   text: function(event, api) {
                       $.ajax({
                           url: api.elements.target.attr('source')
                       })
                       .then(function(content) {
                           // Set the tooltip content upon successful retrieval
                           api.set('content.text', content);
                       }, function(xhr, status, error) {
                           // Upon failure... set the tooltip content to error
                           api.set('content.text', status + ': ' + error);
                       });
                       return 'Loading..';
                   }
               },
               position: {
                    my: 'bottom left',
                    at: 'top right',
                    viewport: $(window)
               },
               style: 'qtip-tipsy'
            });
        });
    });

和HTML链接:

<a href="#" id="tooltip" source="http://localhost/php_content">Tooltip</a>

这只适用于一个id="#tooltip"的工具提示，是否有任何方法可以将此初始化代码用于多个具有相同id和不同来源的工具提示?

非常感谢!

不能有多个具有相同id的元素。你应该用类来代替。

事实上，如果我没有错的话，你甚至不需要.each。你可以这样做

$('.mytooltip-elements').qtip({
  overwrite: false,
  content: {
    text: function(event, api) {
      $.ajax({
          url: api.elements.target.attr('source')
        })
        .then(function(content) {
          // Set the tooltip content upon successful retrieval
          api.set('content.text', content);
        }, function(xhr, status, error) {
          // Upon failure... set the tooltip content to error
          api.set('content.text', status + ': ' + error);
        });
      return 'Loading..';
    }
  },
  position: {
    my: 'bottom left',
    at: 'top right',
    viewport: $(window)
  },
  style: 'qtip-tipsy'
});

并将mytooltip-elements添加到需要工具提示的元素

这里是一个演示http://jsfiddle.net/dhirajbodicherla/L6yq3/3039/

相关文章：