qTip jQuery Plugin not always Firing

问题

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

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.

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.

For example:

Menu A => myRole[0] = "Admin"
Menu B => myRole[1] = "Manager"
Menu C => myRole[2] = "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".

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"

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

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>

Thanks.

回答1:

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.

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

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.

来源：https://stackoverflow.com/questions/2963294/qtip-jquery-plugin-not-always-firing

标签

jquery

jquery-plugins

qtip