QTip2動態顯示/隱藏事件和slideDown

Question

我試圖根據目標的屬性動態更改顯示和隱藏事件。例如，有時我可能需要鼠標懸停，其他時間點擊。同樣，我希望能夠調整效果，例如調整滑動時間。

我找到了一種方法來動態調整位置在Is it possible to set position of a Qtip programmatically?，但由於它在節目上運行，顯然不會工作。

content.text可以使用回調函數，但我不相信show可以。

那麼，我該如何動態改變顯示和隱藏（並理想的slideDown時機）？

工作代碼如下，其中部分工作沒有註釋掉。請注意，我可以更改筆尖大小，但如果更改高度，則工具提示無法正確顯示 - 直到我滾動窗口。這不是那麼重要，而改變表演和隱藏事件是。

function setupQtips() 
{ 
    $("*[qtipiddiv]").each 
    (
     function() 
     { 
      $(this).qtip 
      (
       { 
        overwrite: false, 
        content: 
        { 
         text: function (event, api) 
         { 
          var strId = $(this).attr('qtipiddiv'); 
          return ($('#' + strId)); 
         }, 

         title: 
         { 
          text: function (event, api) 
          { 
           return ($(this).attr('qtiptitle')); 
          } 
         } 
        }, 

        show: 
        { 
         event: 'click', 

         effect: function (offset) 
         { 
          $(this).slideDown(100); 
         }, 

         solo: true 
        }, 

        hide: 
        { 
         event: 'unfocus' 
        }, 

        position: 
        { 
         viewport: $(window), 

         adjust: 
         { 
          screen: true 
         } 
        }, 

        style: 
        { 
         classes: 'qtip-rounded qtip-shadow' 
        }, 

        events: 
        { 
         show: function (event, api) 
         { 
          //Position 
          var elmTarget = $(api.elements.target[0]); 
          var strPositionMy = elmTarget.attr('qtippositionmy'); 
          if (strPositionMy != undefined) 
          { 
           elmTarget.qtip('option', 'position.my', strPositionMy); 
          } 

          var strPositionAt = elmTarget.attr('qtippositionat'); 
          if (strPositionAt != undefined) 
          { 
           elmTarget.qtip('option', 'position.at', strPositionAt); 
          } 

          //Height/width 
          var strWidth = elmTarget.attr('qtipwidth'); 
          if (strWidth != undefined) 
          { 
           elmTarget.qtip('option', 'style.width', strWidth); 
          } 

          var strHeight = elmTarget.attr('qtipheight'); 
          if (strHeight != undefined) 
          { 
           elmTarget.qtip('option', 'style.height', strHeight); 
          } 

          //Tip Height/width 
          //var strTipWidth = elmTarget.attr('qtiptipwidth'); 
          //if (strTipWidth != undefined) 
          //{ 
          // elmTarget.qtip('option', 'style.tip.width', strTipWidth); 
          //} 

          //var strTipHeight = elmTarget.attr('qtiptipheight'); 
          //if (strTipHeight != undefined) 
          //{ 
          // elmTarget.qtip('option', 'style.tip.height', strTipHeight); 
          // //api.set('style.tip.height', strTipHeight); 
          //} 

          //Title Button 
          var strTitleButton = elmTarget.attr('qtipbutton'); 
          if (strTitleButton != undefined) 
          { 
           elmTarget.qtip('option', 'content.title.button', true); 
          } 

          //var strSlide = elmTarget.attr('qtipslide'); 
          //if (strSlide != undefined) 
          //{ 
          // elmTarget.qtip('option', 'show.effect.slideDown', strSlide); 
          //} 
         } 
        } 
       } 
      ) 
     } 
    ); 

    return; 
} 

Answer 1

通過閃光的輝煌和大量的試驗和錯誤，我發現至少有三種方式來動態設置Qtip選項。

1. 的qtip性能外設置變量，並利用這些
2. 使用回調函數（如果可用）
3. 使用事件功能

我敢肯定還有其他的方法來做到這一點，但下面的代碼適用於我需要的所有情況，並演示了所有三種方法。我需要至少使用兩個，因爲fadeIn方法不會讓我只使用一個變量。只有在intFade未定義的情況下，我才能調用fadeIn方法。

