gips - Beautiful and Clean Tooltip Plugin

File Size: 20.4 KB
Views Total: 2320
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
gips - Beautiful and Clean Tooltip Plugin

gips is a Beautiful and Clean Jquery Plugin for tooltips, which can be embedded in any web design.

It is simple, customizable, and easy to use. It also supports CSS themes.

How to use it:

1. Load jQuery and the gips plugin's files in the html document.

<link href="css/gips.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="js/gips.js"></script>

2. Attach the tooltip to a specific element and define your own content to be displayed in the tooltip popup on hover.

$('Selector').gips({ 
  text: 'I am a default tooltip' 
});

3. Change the default theme of the tooltip.

$('Selector').gips({ 

  // 'green', 'yellow', 'red'
  'theme': 'purple',
  text: 'I am a default tooltip' 
  
});

4. Display a custom close icon inside the tooltip.

$('Selector').gips({ 

  imagePath: '/path/to/close.png',
  text: 'I am a default tooltip' 

});

5. Make the tooltip auto dismiss when the mouse pointer moves out of the element.

$('Selector').gips({ 

  autoHide: true, // default: false
  text: 'I am a default tooltip' 

});

6. Set the placement of the tooltip.

$('Selector').gips({ 

  // 'left', 'right', 'bottom'
  placement: 'top',
  text: 'I am a default tooltip' 

});

7. Config the show/hide animation.

$('Selector').gips({ 

  delay: 500, 
  pause: 5000, 
  animationSpeed: 500,
  text: 'I am a default tooltip' 

});

Changelog:

2018-06-13


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