Customizable Hover Tooltips With jQuery - Tooltip.js

Customizable Hover Tooltips With jQuery - Tooltip.js

A super small (~1kb minified) jQuery plugin used to create and display highly customizable, CSS3 animated tooltips over any elements on mouse hover.

1. Load the tooltip.css in the header that provides the basic CSS styles for your tooltips.

<link rel="stylesheet" href="tooltip.css">

2. Load jQuery JavaScript library and the tooltip.js at the bottom of your html page.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="tooltip.js"></script>

3. Define your own tooltip content in the title attribute of the element.

<h1 title="Tooltip here">Hover me</h1>

4. Initialize the plugin to create a default tooltip.

$('h1').tooltip();

5. Change the default CSS styles of the tooltip.

$('h1').tooltip({
  backgroundColor:'#111',
  display:'block',
  position:'absolute',
  left:0,
  bottom:'110%',
  padding:'10px',
  borderRadius:'5px',
  color:'#fff',
  lineHeight:'normal',
  textTransform:'none',
  fontFamily:'Verdana',
  fontSize:'12px',
  opacity:0,
  textAlign:'center',
});

5. Apply your own CSS animations to the tooltips.

$('h1').tooltip({
  transform:'scaleY(0)',
  transition:'all 0.5s ease',
});

This awesome jQuery plugin is developed by pkellz. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 28.11.2017
  • Source