qTip2的動態背景色

Question

有誰知道是否可以在腳本中控制qTip2的背景顏色？我可以動態設置消息，但我在更改背景顏色時遇到問題。我有一系列不同顏色的DIV，我需要工具提示根據DIV的背景顏色更改顏色。用我的JavaScript我能夠獲得DIV的背景顏色，但我不能在qTip2中設置背景顏色。

jQuery(document).ready(function($){ 
    $(".tooltip").each(function(){ 
     $toolTip = $(this).data('title'); 
     var bgColor = $(this).css('backgroundColor'); 
     hexc(bgColor); 
     function hexc(colorval) { 
      var parts = colorval.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); 
      delete(parts[0]); 
      for (var i = 1; i <= 3; ++i) { 
       parts[i] = parseInt(parts[i]).toString(16); 
       if (parts[i].length == 1) parts[i] = '0' + parts[i]; 
      } 
      color = '#' + parts.join(''); 
      $bgColor = color; 
     } 

     $('.tool-tip').css('backgroundColor', $bgColor) 

     $(this).qtip({ 
      content: { 
       text: $toolTip 
      }, 
      position: { 
       my: 'bottom right', 
       at: 'top right', 
       target: 'mouse' 
      }, 
      style: { 
       classes: 'tool-tip', 
       tip: { 
        height: 15 
       } 
      } 
     }) 
    }); 
}); 

Answer 1

有關如何動態更改樣式類的信息，請參閱QTip2 dynamic show/hide events and slideDown。然後，您應該能夠調整類以匹配您的div。

是的，我知道這個問題很久以前就問過了，但希望它能幫助別人。

的鏈接提供了此信息：

至少有三種方式來動態地設置Qtip選項。

的qtip性能外設置變量，並利用這些 使用回調函數，如果有 使用事件功能 我敢肯定還有其他的方法來做到這一點，但下面的代碼適用於所有我需要的情況下，並演示了這三種方法。我需要至少使用兩個，因爲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; 

}