jQuery自定义工具提示插件DarkTooltip

所属分类:UI-工具提示

 42723  361  查看评论 (6)
分享到微信朋友圈
X
jQuery自定义工具提示插件DarkTooltip ie兼容8

用法

<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"/>

相关插件-工具提示

Metro风格的jQuery个性化消息提示插件

介绍一款Metro风格的消息提示框插件,插件是基于jQuery的,不仅拥有Metro哪种简单精巧的UI风格,而且兼容性也还不错。之前分享过一些基于jQuery和CSS3的提示框插件,比如HTML5CSS3弹出提示框,感兴趣的朋友也可以前往关注。
  工具提示
 30196  343

仿win10侧边滑出提示框

一款模拟win10的消息提示框toastr
  工具提示
 29454  376

jq 提示插件

封装 jq 提示插件 Confirm ,兼容ie811chrome ff
  工具提示
 48042  407

超漂亮的placeholders提示

超漂亮的placeholders提示
  工具提示
 33279  394

讨论这个项目(6)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    左左大王?? 0
    2018/10/8 14:33:04
    请问怎么改变提示框的位置呢 回复
    ww201314 0
    2015/12/9 15:12:07
    ww201314 0
    2015/12/9 14:12:18

    这个注解content Tooltip message 工具提示消息 空  怎么用看不懂 有人会吗 求教

    回复
    time。 0
    2015/3/12 16:49:56
    很好用。
        金晏平0
        2017/6/16 15:04:08

        怎么实现换行

    回复
    沵哋洊、茬。 0
    2015/1/5 14:14:52
    这个只支持DIV么 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复