jQuery消息提示插件tooltip.js

来源:https://www.sucaihuo.com/js/2780.html 2017-08-19 18:07浏览(1572) 收藏

一款jQuery消息提示插件tooltip.js,鼠标悬停在设置好的文字上时,会有一个消息提示框弹出,并显示预设的文字内容,鼠标离开时消息提示框则自动消息,消息提示的样式有黑色和白色两种,当然,可以自由扩展的。
jQuery消息提示插件tooltip.js
分类:文字特效 > 提示文字 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的head部分,需远程调用bootstrap.min.css文件和两个必要的CSS文件,代码如下:

<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/tooltip.css">
<style type="text/css">
	span.demo { border-bottom: 2px dotted; cursor: pointer; color: #E37274; }
</style>

页面的body部分,设置好div容器里的文本段落,代码如下:

<div class="container">
	<h1>jQuery消息提示插件tooltip.js</h1>
	<h3>基本使用</h3>
	<p>那一页薄纸,几字落下,才知道,流年似水,太过匆匆,一些故事来不及真正的开始,犹如一部戏并未进入最精彩的情节,便已成了昨天,你我都成了记忆里的旧光影,皆是过客。<span id="demo-1" class="demo">莫问前路几何</span>,曲起生歌,婉转悠扬。只是,不再是一张如花的笑脸。</p>
	<p>也许有一天,所有的不解,所有的迷茫,所有的不安,都将如天上的云朵,一尘不染,轻轻飘向梦的深处,留下一缕香,嫣然岁月的模样。你依然站在皎洁的月光下,打开那壶陈年的酒,慢慢品尝,醉过方知酒浓,情深方知意重。</p>
	<p>习惯在寂静的晚上,登高望远,看着万家灯火,数一数那些窗,今晚,又会有多少悲欢离合重复上演,温柔的伤感。你说,若有缘,千里终会来相会,携手红尘,若无缘,近在咫尺不相逢,终将是陌路。</p>
	<hr>
	<h3>带参数</h3>
	<p>那一页薄纸,几字落下,才知道,流年似水,太过匆匆,一些故事来不及真正的开始,犹如一部戏并未进入最精彩的情节,便已成了昨天,你我都成了记忆里的旧光影,皆是过客。<span id="demo-2" class="demo">莫问前路几何</span>,曲起生歌,婉转悠扬。只是,不再是一张如花的笑脸。</p>
	<p>也许有一天,所有的不解,所有的迷茫,所有的不安,都将如天上的云朵,一尘不染,轻轻飘向梦的深处,留下一缕香,嫣然岁月的模样。你依然站在皎洁的月光下,打开那壶陈年的酒,慢慢品尝,醉过方知酒浓,情深方知意重。</p>
	<p>习惯在寂静的晚上,登高望远,看着万家灯火,数一数那些窗,今晚,又会有多少悲欢离合重复上演,温柔的伤感。你说,若有缘,千里终会来相会,携手红尘,若无缘,近在咫尺不相逢,终将是陌路。</p>
</div>

页面的底部,需引入jQuery库、tooltip插件,并设置好相应参数,代码如下:

<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/tooltip.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('#demo-1').tooltip({text: '这是一个Tooltip!'});
  $('#demo-2').tooltip({text: '这是一个Tooltip!',fontSize: '14px',
    theme: 'light',
    fontFamily: "'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif",
    delay: 400});
});
</script>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2