tooltip 鼠标移动上去出现图片或文字与title大同小异

代码如下:

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.qtip-1.0.0-rc3.min.js"></script>

下面举几个比较简单的例子。

1、Basic text

html如下所示：

代码如下:

<div id="content">
<a href=" ">Basic text</a>
</div>

JS代码：

复制代码 代码如下:

<script type="text/javascript">
$(document).ready(function()
{
$(‘#content a[href]‘).qtip(
{
content: ‘Some basic content for the tooltip‘
});
});
</script>

效果如图所示：

2、Title attribute

html如下所示：

代码如下:

<div id="content">
<a href=" " title="That sounds familiar...">Title attribute</a>
</div>

JS代码：

代码如下:

<script type="text/javascript">
$(document).ready(function()
{
$(‘#content a[href][title]‘).qtip({
content: {
text: false
},
style: ‘cream‘
});
});
</script>

效果如图所示：

3、Image

html如下所示：

代码如下:

<div id="content">
<a href=" ">Image</a>
</div>

JS代码：

代码如下:

<script type="text/javascript">
$(document).ready(function()
{
$(‘#content a[href]‘).qtip({
content: ‘<img src="small.png" alt="Image" />‘
});
});
</script>

效果如图所示：

4、Corner values

html如下所示：

代码如下:

<div id="content" style="margin-top:200px;margin-left:200px;">
<a href=" ">Corner values</a>
</div>

JS代码：

代码如下:

<script type="text/javascript">
var corners = ‘bottomLeft‘;
var opposites = ‘topRight‘;
$(document).ready(function()
{
$(‘#content a‘)
.hover(function()
{
$(this).html(opposites)
.qtip({
content: corners,
position: {
corner: {
tooltip: corners,
target: opposites
}
},
show: {
when: false,
ready: true
},
hide: false,
style: {
border: {
width: 5,
radius: 10
},
padding: 10,
textAlign: ‘center‘,
tip: true,
name: ‘cream‘
}
});
});
});
</script>

效果如图所示：

5、Fixed tooltips

html如下所示：

代码如下:

<div id="content">
<img src="sample.jpg" height="200" />
</div>

JS代码：

代码如下:

<script type="text/javascript">
$(document).ready(function()
{
$(‘#content img‘).each(function()
{
$(this).qtip(
{
content: ‘<a href=" ">Edit</a> | <a href=" ">Delete</a>‘,
position: ‘topRight‘,
hide: {
fixed: true
},
style: {
padding: ‘5px 15px‘,
name: ‘cream‘
}
});
});
});
</script>

css代码：

代码如下:

<style type="text/css">
#content img{
float: left;
margin-right: 35px;
border: 2px solid #454545;
padding: 1px;
}
</style>

效果如图所示：

6、Loading html

html如下所示：

代码如下:

<div id="content">
<a href="#" rel="sample.html">Click me</a>
</div>

JS代码：

代码如下:

Js代码
<script type="text/javascript">
$(document).ready(function()
{
$(‘#content a[rel]‘).each(function()
{
$(this).qtip(
{
content: {
url: $(this).attr(‘rel‘),
title: {
text: ‘Wiki - ‘ + $(this).text(),
button: ‘Close‘
}
},
position: {
corner: {
target: ‘bottomMiddle‘,
tooltip: ‘topMiddle‘
},
adjust: {
screen: true
}
},
show: {
when: ‘click‘,
solo: true
},
hide: ‘unfocus‘,
style: {
tip: true,
border: {
width: 0,
radius: 4
},
name: ‘light‘,
width: 570
}
})
});
});
</script>

效果如图所示：

7、Modal tooltips
html如下所示：

代码如下:

<div id="content">
<a href="#" rel="modal">Click here</a>
</div>

JS代码：

代码如下:

