jQuery jTippy Tooltip Plugin

In this article, we will understand the jquery jtippy tooltip plugin in detail with the help of various examples. jTippy plugin is a flexible, modern jQuery tooltip plugin for creating customizable, themeable tooltips on web applications.

Following are examples of the jquery jtippy tooltip plugin.

Example 1:

<! DOCTYPE html>
<html>
	<head>
		<meta http-equiv = "Content-Type"
			content = "text/html; charset=UTF-8" />
		<title> Example of jQuery jTippy Tooltip Plugin </title>
		<meta name = "description"
			content = "jQuery tooltip plugin" />
		<meta content = "width=800, initial-scale=1"
		name = "viewport" />
<script src = "https://code.jquery.com/jquery-3.5.1.min.js">
		</script>		
		<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<link rel = "stylesheet" href =
"https://cdnjs.cloudflare.com/ajax/libs/tippy.js/0.3.0/tippy.css"/>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/tippy.js/0.3.0/tippy.js"> </script>
<style>
h2 {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
  text-align: center;
}
html, body {
text-align: center;
  height: 100%;
  background: #2c3e50;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
}
body {
  justify-content: space-around;
  align-items: centre;
  align-content: center;
}
h1 {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
  text-align: center;
}
.tooltip {
width: 600px;
margin: 120px auto;
}
.btn {
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
    appearance: none;
  background-color: transparent;
  border: 2px solid #e74c3c;
  border-radius: 0.6em;
  color: #e74c3c;
  cursor: pointer;
  display: flex;
  align-self: center;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  margin: 20px;
  padding: 1.2em 2.8em;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
}
.btn:hover {
  color: #fff;
  outline: 0;
}
.btn:focus {
  color: #fff;
  outline: 0;
}
</style>
<body>
<h1> Example </h1>
<h2> jQuery jTippy Tooltip Plugin </h2>
<div class = "tooltip">
    	<button id = "t1" class = "btn tippy" title = "a cute tooltip!"> hover here </button>
    	<button id = "t2" class = "btn tippy" title = "a cute tooltip!"> hover here </button>
   	<button id = "t3" class = "btn tippy" title = "a cute tooltip!"> hover here </button>   	
    </div>
<script>
new Tippy('#t1',{
    		position:'bottom',
    		animation:'scale',
    		arrow:'true'
    	});
    	new Tippy('#t2',{
    		position:'top',
    		animation:'perspective',
            interactive:'true'
    	});
    	new Tippy('#t3',{
    		position:'bottom',
    		animation:'scale',
    		arrow:'true',
    		theme:'light'
    	});
    	new Tippy('#t4',{
    		position:'bottom',
    		animation:'scale',
    		arrow:'true',
    		trigger:'click'
    	});
</script>
</body>
</html>

Explanation:

In the above example, we created an example of the jquery jtippy tooltip plugin.

Output:

Following is the output of this example.

Example 2:

<! DOCTYPE html>
<html>
	<head>
		<meta http-equiv = "Content-Type"
			content = "text/html; charset=UTF-8" />
		<title> Example of jQuery jTippy Tooltip Plugin </title>
		<meta name = "description" content = "jQuery tooltip plugin" />
	<meta content = "width=800, initial-scale=1" name = "viewport" />
<script src = "https://code.jquery.com/jquery-3.5.1.min.js">
		</script>	
