Question

我在我的网站上使用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和不同来源的多个工具提示？

非常感谢！

Answer 1

不能有多个具有相同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/

q使用AJAX内容提取2个多个工具提示

1 个答案: