How do I close this mobile jQuery tooltip when the trigger text is cli - Enhance your coding expertise with TinyTiger on @onlycoders.net

1 year ago

#67550

TinyTiger

How do I close this mobile jQuery tooltip when the trigger text is clicked?

I have a nice mobile-friendly jQuery tooltip taken from here and tweaked slightly to my needs.

It works great on mobile because the tooltip displays when tapped and disapears again after tapping the tooltip popup or anywhere else on the page.

The only time it doesn't disapear on mobile is if you re-tap the text that triggered the tooltip. I would like to change it so when the trigger text is re-tapped it disapears.

The tooltip works for both desktop and mobile, so to experience the mobile interactions I am talking about you will need to put your browser into mobile inspection mode. Otherwise you will just be seeing the hover functionality, which is different to what I describe above.

//Mobile friendly tooltips
jQuery(function() {
  var targets = jQuery('[rel~=tooltip]'),
    target = false,
    tooltip = false,
    title = false;

  targets.bind('mouseenter', function() {
    target = jQuery(this);
    tip = target.attr('title');
    tooltip = jQuery('<div id="tooltip"></div>');

    if (!tip || tip == '')
      return false;

    target.removeAttr('title');
    tooltip.css('opacity', 0)
      .html(tip)
      .appendTo('body');

    var init_tooltip = function() {
      if (jQuery(window).width() < tooltip.outerWidth() * 1.5)
        tooltip.css('max-width', jQuery(window).width() / 2);
      else
        tooltip.css('max-width', 340);

      var pos_left = target.offset().left + (target.outerWidth() / 2) - (tooltip.outerWidth() / 2),
        pos_top = target.offset().top - tooltip.outerHeight() - 20;

      if (pos_left < 0) {
        pos_left = target.offset().left + target.outerWidth() / 2 - 20;
        tooltip.addClass('left');
      } else
        tooltip.removeClass('left');

      if (pos_left + tooltip.outerWidth() > jQuery(window).width()) {
        pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20;
        tooltip.addClass('right');
      } else
        tooltip.removeClass('right');

      if (pos_top < 0) {
        var pos_top = target.offset().top + target.outerHeight();
        tooltip.addClass('top');
      } else
        tooltip.removeClass('top');

      tooltip.css({
          left: pos_left,
          top: pos_top
        })
        .animate({
          top: '+=10',
          opacity: 1
        }, 50);
    };

    init_tooltip();
    jQuery(window).resize(init_tooltip);

    var remove_tooltip = function() {
      tooltip.animate({
        top: '-=10',
        opacity: 0
      }, 50, function() {
        jQuery(this).remove();
      });

      target.attr('title', tip);
    };

    target.bind('mouseleave', remove_tooltip);
    tooltip.bind('click', remove_tooltip);
  });
});

.click-me {
  width: 100px;
  height: 100px;
  background-color: grey;
  padding: 10px;
  color: #fff;
}

#tooltip {
  text-align: left;
  color: #fff;
  background: #222;
  position: absolute;
  z-index: 100;
  padding: 1.5em 2em;
  font-size: 0.9em;
  border-radius: 6px;
}

#tooltip:after
/* triangle decoration */

{
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #222;
  content: '';
  position: absolute;
  left: 50%;
  bottom: -10px;
  margin-left: -10px;
}

#tooltip.top:after {
  border-top-color: transparent;
  border-bottom: 10px solid #222;
  top: -20px;
  bottom: auto;
}

#tooltip.left:after {
  left: 10px;
  margin: 0;
}

#tooltip.right:after {
  right: 10px;
  left: auto;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="click-me" rel="tooltip" title="Enter your tip here">On mobile, click me to display tooltip and click again to disapear.</div>

javascript

jquery

tooltip

0 Answers

Your Answer

Posts

Questions

Blogs

Jobs