<script type="text/javascript">
$(document).ready(function()
{
$(‘a[rel="modal"]:first‘).qtip(
{
content: {
title: {
text: ‘Modal tooltips sample‘,
button: ‘Close‘
},
text: ‘hello world‘
},
position: {
target: $(document.body),
corner: ‘center‘
},
show: {
when: ‘click‘,
solo: true
},
hide: false,
style: {
width: { max: 350 },
padding: ‘14px‘,
border: {
width: 9,
radius: 9,
color: ‘#666666‘
},
name: ‘light‘
},
api: {
beforeShow: function()
{
$(‘#qtip-blanket‘).fadeIn(this.options.show.effect.length);
},
beforeHide: function()
{
$(‘#qtip-blanket‘).fadeOut(this.options.hide.effect.length);
}
}
});
$(‘<div id="qtip-blanket">‘)
.css({
position: ‘absolute‘,
top: $(document).scrollTop(),
left: 0,
height: $(document).height(),
width: ‘100%‘,
opacity: 0.7,
backgroundColor: ‘black‘,
zIndex: 5000
})
.appendTo(document.body)
.hide();
});
</script>

效果如图所示：

--------------------------------------------------------------------------------------------------------------------------------------

w3c实例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Tooltip 插件</title>

<link rel="stylesheet" href="http://jquery.bassistance.de/tooltip/jquery.tooltip.css" />
<link rel="stylesheet" href="http://jquery.bassistance.de/tooltip/demo/screen.css" />
<script src="http://jquery.bassistance.de/tooltip/lib/jquery.js" type="text/javascript"></script>
<script src="http://jquery.bassistance.de/tooltip/lib/jquery.bgiframe.js" type="text/javascript"></script>
<script src="http://jquery.bassistance.de/tooltip/lib/jquery.dimensions.js" type="text/javascript"></script>
<script src="http://jquery.bassistance.de/tooltip/jquery.tooltip.js" type="text/javascript"></script>

<script src="http://jquery.bassistance.de/tooltip/demo/chili-1.7.pack.js" type="text/javascript"></script>

<script type="text/javascript">
$(function() {
$(‘#set1 *‘).tooltip();

$("#foottip a").tooltip({
	bodyHandler: function() {
		return $($(this).attr("href")).html();
	},
	showURL: false
});

$(‘#tonus‘).tooltip({
	delay: 0,
	showURL: false,
	bodyHandler: function() {
		return $("<img/>").attr("src", this.src);
	}
});

$(‘#yahoo a‘).tooltip({
	track: true,
	delay: 0,
	showURL: false,
	showBody: " - ",
	fade: 250
});

$("select").tooltip({
	left: 25
});

$("map > area").tooltip({ positionLeft: true });

$("#fancy, #fancy2").tooltip({
	track: true,
	delay: 0,
	showURL: false,
	fixPNG: true,
	showBody: " - ",
	extraClass: "pretty fancy",
	top: -15,
	left: 5
});

$(‘#pretty‘).tooltip({
	track: true,
	delay: 0,
	showURL: false,
	showBody: " - ",
	extraClass: "pretty",
	fixPNG: true,
	left: -120
});

$(‘#right a‘).tooltip({
	track: true,
	delay: 0,
	showURL: false,
	extraClass: "right"
});
$(‘#right2 a‘).tooltip({ showURL: false, positionLeft: true });

$("#block").click($.tooltip.block);

});
</script>

</head>
<body>
<h1 id="banner">jQuery Tooltip 插件演示</h1>
<div id="main">
	<fieldset id="set1">
		<legend>三个带有默认设置的 Tooltip 的元素</legend>
		<a title="一个带有默认设置的 tooltip，href 显示在标题下" href="http://google.de">链接到谷歌</a>
		<br/>
		<label title="一个带有 title 和默认设置的标签，没有 href" for="text1">请输入一些字符！</label>
		<br/>
		<input title="请注意，当点击 input 元素时，tooltip 消失" type="text" value="测试" name="action" id="text1"/>

		<h3>代码</h3>
		<code class="mix">$(‘#set1 *‘).tooltip();</code>
	</fieldset>

	<fieldset id="foottip">
		<legend>使用 bodyHandler 来显示 tooltip 中的脚注</legend>
		一些指向 <a href="#footnote">脚注</a> 的文本。
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<div id="footnote"><em>这里</em>是一个实际的脚注，通过嵌套的 <strong>HTML</strong> 来完成。</div>

		<h3>代码</h3>
		<code class="mix">$("#foottip a").tooltip({
	bodyHandler: function() {
		return $($(this).attr("href")).html();
	},
	showURL: false
});</code>
	</fieldset>

	<fieldset>
		<legend>一个带有 tooltip 的图像</legend>
		<img id="tonus" src="http://jquery.bassistance.de/tooltip/demo/image.png" height="80" title="没有延迟。src 值显示在标题下" />
		<h3>代码</h3>
	<code class="mix">$(‘#tonus‘).tooltip({
	delay: 0,
	showURL: false,
	bodyHandler: function() {
		return $("&lt;img/&gt;").attr("src", this.src);
	}
});</code>
	</fieldset>

	<fieldset>
		<legend>锁定 tooltip</legend>
		<button id="block">点击按钮锁定/解锁所有的 tooltip</button>
		<h3>代码</h3>
		<code class="mix">$("#block").click($.tooltip.block);</code>
	</fieldset>

	<fieldset>
		<legend>下面四个链接没有延迟跟踪和渐变，带有额外的内容</legend>
		<div id="yahoo">
			<a title="Yahoo doo - more content" href="http://yahoo.com">链接到雅虎</a>
			<a title="Yahoo doo2 - wohooo" href="http://yahoo.com">链接到雅虎 1</a>
			<a title="Yahoo doo3" href="http://yahoo.com">链接到雅虎 2</a>
			<a title="Yahoo doo4 - buga!" href="http://yahoo.com">链接到雅虎 3</a>
		</div>
		<select><option>bgiframe test</option></select>
		<h3>代码</h3>
		<code class="mix">$(‘#yahoo a‘).tooltip({
	track: true,
	delay: 0,
	showURL: false,
	showBody: " - ",
	fade: 250
});</code>
	</fieldset>

	<fieldset>
		<legend>带有额外的 class 的 tooltip。用于在一个页面上显示不同的 tooltip 样式</legend>
		<em>请注意，当鼠标停留在右边视区边界时，右边的那个 tooltip 如何显示一个不同的背景图片。</em>
		<br/>
		<span id="fancy" title="注意 - 请注意，这里带有一些自定义的样式。">一个奇特的 tooltip，带有一些自定义的样式。</span>
		<span id="fancy2" title="注意 - 请注意，这里带有一些自定义的样式。">一个奇特的 tooltip，带有一些自定义的样式。</span>
		<p><span id="pretty" title="注意 - 请注意，这里带有更多自定义的样式。">一个奇特的 tooltip，带有阴影和一些额外的内容。</span></p>
		<br/>
		<br/>
		<br/>
		<select><option>bgiframe test</option></select>
		<h3>代码</h3>
		<code class="mix">$("#fancy, #fancy2").tooltip({
	track: true,
	delay: 0,
	showURL: false,
	opacity: 1,
	fixPNG: true,
	showBody: " - ",
	extraClass: "pretty fancy",
	top: -15,
	left: 5
});

