1

I'm trying to dynamically change the show and hide events based on attributes of the target. for example, sometimes I may want mouseover, and other times click. Similarly, I want to be able to adjust effects, such as adjust the slideDown timing.

I found a way to adjust the position dynamically at Is it possible to set position of a Qtip programmatically?, but since that runs on show, that clearly won't work.

content.text can use a callback function, but I don't believe show can.

So, how do I dynamically change the show and hide (and ideally the slideDown timing)?

The working code is below, with the parts that don't work commented out. Note that I can change the tip size, but the tooltip does not display correctly if I change the height -- until I scroll the window. That isn't so important, whereas changing the show and hide events is.

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;
}
4

2 回答 2

0

通过一闪而过的光彩和大量的反复试验，我发现至少有三种方法可以动态设置 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;
  }
于 2013-10-19T13:24:23.303 回答
0 
        $('.tip').qtip({
            position: {
                effect: false
            }
        });
于 2014-10-31T10:46:20.910 回答