Home > Web Front-end > JS Tutorial > body text

jQuery plug-in Tooltipster implements beautiful tool tips_jquery

WBOY
Release: 2016-05-16 16:04:47
Original
1634 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:


This div has a tooltip when you hover over it!

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.

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template