jquery - 使用一个 qtip 到多个地方但内容不同？

Question

你好，

我在我的网站上使用qTip，这就是文档就绪功能的样子：

    $.fn.qtip.styles.mystyle = { // Last part is the name of the style
       width: 200,
       background: '#ebf1ff',
       color: 'black',
       textAlign: 'center',
       border: {
          width: 1,
          radius: 4,
          color: '#AACCEE'
       },
       tip: 'bottomLeft',
       name: 'dark'
    }



   $('.controlTitleContainer .icon').qtip({
       content: $(this).find('.tooltip').html(),
        position: {
              corner: {
                 target: 'topRight',
                 tooltip: 'bottomLeft'
              }
           },
       style: 'mystyle'
    });

第一部分仅用于样式，但是第二部分将填充 qtip。

我的 HTML 看起来像这样：

 <div class="controlTitleContainer">
      <div class="text">
           <label for="ModelViewAd_Title">Titel</label>
      </div>
      <div class="icon">
           &nbsp;<div class="toolTip">MyToolTipTest</div>
      </div>
  </div>

注意：类 toolTip 设置为 Display : none，class="icon" div 将是显示工具提示的那个

我将在页面上有很多这样的 html 片段，但它会包含不同的数据，我需要的是工具提示来显示 . 这是可能的还是我必须为每个这样的 HTML 片段生成一个 qtip 声明？

恳求建议

此致

Answer 1

为什么不这样呢？

$(document).ready(function(){
    $.each($(".tooltip"), function(i,val){
        $.fn.qtip.styles.mystyle = { 
           width: 50,
           background: '#ebf1ff',
           color: 'black',
           textAlign: 'center',
           border: {
              width: 1,
              radius: 4,
              color: '#AACCEE'
           },
           tip: 'bottomLeft',
           name: 'dark'
        }

        var theContent = $(val).html();
        $(val).qtip({
            content: theContent,
             position: {
                      corner: {
                         target: 'topRight',
                         tooltip: 'bottomLeft'
                      }
                   },
               style: 'mystyle'
        });
    });
});

这样，任何divwithclass="tooltip"都会自动启用 qTip。这实际上就是我在项目中所做的。

这是我的测试 HTML：-

 <div class="controlTitleContainer">
      <div class="text">
           <label for="ModelViewAd_Title">Titel</label>
      </div>
      <div class="icon">
           &nbsp;<span class="tooltip">MyToolTipTest</span>
           &nbsp;<span class="tooltip">MyToolTipTest2</span>
           &nbsp;<span class="tooltip">MyToolTipTest3</span>
      </div>
  </div>