所以，希望這個答案可以幫助別人。

function setupQtips() 
    { 
     $("*[qtipiddiv]").each 
     (
      function() 
      { 
       //Title 
       var elmTarget = $(this); 
       var strTitle = elmTarget.attr('qtiptitle'); 
       if (strTitle == undefined) 
       { 
        strTitle = false; 
       } 

       //Title Button 
       var binTitleButton = elmTarget.attr('qtipbutton'); 
       if (binTitleButton == undefined) 
       { 
        binTitleButton = false; 
       } 

       //Show 
       var strShow = elmTarget.attr('qtipshow'); 
       if (strShow == undefined) 
       { 
        strShow = 'click'; 
       } 

       if (strShow == 'false') 
       { 
        strShow = false; 
       } 

       //Hide 
       var strHide = elmTarget.attr('qtiphide'); 
       if (strHide == undefined) 
       { 
        strHide = 'unfocus'; 
       } 

       if (strHide == 'false') 
       { 
        strHide = false; 
       } 

       //Modal 
       var binModal = elmTarget.attr('qtipmodal'); 
       var binBlur = false; 
       if (binModal == undefined) 
       { 
        binModal = false; 
       } 
       else if (strHide == 'unfocus') 
       { 
        binBlur = true; 
       } 

       //Tip Height/width 
       var intTipWidth = elmTarget.attr('qtiptipwidth'); 
       if (intTipWidth == undefined) 
       { 
        intTipWidth = 6; 
       } 

       var intTipHeight = elmTarget.attr('qtiptipheight'); 
       if (intTipHeight == undefined) 
       { 
        intTipHeight = 6; 
       } 

       //Style 
       var strStyle = elmTarget.attr('qtipstyle'); 
       if (strStyle == undefined) 
       { 
        strStyle = ''; 
       } 

       //____________________________________________________ 
       //Set qtip 
       $(this).qtip 
       (
        { 
         overwrite: false, 
         content: 
         { 
          text: function (event, api) 
          { 
           var strId = $(this).attr('qtipiddiv'); 
           return ($('#' + strId)); 
          }, 

          title: 
          { 
           text: strTitle, 

           button: binTitleButton 
          } 
         }, 

         show: 
         { 
          event: strShow, 

          effect: function (offset) 
          { 
           var strFade = offset.target.attr('qtipfade'); 
           if (strFade == undefined) 
           { 
            $(this).fadeIn(0); 
           } 
           else 
           { 
            var intFade = parseInt(strFade); 
            $(this).fadeIn(intFade); 
           } 
          }, 

          solo: true, 
          modal: 
          { 
           on: binModal, 
           blur: binBlur 
          } 
         }, 

         hide: 
         { 
          event: strHide 
         }, 

         position: 
         { 
          viewport: $(window), 

          adjust: 
          { 
           screen: true 
          } 
         }, 

         style: 
         { 
          classes: 'qtip-rounded qtip-shadow ' + strStyle, 
          tip: 
          { 
           width: intTipWidth, 
           height: intTipHeight 
          } 
         }, 

         events: 
         { 
          show: function (event, api) 
          { 
           //Position 
           var elmTarget = $(api.elements.target[0]); 
           var strPositionMy = elmTarget.attr('qtippositionmy'); 
           if (strPositionMy != undefined) 
           { 
            elmTarget.qtip('option', 'position.my', strPositionMy); 
           } 

           var strPositionAt = elmTarget.attr('qtippositionat'); 
           if (strPositionAt != undefined) 
           { 
            elmTarget.qtip('option', 'position.at', strPositionAt); 
           } 

           //Height/width 
           var strWidth = elmTarget.attr('qtipwidth'); 
           if (strWidth != undefined) 
           { 
            elmTarget.qtip('option', 'style.width', strWidth); 
           } 

           var strHeight = elmTarget.attr('qtipheight'); 
           if (strHeight != undefined) 
           { 
            elmTarget.qtip('option', 'style.height', strHeight); 
           } 
          } 
         } 
        } 
      ) 
      } 
    ); 

     return; 
    } 

Answer 2

 $('.tip').qtip({ 
      position: { 
       effect: false 
      } 
     });