Of Stack

The jQuery plug in Tooltipster implements beautiful tooltips

  • 2020-05-27 04:19:38
  • OfStack

Tooltipster is a lightweight jQuery tooltip plugin that helps you quickly generate beautiful tooltips.

1. Load the jQuery and the plug-in files including Tooltipster

In your download Tooltipster, mobile tooltipster css and jquery tooltipster. min. js CSS and JavaScript directory to the root. Next, load jQuery and include Tooltipster CSS and JavaScript files in your tag: 


<head> 
... 
 
  <link rel="stylesheet" type="text/css" href="css/tooltipster.css" /> 
 
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.0.min.js"></script> 
  <script type="text/javascript" src="js/jquery.tooltipster.min.js"></script> 
 
... 
</head>

2. Set your HTML

In order for Tooltipster to work, we first need to add any elements of the.tooltip class (or any category/selection means you want to use) and we want to have a tooltip. Next, we'll set the title property, whatever we want our prompt to say. Here are some examples:
Add tooltip image: 



<img src="my-image.png" class="tooltip" title="This is my image's tooltip message!" />

Add tooltip already has a link to 1 class: 



<a href="http://calebjacob.com" class="ketchup tooltip" title="This is my link's tooltip message!">Link</a> 

Add a tooltip for 1 div: 



<div class="tooltip" title="This is my div's tooltip message!">  

    This div has a tooltip when you hover over it! 

</div>

3. Activate Tooltipster

The last thing we need to do is activate the plug-in. To do this 1 point, your end < / head > Before adding the following script label (use any selection you want - in this case, we are using the.tooltip class) : 


<head> 
  ... 
  <script> 
    $(document).ready(function() { 
      $('.tooltip').tooltipster(); 
    }); 
  </script> 
</head>

Conclusion:

1. Tooltips support HTML tag content

2. Lightweight

3. Be flexible and efficient

4. Simple style definition, 100% CSS

5. Support three themes

6. Support firefox, Chrome, IE7/8/9, Opera, Safari

That's all for this article, I hope you enjoy it.

Related articles: