jQuery 基础教程jQuery 简介jQuery 安装jQuery 语法jQuery 选择器jQuery 事件jQuery 隐藏和显示jQuery 效果 -淡入淡出jQuery 效果 -滑动jQuery 效果 animate() 方法jQuery 停止动画 stop() 方法jQuery 动画 callback 回调方法jQuery 方法链 ( chaining )jQuery 获取HTML元素的内容属性jQuery 设置HTML元素的内容属性jQuery - 添加元素jQuery - 删除元素jQuery - 获取并设置 CSS 类jQuery css() 方法jQuery 尺寸jQuery 遍历jQuery 遍历 祖先元素jQuery 遍历 后代jQuery 遍历 - 同胞 ( siblings )jQuery 遍历-过滤jQuery AJAX 简介jQuery AJAX load() 方法jQuery AJAX get() 和 post() 方法jQuery - noConflict() 方法jQuery Validate 验证插件jQuery UI Accordion 折叠菜单jQuery UI Autocomplete 插件jQuery Growl 消息提醒jQuery Password ValidationjQuery Prettydate 友好日期插件jQuery TooltipjQuery 树型菜单插件(Treeview)
jQuery Tooltip
我们可以通过调整它们的内容、位置和外观实现自定义
插件下载地址
https://github.com/iamceege/tooltipster/releases
引入 css 样式表
<link rel="stylesheet" href="/static/lib/jquery/tooltip/css/tooltipster.bundle.min.css" />
引入 JavaScript 脚本
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<script src="/static/lib/jquery/tooltip/js/tooltipster.bundle.min.js"></script>
html 代码
<img src="/static/i/jquery/geometry.jpg" class="tooltip" title="This is my image's tooltip message!" />
<span class="tooltip" title="This is my span's tooltip message!">Some text</span>
JavaScript 代码
$(document).ready(function() {
$('.tooltip').tooltipster();
});