-1

Hey all I am using this code below for a tooltip:

/*
Tipr 2.0.1
Copyright (c) 2015 Tipue
Tipr is released under the MIT License
http://www.tipue.com/tipr
*/
(function($) {
  $.fn.tipr = function(options) {
    var set = $.extend({
      'speed': 200,
      'mode': 'bottom'
    }, options);

    return this.each(function() {
      var tipr_cont = '.tipr_container_' + set.mode;

      $(this).hover(
        function() {
          var d_m = set.mode;

          if ($(this).attr('data-mode')) {
            d_m = $(this).attr('data-mode')
            tipr_cont = '.tipr_container_' + d_m;
          }

          var out = '<div class="tipr_container_' + d_m + '"><div class="tipr_point_' + d_m + '"><div class="tipr_content">' + $(this).attr('data-tip') + '</div></div></div>';

          $(this).append(out);

          var w_t = $(tipr_cont).outerWidth();
          var w_e = $(this).width();
          var m_l = (w_e / 2) - (w_t / 2);

          $(tipr_cont).css('margin-left', m_l + 'px');
          $(this).removeAttr('title alt');
          $(tipr_cont).fadeIn(set.speed);
        },
        function() {
          $(tipr_cont).remove();
        }
      );
    });
  };
})(jQuery);

$(document).ready(function() {
     $('.tip').tipr();
});

I am trying to disable the hover by calling something like so:

$(gbTip).off('hover');

But that doesn't seem to be working as it still pops up when hovering over the text.

Here is the JSFIDDLE

StealthRT
  • 10,108
  • 40
  • 183
  • 342

1 Answers1

1

You can disable hover with

$(document).ready(function() {
    gbTip = $('.tip').tipr();
    gbTip.unbind('mouseenter mouseleave');
});

Edit:

Alternatively, to toggle between enabling and disabling the hover effect, we can add a no-hover class,

$('.tip').addClass('no-hover');

with css,

.no-hover > * {
   display: none !important;
}

and to enable the hover effect again, just remove the class,

$('.tip').removeClass('no-hover');
jnersn
  • 384
  • 1
  • 3
  • 14
  • Alright. How would one turn it back on then? just **gbTip.bind('mouseenter mouseleave');**? – StealthRT Feb 28 '16 at 20:08
  • Unbind would be ideal if you just need to disable the hover effect, but to toggle between enabled and disabled, I would use a `no-hover` class for `$('.tip')` instead. Then add a css rule `display: none !important` for the tipr elements. Further, to make the hover work again, just remove the `no-hover` class. – jnersn Feb 28 '16 at 20:34
  • Hum that would work but the button i am using morphs into a module box and since it adds that class *display: none" it no longer show the contents inside the module box... Ideally i need to be able to destroy the tooltip and then re-create it. – StealthRT Feb 28 '16 at 21:11