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

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

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

jQuery plug-in Tooltipster implements beautiful tool tips_jquery