CODEWITHSUNDEEP
jqueryjquery-pluginstooltip
Ant
Ant

Reputation: 131

Show and hide tooltip on click (Tipso.js)

I'm using simple tooltip plugin called Tipso.
How can I show and hide tooltips only by click?

$('.top').tipso();
/* Tipso Bubble Styles */

.tipso_bubble,
.tipso_bubble>.tipso_arrow {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.tipso_bubble {
  position: absolute;
  text-align: center;
  border-radius: 6px;
  z-index: 9999;
}

.tipso_style {
  cursor: help;
  border-bottom: 1px dotted;
}

.tipso_title {
  border-radius: 6px 6px 0 0;
}

.tipso_content {
  word-wrap: break-word;
  padding: 0.5em;
}


/* Tipso Bubble size classes - Similar to Foundation's syntax*/

.tipso_bubble.tiny {
  font-size: 0.6rem;
}

.tipso_bubble.small {
  font-size: 0.8rem;
}

.tipso_bubble.default {
  font-size: 1rem;
}

.tipso_bubble.large {
  font-size: 1.2rem;
  width: 100%;
}


/* Tipso Bubble Div */

.tipso_bubble>.tipso_arrow {
  position: absolute;
  width: 0;
  height: 0;
  border: 8px solid;
  pointer-events: none;
}

.tipso_bubble.top>.tipso_arrow {
  border-top-color: #000;
  border-right-color: transparent;
  border-left-color: transparent;
  border-bottom-color: transparent;
  top: 100%;
  left: 50%;
  margin-left: -8px;
}

.tipso_bubble.bottom>.tipso_arrow {
  border-bottom-color: #000;
  border-right-color: transparent;
  border-left-color: transparent;
  border-top-color: transparent;
  bottom: 100%;
  left: 50%;
  margin-left: -8px;
}

.tipso_bubble.left>.tipso_arrow {
  border-left-color: #000;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-right-color: transparent;
  top: 50%;
  left: 100%;
  margin-top: -8px;
}

.tipso_bubble.right>.tipso_arrow {
  border-right-color: #000;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  top: 50%;
  right: 100%;
  margin-top: -8px;
}

.tipso_bubble .top_right_corner,
.tipso_bubble.top_right_corner {
  border-bottom-left-radius: 0;
}

.tipso_bubble .bottom_right_corner,
.tipso_bubble.bottom_right_corner {
  border-top-left-radius: 0;
}

.tipso_bubble .top_left_corner,
.tipso_bubble.top_left_corner {
  border-bottom-right-radius: 0;
}

.tipso_bubble .bottom_left_corner,
.tipso_bubble.bottom_left_corner {
  border-top-right-radius: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://tipso.object505.com/tipso.js"></script>


<div id="banner-message">
  <p>Hello World</p>
  <span class="top tipso_style" data-tipso="This is a tooltip text">I want to show the tooltip on click and hide it on click as well.</span>
</div>

View on jsFiddle

Upvotes: 2

Views: 750

Answers (2)

gseattle
gseattle

Reputation: 1022

Additionally how can that be made to clear one tooltip if another is clicked on in clicking outside of the first?

Example on jsfiddle shows the problem to be solved.

enter image description here

All code is the same as showdev's above except the html ...

<span class="top tipso_style" data-tipso="Tooltip one">One for tooltip</span>
<br><br>
<br><br>
<span class="top tipso_style" data-tipso="Tooltip two">Two for tooltip></span>

EDIT:

How about like at https://jsfiddle.net/j4r3zybg/3/ adding $tips.tipso('hide') after let showing?

let $this = $(this);
let showing = $this.hasClass('typso-showing');
$tips.tipso('hide')  // close all, prevent two showing

Nope, almost. The user now cannot copy the text easily without that tooltip disappearing before they can do ctrl-c.

Upvotes: 0

showdev
showdev

Reputation: 29168

Consider adding a click handler that shows or hides the tooltip depending on whether it's already showing. Tipso documentation recommends using a class to indicate when the tooltip is showing; see the demo titled "Click to show/hide tipso".

Here's a demonstration of a click event that toggles the tooltip. It also includes mouseenter and mouseleave handlers to update the "showing" class.

$('.top')
  .tipso()
  .on({
    mouseenter: function(e) {
      jQuery(this).addClass('typso-showing');
    },
    mouseleave: function(e) {
      jQuery(this).removeClass('typso-showing');
    },
    click: function(e) {
      let $this = jQuery(this);
      if ($this.hasClass('typso-showing')) {
        $this.removeClass('typso-showing');
        $this.tipso('hide');
      } else {
        $this.addClass('typso-showing');
        $this.tipso('show');
      }
    }
  });
/* Tipso Bubble Styles */

.tipso_bubble,
.tipso_bubble>.tipso_arrow {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.tipso_bubble {
  position: absolute;
  text-align: center;
  border-radius: 6px;
  z-index: 9999;
}

.tipso_style {
  cursor: help;
  border-bottom: 1px dotted;
}

.tipso_title {
  border-radius: 6px 6px 0 0;
}

.tipso_content {
  word-wrap: break-word;
  padding: 0.5em;
}


/* Tipso Bubble size classes - Similar to Foundation's syntax*/

.tipso_bubble.tiny {
  font-size: 0.6rem;
}

.tipso_bubble.small {
  font-size: 0.8rem;
}

.tipso_bubble.default {
  font-size: 1rem;
}

.tipso_bubble.large {
  font-size: 1.2rem;
  width: 100%;
}


/* Tipso Bubble Div */

.tipso_bubble>.tipso_arrow {
  position: absolute;
  width: 0;
  height: 0;
  border: 8px solid;
  pointer-events: none;
}

.tipso_bubble.top>.tipso_arrow {
  border-top-color: #000;
  border-right-color: transparent;
  border-left-color: transparent;
  border-bottom-color: transparent;
  top: 100%;
  left: 50%;
  margin-left: -8px;
}

.tipso_bubble.bottom>.tipso_arrow {
  border-bottom-color: #000;
  border-right-color: transparent;
  border-left-color: transparent;
  border-top-color: transparent;
  bottom: 100%;
  left: 50%;
  margin-left: -8px;
}

.tipso_bubble.left>.tipso_arrow {
  border-left-color: #000;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-right-color: transparent;
  top: 50%;
  left: 100%;
  margin-top: -8px;
}

.tipso_bubble.right>.tipso_arrow {
  border-right-color: #000;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  top: 50%;
  right: 100%;
  margin-top: -8px;
}

.tipso_bubble .top_right_corner,
.tipso_bubble.top_right_corner {
  border-bottom-left-radius: 0;
}

.tipso_bubble .bottom_right_corner,
.tipso_bubble.bottom_right_corner {
  border-top-left-radius: 0;
}

.tipso_bubble .top_left_corner,
.tipso_bubble.top_left_corner {
  border-bottom-right-radius: 0;
}

.tipso_bubble .bottom_left_corner,
.tipso_bubble.bottom_left_corner {
  border-top-right-radius: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://tipso.object505.com/tipso.js"></script>

<div id="banner-message">
  <p>Hello World</p>
  <span class="top tipso_style" data-tipso="This is a tooltip text">I want to show the tooltip on click and hide it on click as well.</span>
</div>

It seems you want to remove Tipso's default hover behavior so the tooltip only shows on click. One method is to use off() to remove Typso's handlers, which seem to be for "mouseover" and "mouseout" events. Then add your own click handler.

// define all tips
let $tips = $('.top');

// initialize tipso and configure handlers
$tips
  .tipso()
  .off('mouseover mouseout')
  .on('click', function() {

    let $this = $(this);
    let showing = $this.hasClass('typso-showing');

    $this
      .tipso(showing ? 'hide' : 'show')
      .toggleClass('typso-showing', !showing);

  });

// close on click outside
$(document).on('click', function(e) {
  if (!$tips.is(e.target)) {
    $tips.tipso('hide').removeClass('typso-showing');
  }
});
/* Tipso Bubble Styles */

.tipso_bubble,
.tipso_bubble>.tipso_arrow {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.tipso_bubble {
  position: absolute;
  text-align: center;
  border-radius: 6px;
  z-index: 9999;
}

.tipso_style {
  cursor: help;
  border-bottom: 1px dotted;
}

.tipso_title {
  border-radius: 6px 6px 0 0;
}

.tipso_content {
  word-wrap: break-word;
  padding: 0.5em;
}


/* Tipso Bubble size classes - Similar to Foundation's syntax*/

.tipso_bubble.tiny {
  font-size: 0.6rem;
}

.tipso_bubble.small {
  font-size: 0.8rem;
}

.tipso_bubble.default {
  font-size: 1rem;
}

.tipso_bubble.large {
  font-size: 1.2rem;
  width: 100%;
}


/* Tipso Bubble Div */

.tipso_bubble>.tipso_arrow {
  position: absolute;
  width: 0;
  height: 0;
  border: 8px solid;
  pointer-events: none;
}

.tipso_bubble.top>.tipso_arrow {
  border-top-color: #000;
  border-right-color: transparent;
  border-left-color: transparent;
  border-bottom-color: transparent;
  top: 100%;
  left: 50%;
  margin-left: -8px;
}

.tipso_bubble.bottom>.tipso_arrow {
  border-bottom-color: #000;
  border-right-color: transparent;
  border-left-color: transparent;
  border-top-color: transparent;
  bottom: 100%;
  left: 50%;
  margin-left: -8px;
}

.tipso_bubble.left>.tipso_arrow {
  border-left-color: #000;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-right-color: transparent;
  top: 50%;
  left: 100%;
  margin-top: -8px;
}

.tipso_bubble.right>.tipso_arrow {
  border-right-color: #000;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  top: 50%;
  right: 100%;
  margin-top: -8px;
}

.tipso_bubble .top_right_corner,
.tipso_bubble.top_right_corner {
  border-bottom-left-radius: 0;
}

.tipso_bubble .bottom_right_corner,
.tipso_bubble.bottom_right_corner {
  border-top-left-radius: 0;
}

.tipso_bubble .top_left_corner,
.tipso_bubble.top_left_corner {
  border-bottom-right-radius: 0;
}

.tipso_bubble .bottom_left_corner,
.tipso_bubble.bottom_left_corner {
  border-top-right-radius: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://tipso.object505.com/tipso.js"></script>

<div id="banner-message">
  <p>Hello World</p>
  <span class="top tipso_style" data-tipso="This is a tooltip text">I want to show the tooltip on click and hide it on click as well.</span>
</div>

Upvotes: 3

Related Questions