##Zebra_Tooltips
####A lightweight and highly configurable jQuery plugin for creating simple but smart and attractive tooltips
Zebra_Tooltips is a lightweight (around 5KB minified, 1.6KB gzipped) jQuery plugin for creating simple but smart and visually attractive tooltips, featuring nice transitions, and offering a wide range of configuration options. The plugin detects the edges of the browser window and makes sure that the tooltips always stay in the visible area of the browser window by placing them beneath or above the parent element, and shifting them left or right so that the tooltips are always visible.
Besides the default behavior of tooltips showing when user hovers the element, tooltips may also be shown and hidden programmatically using the API. When shown programmatically, the tooltips will feature a "close" button, and clicking it will be the only way of closing tooltips opened this way. This is very useful for drawing users' attention to specific areas of a website (like error messages after validating a form).
By default, the plugin will use the "title" attribute of the element for the tooltip's content, but the tooltip's content can also be specified via the "zebra-tooltip" data attribute, or programmatically. Tooltips' appearance can be easily customized both through JavaScript and/or CSS. Also, tooltips can be aligned left, center or right, relative to the parent element.
Zebra_Tooltips uses NO IMAGES (everything is handled from CSS), and falls back gracefully for browsers that don't support all the fancy stuff; also, tooltips can be attached to any element not just anchor tags!
Works in all major browsers (Firefox, Opera, Safari, Chrome, Internet Explorer 6+)
![Screenshot](https://raw.github.com/stefangabos/Zebra_Tooltips/master/examples/screenshot.png)
##Features
- lightweight (around 5KB minified, 1.6KB gzipped)
- features nice transitions
- detects the edges of the browser window and makes sure that the tooltips always stay in the visible area of the browser window by placing them beneath or above the elements and shifting them left or right so that the tooltips are always visible
- tooltips may also be shown and hidden using the API
- appearance can be easily customized both through JavaScript and/or CSS
- tooltips can be aligned left, center or right, relative to the parent element
- makes use of NO IMAGES (everything is handled from CSS), and falls back gracefully for browsers that don't support all the fancy stuff
- can be attached to any elements not just anchors
- works in all major browsers (Firefox, Opera, Safari, Chrome, Internet Explorer 6+)
##Requirements
Zebra_Tooltips has no dependencies other than jQuery. The recommended jQuery version is 1.7+ (due to the fact that the library makes use of something that the previous versions of jQuery have done in a way that it it now deprecated in WebKit powered browsers)
##How to use
First, load the latest version of jQuery from a CDN and provide a fallback to a local source, like:
```html
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="path/to/jquery-1.10.2.js"><\/script>')</script>
```
Load the Zebra_Tooltips plugin
```html
<script type="text/javascript" src="path/to/zebra_tooltips.js"></script>
```
Load the plugin’s stylesheet file
```html
<link rel="stylesheet" href="path/to/zebra_tooltips.css" type="text/css">
```
Now, within the DOM-ready event do
```javascript
$(document).ready(function() {
// show tooltips for any element that has a class named "tooltips"
// the content of the tooltip will be taken from the element's "title" attribute
new $.Zebra_Tooltips($('.tooltips'));
});
```
Configuration options and demos on the **[project's homepage](http://stefangabos.ro/jquery/zebra-tooltips/)**
没有合适的资源?快使用搜索试试~ 我知道了~
jQuery工具提示插件zebra_tooltips
共32个文件
html:12个
js:9个
css:4个
4星 · 超过85%的资源 需积分: 10 31 下载量 67 浏览量
2014-03-31
13:12:18
上传
评论
收藏 101KB ZIP 举报
温馨提示
zebra_tooltips用于创建简单而聪明工具提示插件,特点轻量级、高度可配置。演示地址:http://www.jq22.com/jquery-info370
资源推荐
资源详情
资源评论
收起资源包目录
jq22.com-Zebra_Tooltips-master.zip (32个子文件)
www.jq22.com.txt 111B
README.md 4KB
public
css
zebra_tooltips.css 2KB
index.html 116B
javascript
zebra_tooltips.js 6KB
zebra_tooltips.src.js 40KB
index.html 116B
index.html 116B
examples
libraries
syntaxhighlighter
public
css
shCoreDefault.css 8KB
index.html 119B
javascript
shBrushCss.js 6KB
shBrushJScript.js 2KB
shBrushXml.js 2KB
XRegExp.js 28KB
index.html 119B
shCore.js 42KB
index.html 119B
MIT-LICENSE 1KB
LGPL-LICENSE 7KB
index.html 119B
index.html 119B
public
css
reset.css 3KB
index.html 119B
style.css 1KB
javascript
jquery-1.10.2.js 91KB
main.js 535B
index.html 119B
index.html 119B
screenshot.png 16KB
index.html 9KB
jquery插件库.url 119B
zebra-tooltips.jquery.json 1001B
共 32 条
- 1
资源评论
- lan0316872015-12-03效果还可以
jquery插件库-jq22com
- 粉丝: 14
- 资源: 301
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功