Home > Web Front-end > JS Tutorial > qTip Tooltip plug-in based on JQuery [good compatibility]_jquery

qTip Tooltip plug-in based on JQuery [good compatibility]_jquery

WBOY
Release: 2016-05-16 18:20:40
Original
1121 people have browsed it
qTip Tooltip plug-in based on JQuery [good compatibility]_jquery
Homepage:http://craigsworks.com/projects/qtip/

Download:http://craigsworks.com/projects/qtip/download

Example:http://craigsworks.com/projects/qtip/

qTip is a Tooltip plug-in based on JQuery. It supports almost all major browsers
For example:

Internet Explorer 6.0
Firefox 2.0
Opera 9.0
Safari 3.0
Google Chrome 1.0
Konqueror 3.5

Using qTip, you can easily define the position and style of tip. At the same time, qTip also has a powerful API...

Before using qTip, you only need to import two JS files. :

Copy code The code is as follows:




Here are a few simple examples.

1. Basic text

html is as follows:
Copy code The code is as follows:

JS code:
Copy code The code is as follows:



2. Title attribute

html is as follows Display:
Copy code The code is as follows:

JS code:
Copy code The code is as follows:



3. qTip Tooltip plug-in based on JQuery [good compatibility]_jquery

html As shown below:
Copy code The code is as follows:

JS code:
Copy code The code is as follows:



4. Corner values ​​

html is as follows:
Copy code The code is as follows:

JS code:
Copy code The code is as follows:



5. Fixed tooltips

html is as follows:
Copy the code The code is as follows:





JS code:

Copy code The code is as follows:



css code:

Copy code The code is as follows:



6. Loading html

html is as follows:

Html code
Copy code The code is as follows:

JS code:

Copy code The code is as follows:



7. Modal tooltips

html is as follows:

Html code
Copy code The code is as follows:

JS code:
Copy code The code is as follows:


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