<html> <link rel="stylesheet" href="darktooltip.css"> <script src="jquery-1.10.2.min.js"></script> <script src="jquery.darktooltip.js"></script> <div style="padding:200px;"> <a href="#" id="example" data-tooltip="Hello world 1">Example 1</a> <a href="#" id="light" data-tooltip="Hello world 2">Example 2</a> </div> </html>
js
<script>
$(document).ready( function(){
//Basic
$('#example').darkTooltip();
//With some options
$('#light').darkTooltip({
animation:'flipIn',
gravity:'west',
confirm:true,
theme:'light',
trigger:'click'
});
});
</script>选项
opacity 透明度 0-1 0.9
content Tooltip message 工具提示消息 空
size small, medium, large 小型、 中型、 大型 介质
gravity south, west, north, east 重力 南、 西、 北、 东 南
theme 主题 dark, light 暗,光 黑暗
trigger 触发器 hover, click 将鼠标悬停,请单击 悬停
animation 动画 无,flipIn,fadeIn false
confirm 确认 为 true,false false
yes 是 标签为 Yes 选项的 ' 是 '
no '没有' 选项标签 否
finalMessage 在确认的操作结束时显示的消息 ''
截图
title="未标题-2.gif"/>
title="未标题-3.gif"/>