<script src =
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"> </script>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css"> 
		<script src = "https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"/> </script>
		<script src = "https://unpkg.com/tippy.js@2.3.0/dist/tippy.all.min.js"> </script>
		<link rel = "stylesheet" href =
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css"/>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/tippy.js/0.3.0/tippy.js"> </script>
<style>
h2 {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
  text-align: center;
}
html, body {
text-align: center;
  height: 100%;
  background: #2c3e50;
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
}
body {
  justify-content: space-around;
  align-items: center;
  align-content: center;
}
h1 {
  margin-top: 40px;
  text-transform: none;
  font-size: 1.75em;
  font-weight: bold;
   font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
  color: #999; 
  letter-spacing: -0.005em; 
  word-spacing: 1px;
  letter-spacing: none;
  text-align: center;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-size: 14px;
  background: #f1f3f4;
  height: 10000px
}
.filter-container {
  max-width: 280px;
  margin: 50px auto;
  background: #fff;
  border-radius: 6px;
}
.filter-section {
    padding: 20px;
}
.filter-section + .filter-section {
  border-top: 1px solid #f1f3f4;
}
.slider-wrapper {
  margin: 60px auto 0;
  padding: 0 8px;
}
.store-slider.ui-slider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
}
.store-slider .ui-slider-range {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(233, 236, 239);
}
.store-slider .ui-slider-handle {
    top: auto;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    margin: 0;
    margin-left: -10px;
    border-radius: 50%;
    border: none;
    background: #fff;
    box-shadow: 
        inset 0 0 0 transparent,
        0 0 2px rgba(103, 118, 125, 1), 
        0 4px 10px rgba(91, 111, 144, 0.3);
    cursor: pointer;
}
.store-slider .ui-slider-handle:hover {
    background: #89cd20;
    box-shadow: 
        inset 0 0 0 1px #75b316,
        0 0 2px rgba(103, 118, 125, 0.5), 
        0 4px 10px rgba(91, 111, 144, 0.3);
}
.store-slider .ui-slider-handle.ui-state-hover {
    background: #89cd20;
    box-shadow: 
        inset 0 0 0 1px #75b316,
        0 0 2px rgba(103, 118, 125, 0.5), 
        0 4px 10px rgba(91, 111, 144, 0.3);
}
.store-slider.ui-widget.ui-widget-content {
    border: 1px solid rgb(206, 212, 218);
}
.ui-slider-handle:hover {
    outline: none;
}
.ui-slider-handle:active {
    outline: none;
}
.ui-slider-handle:focus {
    outline: none;
}
.ui-slider-handle:active {
    background: #89cd20;
    border-color: #75b316;
}
.tippy-content {
  font-size: 13px;
}
.row.filter-row {
  margin-top: 15px;
  margin-left: -7px;
  margin-right: -8px;
}
.row.filter-row [class*="col-"] {
  padding-left: 7px;
  padding-right: 8px;
}
</style>
<body>
<h1> Example </h1>
<h2> jQuery jTippy Tooltip Plugin with range slider </h2>
<div class = "filter-container">
  <div class = "filter-section">
    <div class = "h5"> Price </div>
    <div class = "slider-wrapper">
      <div id = "slider" class = "store-slider"> </div>
    </div>
    <div class = "row filter-row">
      <div class = "col-6">
        <div class = "input-group">
          <div class = "input-group-prepend">
            <div class = "input-group-text"> 10000 </div>
          </div>
          <input type = "text" class = "form-control price-input" id = "price_from">
        </div>
      </div>
      <div class = "col-6">
        <div class = "input-group">
          <div class = "input-group-prepend">
            <div class = "input-group-text"> 100000000000000 </div>
          </div>
          <input type = "text" class = "form-control price-input" id = "price_to">
        </div>
      </div>
    </div>
  </div>
