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'
        });
    });
});

这样，任何具有 class="tooltip" 的 div 都会自动启用 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>