qTip jQuery插件并非总是触发 [英] qTip jQuery Plugin not always Firing

问题描述

我正在使用qTip jQuery插件 qTip插件用于我正在使用的网站在我在此处提出的另一个线程上:堆栈溢出线程

I am using the qTip jquery plugin qTip plugin for a website I'm working on based on another thread I raised here: stack overflow thread

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

My question is, I have a navigation bar running along the top of my screen which is basically sets the title attribute based on the tab menu you are in, these are all stored within a javascript array.

例如，我在屏幕顶部运行三个菜单选项，分别是菜单A，菜单B和菜单C.

For example, I have three menu options running along the top of the screen, say Menu A, Menu B and Menu C.

基于导航栏中选择的菜单选项，我还在导航栏的最右边放置了一个信息图像，该图像设置了标题属性.

I also have an information image positioned at the rightmost position of the nav bar, which I set the title attribute, based on the Menu option selected in the Nav Bar.

例如:

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

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

So basically as the user clicks on each of the menus in the nav bar, I set the title attribute in the information image to either "Admin","Manager" or "Guest".

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

At startup, the qTip plugin works and displays "Admin" when I hover over it but when I change the menu to Menu C, it still displays "Admin" instead of "Guest"

从外观上看，它似乎没有调用qTip插件，我已将其定位在屏幕的底部(请参见下面的实际代码).

From the looks of it, it doesn't seem to be calling the qTip plugin, which I have positioned at the footer of the screen (see actual code below).

有什么主意如何确保每次单击/更改javascript数组中的菜单选项和取货值时都触发qTip?

Any ideas how to ensure that the qTip fires every time I click/change menu options and pickups value within javascript array?

<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>

谢谢.

推荐答案

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

If your menu is present intially on page and then you add other elements later or replace elements later then you need to reinitialise tooltip on that elements.

正如您提到的，您似乎只是根据选择来更改侧面的文本.您需要同时更改两个标题，然后重新初始化qtip函数，所以我建议您将所有代码放置在类似以下的函数中

As you mentioned it appears you are only changing text of the side part based on selection. You need to change both title and then reinitialise the qtip function so i suggest you place all of your code in a function like

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函数.

In your Javascript where you are updating title of your image with selected menu text just after changing the title attribute on image also call this function like qtipset(); That would then reread the title and initialize qtip elements on page so next time you hover it will be able to call qtip function with correct data.

这篇关于qTip jQuery插件并非总是触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！