$(‘#pretty‘).tooltip({
	track: true,
	delay: 0,
	showURL: false,
	showBody: " - ",
	extraClass: "pretty",
	fixPNG: true,
	opacity: 0.95,
	left: -120
});</code>
	</fieldset>

	<fieldset>
		<legend>下拉框</legend>
		<select title="带有 tooltip 的 select">
			<option>1. option</option>
			<option>2. option</option>
			<option>3. option</option>
		</select>
	</fieldset>

	<fieldset>
		<legend>带有 tooltip 的图像地图</legend>

		<img id="map" src="karte.png" width="345" height="312" border="0" usemap="#Landkarte">
		<map name="Landkarte">
		  <area shape="rect" coords="11,10,59,29"
		        href="http://www.koblenz.de/" alt="Koblenz" title="Koblenz">
		  <area shape="rect" coords="42,36,96,57"
		        href="http://www.wiesbaden.de/" alt="Wiesbaden" title="Wiesbaden">
		  <area shape="rect" coords="42,59,78,80"
		        href="http://www.mainz.de/" alt="Mainz" title="Mainz">
		  <area shape="rect" coords="100,26,152,58"
		        href="http://www.frankfurt.de/" alt="Frankfurt" title="Frankfurt">
		  <area shape="rect" coords="27,113,93,134"
		        href="http://www.mannheim.de/" alt="Mannheim" title="Mannheim">
		  <area shape="rect" coords="100,138,163,159"
		        href="http://www.heidelberg.de/" alt="Heidelberg" title="Heidelberg">
		  <area shape="rect" coords="207,77,266,101"
		        href="http://www.wuerzburg.de/" alt="W&uuml;rzburg" title="W&uuml;rzburg">
		  <area shape="rect" coords="282,62,344,85"
		        href="http://www.bamberg.de/" alt="Bamberg" title="Bamberg">
		  <area shape="rect" coords="255,132,316,150"
		        href="http://www.nuernberg.de/" alt="N&uuml;rnberg" title="N&uuml;rnberg">
		  <area shape="rect" coords="78,182,132,200"
		        href="http://www.karlsruhe.de/" alt="Karlsruhe" title="Karlsruhe">
		  <area shape="rect" coords="142,169,200,193"
		        href="http://www.heilbronn.de/" alt="Heilbronn" title="Heilbronn">
		  <area shape="rect" coords="140,209,198,230"
		        href="http://www.stuttgart.de/" alt="Stuttgart" title="Stuttgart">
		  <area shape="rect" coords="187,263,222,281"
		        href="http://www.ulm.de/" alt="Ulm" title="Ulm">
		  <area shape="rect" coords="249,278,304,297"
		        href="http://www.augsburg.de/" alt="Augsburg" title="Augsburg">
		  <area shape="poly" coords="48,311,105,248,96,210,75,205,38,234,8,310"
		        href="http://www.baden-aktuell.de/" alt="Baden" title="Baden">
		</map>
		<h3>代码</h3>
		<code class="mix">$("map *").tooltip({ positionLeft: true });</code>
	</fieldset>

	<fieldset>
		<legend>在视区的边界测试重新定位</legend>
		<p id="right">
			带有固定宽度的 tooltip<br/>
			<a title="短标题" href="http://google">链接到谷歌</a><br/>
			<a title="长标题，没有其他含义，只是一个长标题，一个很长很长很长很长很长的标题" href="http://google">链接到谷歌</a>
		</p>
		<p id="right2">
			带有自动宽度的 tooltip<br/>
			<a title="短标题" href="http://google">链接到谷歌</a><br/>
			<a title="长标题，没有其他含义，只是一个长标题，一个很长很长很长很长很长的标题" href="http://google">链接到谷歌</a>
		</p>
		<h3>代码</h3>
		<code class="mix">$(‘#right a‘).tooltip({
	track: true,
	delay: 0,
	showURL: false,
	extraClass: "right"
});
$(‘#right2 a‘).tooltip({ showURL: false, positionLeft: true });</code>
	</fieldset>
</div>

</body>
</html>
时间： 2024-10-17 02:00:07

tooltip 鼠标移动上去出现图片或文字与title大同小异的相关文章

可编辑DIV （contenteditable=&quot;true&quot;） 在鼠标光标处插入图片或者文字

近期需开发一个DIV做的编辑器,插入表情图片可直接预览效果,仔细参考了下百度贴吧的过滤粘贴过来文件的THML代码,自己整理了下.写出来只是和大家分享下,我自己也不大懂,经过努力,幸好搞定. 蛋疼的事情出来了,当编辑框失去焦点时候,再插入图片时候总是插入在最前面(谷歌和火狐,IE没问题).还没搞定,,, <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/

JavaScript函数实现鼠标指向后带图片的提示效果

转载:http://www.cnblogs.com/jack86514/archive/2009/04/01/1427584.html 当我们在写一个网页程序的时候,很多方法可以提供页面的动态显示,从而提高页面的视觉效果. 本例就是通过一个简单的Javascript代码动态显示图片的信息的,其实这样的例子很多,所以这里只做简单的说明了. 现在就创建一个页面,代码如下所示: <html> <head> <meta http-equiv="Content-Type&qu

图片和文字的位置垂直居中和左右摆放

在一些页面中经常涉及到图片和位置的摆放,下面介绍两种常见的摆放: 1:图片和文字垂直居中: <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>图片和文字垂直居中</title> <style> .wxw span{display: inline-block;width: 100px;vertical-align: middle;} .wx

鼠标滑过图片变暗文字链接滑出jQuery特效

效果体验:http://hovertree.com/texiao/jquery/7.htm HTML文件代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>鼠标滑过图片变暗文字链接滑出jQuery特效 - HoverTree</title><base target="_blank" /> &l

鼠标悬停时显示图片边框和文字描述的图片特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

快速将图片转文字的方法，超实用的小技巧

相信使用电脑办公的小伙伴经常会遇到图片转文字的问题,因为图中文字不可直接进行复制粘贴,所以想要将文字应用到别的地方去的话就很麻烦,那这时候有什么轻松将图片转文字的方法呢? 参考工具:迅捷OCR文字识别软件 迅捷OCR文字识别软件可以解决什么问题呢? 像办公或者学习中经常出现的PDF识别.扫描件识别.图片文字识别.票证识别.图片局部识别的问题都是可以解决的,从而提高您的工作与学习效率, 操作步骤: 1:首先打开电脑中的OCR文字识别软件,在上方导航栏选择图片局部识别板块. 2:进入图片局部识别操作

职场办公必备：快速将图片转文字的小技巧

相信办公中或者学习中的小伙伴们经常会遇到这样的问题,有时候需要将图中文字提取应用到别的地方去,但是手动输入图中文字的效率太低了,不建议大家这样去做,那有什么好的方法呢?接下来,小编就来为大家分享一种快速将图片转文字的方法,超实用的哦! 辅助工具:迅捷OCR文字识别软件 使用具体文字识别软件的方法适用于那些在办公或者学习中经常处理到文字图片需要进行识别转换的朋友,工具在手,就可以方便随时实现转换了,下面一起来看看具体的操作步骤吧. 第一步.打开电脑中的OCR文字识别软件,关闭弹窗点击界面上方图片局

懒得打字，教你一招快速将图片转文字

在平时的工作和学习中,一般遇到图中文字需要整理下来的时候,大家都是如何去操作的呢? 相信有一些小伙伴们采取的方法是手动敲出图中文字,但是面对图中密密麻麻的文字,这显然不是一种高效的做法,其实根本不需要傻傻的手敲文字的,借助一些文字识别软件就可以快速将图片转文字了,下面我们一起来看下具体的操作方法. 操作步骤: 1:[做好准备工作] 首先将需要识别转换的图片在电脑中准备好,因为使用到的是PC端的工具,所以整个步骤都是在电脑中完成的. 2:[打开软件+选择板块]接着将迅捷OCR文字识别软件打开,点击

如何识别JPG图片转文字，简单的方法讲解

相信办公中的小伙伴们经常会遇到图片转文字的问题,需要将图片上的文字应用到别的地方去,但是图中的文字又不可以直接进行复制粘贴,接下来小编就来给大家分享一种识别JPG图片转文字的简单操作方法,大家可以以此来参考下. 辅助工具:迅捷OCR文字识别软件 操作步骤: 1:在电脑中打开接下来使用到的OCR文字识别软件,点击图片局部识别板块. 2:进入图片局部识别板块后,点击添加文件按钮选择一张所需转换的文字图片并打开. 3:图片打开后可以通过下方一排小工具来简单对图片进行"移动""放大&