jQuery自定义工具提示插件DarkTooltip

所属分类:UI-工具提示

 42126  360  查看评论 (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"/>

相关插件-工具提示

jquery 工具提示插件awTooltip

awTooltip是一个工具提示插件,用css和jQuery插件创建的。 它可以显示工具提示右,左,顶部或底部的元素。 也可以使用彩色工具提示样式。
  工具提示
 31529  310

jq 提示插件

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

超漂亮的placeholders提示

超漂亮的placeholders提示
  工具提示
 32496  393

仿win10侧边滑出提示框

一款模拟win10的消息提示框toastr
  工具提示
 28402  375

讨论这个项目(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么 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复