QTip2 dynamic show/hide events and slideDown

Question

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

Answer 1

Through a flash of brilliance and a lot of trial and error, I've discovered that there are at least three ways to set the Qtip options dynamically.

1. Set variables outside the qtip properties and use those
2. Use a Callback function, if available
3. Use an events function

I'm sure there are other ways to accomplish this, but the code below works for all the situations I needed, and demonstrates all three methods. I needed to use at least two, as the fadeIn method would not let me just use a variable. Nor could I just call the fadeIn method only if intFade was undefined.

So, hopefully this answer helps someone else.

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