search

Home >Web Front-end >JS Tutorial >jQuery plug-in Tooltipster implements beautiful tool tips_jquery

jQuery plug-in Tooltipster implements beautiful tool tips_jquery

WBOY
WBOYOriginal
2016-05-16 16:04:471639browse

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>

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:

85fca4d5ad20f653260c12c2a18eb25a

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

Copy code The code is as follows:

733a4e9c5961cb68f832ba298ebefbdcLink5db79b134e9f6b82c0b36e0489ee08ed

Add tooltip to a div:

Copy code The code is as follows:

c6975de75410d83917186e3d9cb3a9c2
This div has a tooltip when you hover over it!
16b28748ea4df4d9c2150843fecfba68

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 9c3bca370b5104690d9ef395f2c5f8d1 tag (use whatever option you want - in this case, we are using the .tooltip class): 

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

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.

Statement：
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
Previous article：Introduction to basic packaging types of javascript_javascript skillsNext article：Introduction to basic packaging types of javascript_javascript skills

Related articles

See more