Question

我正在尝试使用qTip + JQuery从DIV元素的内容创建工具提示。如果我尝试使用静态内容定义工具提示，一切似乎都正常。当我尝试在for循环中使用它们并获取DIV元素的内容并尝试将其显示为工具提示时，没有任何显示。我在文档就绪函数中有以下代码。类'tooltip'

的display属性设置为none

$.each($(".tooltip"), function (i, val) {
             var theContent = $(val).html();
             $(val).qtip({
                 content: $(val).html,
                 style: {
                     width: 200,
                     background: '#ebf1ff',
                     color: 'black',
                     textAlign: 'center',
                     border: {
                         width: 1,
                         radius: 4,
                         color: '#AACCEE'
                     },
                     tip: 'bottomLeft',
                     name: 'dark'
                 }
             });
         });

我的HTML标记如下所示：

<div class="vBarContainer"><div id="gantt_65_1" class="gantt" style="border-width:medium;border-color:black;background:orange;width:6%;margin-left:0%;">0</div><div class="tooltip">Quantity:15453</div></div>

有人能指出我可能做错了吗？

谢谢， javid

Answer 1

我的解决方案：通过使用tooltip div元素旁边div的sibling属性来管理它的工作

$('.gantt').each(function () {
         $(this).qtip({
             content: $(this).siblings('div.tooltip').html(),
             style: {
                 width: 200,
                 background: '#ebf1ff',
                 color: 'black',
                 textAlign: 'left',
                 border: {
                     width: 1,
                     radius: 4,
                     color: '#AACCEE'
                 },
                 tip: 'bottomLeft',
                 name: 'dark'
             },
             position: {
                 corner: {
                     target: 'topMiddle',
                     tooltip: 'bottomLeft'
                 }
             }
         });
     });

qTip在每个循环中使用时不显示内容

1 个答案: