jQuery plug-in Tooltipster implements beautiful tool tips

jQuery plug-in Tooltipster implements beautiful tool tips_jquery

WBOY

Release： 2016-05-16 16:04:47

Original

1669 people have browsed it

Tooltipster is a lightweight jQuery tooltip plug-in that can quickly help you generate beautiful tooltips.

1. Load jQuery and plug-in files including Tooltipster

After you download Tooltipster, move tooltipster.css and jquery.tooltipster.min.js to the root of the CSS and JavaScript directories. Next, load jQuery and include the Tooltipster CSS and JavaScript files inside your tags:

<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>

Copy after login

2. Set up your HTML

In order for Tooltipster to work, we first need to add the .tooltip class (or whatever category/select means you want to use) to any element we want to have a tooltip. Next, we'll set the title attribute to whatever we want our prompt to say. Here are some examples:
Image to add tooltip:

Copy code The code is as follows:

Add a link to a tooltip that already has a class:

Copy code The code is as follows:

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

Add tooltip to a div:

Copy code The code is as follows:

3, activate Tooltipster

The last thing we need to do is activate the plugin. To do this, add the following script just before your closing tag (use whatever option you want - in this case, we are using the .tooltip class):

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

Copy after login

Summary:

1. Tool tips support HTML tag content

2.Lightweight

3. Flexible and efficient

4. Simple style definition, 100% CSS

5. Supports 3 themes

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

The above is the entire content of this article, I hope you all like it.