<script>
var currentValue = {
  from: 1106,
  to: 10000
}
var slider = $('#slider').slider({
	range: true,
	min: 0,
	max: 11850,
	values: [ currentValue.from, currentValue.to ],
	create: function(event, ui) {		
		var $slider = $(this);
    var $sliderWrapper = $slider.closest('.store-slider-wrapper');
    var $sliderHandlers = $slider.find('.ui-slider-handle');
    var $sliderHandlersMin = $sliderHandlers.eq(0);
    var $sliderHandlersMax = $sliderHandlers.eq(1);
    var $sliderRange = $slider.find('.ui-slider-range');
    var values = {
      from: currentValue.from,
      to: currentValue.to
    }
    $sliderHandlersMin.attr('title', '?? ' + values.from + ' ???');
    $sliderHandlersMax.attr('title', '?? ' + values.to + ' ???');
    $sliderRange
      .attr('title', values.from + ' - ' + values.to + ' ???')
      .attr('data-tippy-distance', 15);
    var tippyOptions = {
      trigger: 'manual',
      sticky: true,
      dynamicTitle: true,
      hideOnClick: false,
      arrow: true,
      arrowType: 'round',
      animation: 'fade',
      placement: 'top',
      livePlacement: false,
      flipBehavior: [],
      createPopperInstanceOnInit: true,
      appendTo: $(this).closest('.filter-section')[0],
      popperOptions: {
         modifiers: {
           computeStyle: {
             gpuAcceleration: true
           }
        },
      }
    };
    tippy($sliderHandlersMin[0], tippyOptions);
    tippy($sliderHandlersMax[0], tippyOptions);
    tippy($sliderRange[0], tippyOptions);
    updateSliderTooltip($slider, values);
  },
  slide: function(event, ui) {
    var $slider = $(this);
    var $sliderWrapper = $slider.closest('.store-slider-wrapper'); 
    var values = {
      from: ui.values[0],
      to: ui.values[1]
    }
    updateSliderTooltip($slider, values, true);
  }
});
function updateSliderTooltip($slider, values, updateInput) {
  if (typeof updateInput === "undefined")
    var updateInput = true;
  var $sliderWrapper = $slider.closest('.store-slider-wrapper');
  var $sliderHandlers = $slider.find('.ui-slider-handle');
  var $sliderHandlersMin = $sliderHandlers.eq(0);
  var $sliderHandlersMax = $sliderHandlers.eq(1);
  var $sliderRange = $slider.find('.ui-slider-range');  
  $sliderHandlersMin.attr('title', '?? ' + values.from + ' ???');
  $sliderHandlersMax.attr('title', '?? ' + values.to + ' ???');
  $sliderRange.attr('title', '?? ' + values.from + ' ? ?? ' + values.to + ' ???');
  if (updateInput) {
    $('#price_from').val(values.from);
    $('#price_to').val(values.to);
  }
  setInterval(function() {
    var tooltipMinLeft = getCoords($sliderHandlersMin[0]).left;
    var tooltipMaxLeft = getCoords($sliderHandlersMax[0]).left;
    var tooltipRange = tooltipMaxLeft - tooltipMinLeft;
    var singleTooltip = tooltipRange < 80;
    if (!singleTooltip) {
      if (!$sliderHandlersMin[0]._tippy.state.visible)
        $sliderHandlersMin[0]._tippy.show(0);
      if (!$sliderHandlersMax[0]._tippy.state.visible)
        $sliderHandlersMax[0]._tippy.show(0);
      if ($sliderRange[0]._tippy.state.visible)
        $sliderRange[0]._tippy.hide(0);
    } else {
      if ($sliderHandlersMin[0]._tippy.state.visible)
        $sliderHandlersMin[0]._tippy.hide(0);
      if ($sliderHandlersMax[0]._tippy.state.visible)
        $sliderHandlersMax[0]._tippy.hide(0);
      if (!$sliderRange[0]._tippy.state.visible)
        $sliderRange[0]._tippy.show(0);
    }
  }, 1);
}
function updateValues() {
  var from = $('#price_from').val();
  var to = $('#price_to').val();
  updateSliderTooltip(slider, {
    from: from,
    to: to
  }, false);
  slider.slider({
    values: [ from, to ]
  });
}
$('#price_from').on('blur', function() {
  $(this).val($(this).val().replace(/[^0-9]/i, ''));
  if(+$(this).val() > +$('#price_to').val()) {
    $(this).val($('#price_to').val())
  }
  updateValues();
});
$('#price_to').on('blur', function() {
  $(this).val($(this).val().replace(/[^0-9]/gi, ''));
  if(+$(this).val() < +$('#price_from').val()) {
    $(this).val($('#price_from').val())
  }
  updateValues();
});
function getCoords(elem) {
	var box = elem.getBoundingClientRect();
	var body = document.body;
	var docEl = document.documentElement;
	var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
	var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
	var clientTop = docEl.clientTop || body.clientTop || 0;
	var clientLeft = docEl.clientLeft || body.clientLeft || 0;
	var top  = box.top +  scrollTop - clientTop;
	var left = box.left + scrollLeft - clientLeft;
	return { top: Math.round(top), left: Math.round(left) };
}
</script>
</body>
</html>

Explanation:

In the above example, we created an example of a jquery jtippy tooltip plugin with a range slider.

Output:

Following is the output of this example.