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

}