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。这是可能的，还是我必须为每个这样的HTML代码片段生成qtip声明？

请求意见

BestRegards

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

这样，任何div class="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>

使用qtip到多个地方，但内容不同？

1 个答案: