Question

我正在使用qTip jquery插件qTip plugin为我正在处理的网站基于我在这里提出的另一个帖子：stack overflow thread

我的问题是，我的屏幕顶部有一个导航栏，它基本上根据您所在的标签菜单设置标题属性，这些都存储在一个javascript数组中。

例如，我在屏幕顶部有三个菜单选项，例如菜单A，菜单B和菜单C.

我还有一个位于导航栏最右侧位置的信息图像，我根据导航栏中选择的菜单选项设置了标题属性。

例如：

Menu A => myRole[0] = "Admin"
Menu B => myRole[1] = "Manager"
Menu C => myRole[2] = "Guest"

因此，基本上当用户点击导航栏中的每个菜单时，我将信息图像中的title属性设置为“Admin”，“Manager”或“Guest”。

启动时，qTip插件工作并在我将鼠标悬停在其上时显示“Admin”，但是当我将菜单更改为菜单C时，它仍会显示“Admin”而不是“Guest”

从它的外观来看，它似乎没有调用qTip插件，我已将它放在屏幕的页脚（参见下面的实际代码）。

任何想法如何确保每次点击/更改javascript数组中的菜单选项和拾取值时qTip都会触发？

<script type="text/javascript" src="jquery.qtip-1.0.0-rc3.min.js"></script>



<script type="text/javascript"> 
$(document).ready(function()
{
   $('div#infoi img[title]').qtip({
      position: { 
         adjust: { x:-110, y:0 },
         corner: {
            target: 'bottomLeft',
            tooltip: 'topMiddle'
         }
      },
      style: {
        width: 250,
        padding: 5,
        background: '#E7F1FA',
        color: 'black',
        textAlign: 'center',
        border: {
          width: 3,
          color: '#65a9d7'
        },
        tip: 'topRight'
      }
   });
});
</script>

感谢。

Answer 1

如果您的菜单在页面上存在，然后您稍后添加其他元素或稍后替换元素，则需要重新初始化该元素的工具提示。

正如您所提到的，您似乎只是根据选择更改侧面部分的文本。您需要更改两个标题然后重新初始化qtip函数，所以我建议您将所有代码放在像这样的函数中

var qtipset = function(){
      $('div#infoi img[title]').qtip({
      position: { 
         adjust: { x:-110, y:0 },
         corner: {
            target: 'bottomLeft',
            tooltip: 'topMiddle'
         }
      },
      style: {
        width: 250,
        padding: 5,
        background: '#E7F1FA',
        color: 'black',
        textAlign: 'center',
        border: {
          width: 3,
          color: '#65a9d7'
        },
        tip: 'topRight'
      }
   });
     }

在您的Javascript中，在更改图像上的title属性后，使用所选菜单文本更新图像的标题也称为qtipset(); 然后重新读取标题并在页面上初始化qtip元素，以便下次悬停时，它将能够使用正确的数据调用qtip函数。

qTip jQuery插件并不总是被激活

1 个答案: