`
wine-god
  • 浏览: 14152 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

jQuery plugin: Tooltip(转)

阅读更多
<!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-Type" content="text/html; charset=ISO-8859-1" />
<title>jQuery Tooltip Plugin Demo</title>
 
<link rel="stylesheet" href="../jquery.tooltip.css" />
<link rel="stylesheet" href="screen.css" />
<script src="../lib/jquery.js" type="text/javascript"></script>
<script src="../lib/jquery.bgiframe.js" type="text/javascript"></script>
<script src="../lib/jquery.dimensions.js" type="text/javascript"></script>
<script src="../jquery.tooltip.js" type="text/javascript"></script>
 
<script src="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"><a href="http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/">jQuery Tooltip Plugin</a> Demo</h1>
<div id="main">
	<fieldset id="set1">
		<legend>Three elements with tooltips, default settings</legend>
		<a title="A tooltip with default settings, the href is displayed below the title" href="http://google.de">Link to google</a>
		<br/>
		<label title="A label with a title and default settings, no href here" for="text1">Input something please!</label>
		<br/>
		<input title="Note that the tooltip disappears when clicking the input element" type="text" value="Test" name="action" id="text1"/>
		
		<h3>Code</h3>
		<pre><code class="mix">$('#set1 *').tooltip();</code></pre>
	</fieldset>
	
	<fieldset id="foottip">
		<legend>Using bodyHandler to display footnotes in the tooltip</legend>
		Some text referring to a <a href="#footnote">footnote</a>.
		<br/>
		<br/>
		<br/>
		<br/>
		<br/>
		<div id="footnote"><em>And here</em> is the actual footnote, complete with nested <strong>HTML</strong>.</div>
		
		<h3>Code</h3>
		<pre><code class="mix">$("#foottip a").tooltip({
	bodyHandler: function() {
		return $($(this).attr("href")).html();
	},
	showURL: false
});</code></pre>
	</fieldset>
	
	<fieldset>
		<legend>An image with a tooltip</legend>
		<img id="tonus" src="image.png" height="80" title="No delay. The src value is displayed below the title" />
		<h3>Code</h3>
	<pre><code class="mix">$('#tonus').tooltip({
	delay: 0,
	showURL: false,
	bodyHandler: function() {
		return $("&lt;img/&gt;").attr("src", this.src);
	}
});</code></pre>
	</fieldset>
	
	<fieldset>
		<legend>Blocking tooltips</legend>
		<button id="block">Click this button to block/unblock all tooltips</button>
		<pre><code class="mix">$("#block").click($.tooltip.block);</code></pre>
	</fieldset>
	
	<fieldset>
		<legend>The next four links have no delay with tracking and fading, with extra content:</legend>
		<div id="yahoo">
			<a title="Yahoo doo - more content" href="http://yahoo.com">Link to yahoo</a>
			<a title="Yahoo doo2 - wohooo" href="http://yahoo.com">Link to yahoo1</a>
			<a title="Yahoo doo3" href="http://yahoo.com">Link to yahoo2</a>
			<a title="Yahoo doo4 - buga!" href="http://yahoo.com">Link to yahoo3</a>
		</div>
		<select><option>bgiframe test</option></select>
		<h3>Code</h3>
		<pre><code class="mix">$('#yahoo a').tooltip({
	track: true,
	delay: 0,
	showURL: false,
	showBody: " - ",
	fade: 250
});</code></pre>
	</fieldset>
	
	<fieldset>
		<legend>Tooltips with extra classes. Useful for different tooltip styles on a single page.</legend>
		<em>Note how the one on the right gets a different background image when at the right viewport border.</em>
		<br/>
		<span id="fancy" title="Note - Please note the custom positioning here!">A fancy tooltip, now with some custom positioning.</span>
		<span id="fancy2" title="Note - Please note the custom positioning here!">A fancy tooltip, now with some custom positioning.</span>
		<p><span id="pretty" title="Again - more custom positioning.">And now, for the fancy stuff, a tooltip with an extra class for nice shadows, and some extra content</span></p>
		<br/>
		<br/>
		<br/>
		<select><option>bgiframe test</option></select>
		<h3>Code</h3>
		<pre><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></pre>
	</fieldset>
	
	<fieldset>
		<legend>Selects</legend>
		<select title="fancy select with a tooltip">
			<option>1. option</option>
			<option>2. option</option>
			<option>3. option</option>
		</select>
	</fieldset>
	
	<fieldset>
		<legend>Image map with tooltips.</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>Code</h3>
		<pre><code class="mix">$("map *").tooltip({ positionLeft: true });</code></pre>
	</fieldset>
	
	<fieldset>
		<legend>Testing repositioning at viewport borders</legend>
		<p id="right">
			Tooltip with fixed width<br/>
			<a title="Short title" href="http://goggle">Google me!</a><br/>
			<a title="Rather a very very long title with no meaning but yet quite long long long" href="http://goggle">Google me!</a>
		</p>
		<p id="right2">
			Tooltip width auto width<br/>
			<a title="Short title" href="http://goggle">Google me!</a><br/>
			<a title="Rather a very very long title with no meaning but yet quite long long long" href="http://goggle">Google me!</a>
		</p>
		<h3>Code</h3>
		<pre><code class="mix">$('#right a').tooltip({
	track: true,
	delay: 0,
	showURL: false,
	extraClass: "right"
});
$('#right2 a').tooltip({ showURL: false, positionLeft: true });</code></pre>
	</fieldset>
</div>
 
</body>
</html>

 http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/

 http://www.webjx.com/javascript/jsajax-21435.html

  • 大小: 26.3 KB
  • 大小: 30.8 KB
  • 大小: 181.4 KB
分享到:
评论

相关推荐

    JQuery-Tooltip-Plugin

    jQuery作为一款强大的JavaScript库,提供了丰富的插件来增强这种功能,其中之一就是我们今天要讨论的"JQuery-Tooltip-Plugin"。这款插件为开发者提供了灵活且易于定制的Tooltip解决方案,使得网页中的提示信息展示...

    最好用的jquery的tooltip控件

    在jQuery中,Tooltip是一种常见的UI元素,用于提供额外的信息,当用户将鼠标悬停在某个元素上时会显示出来。本教程将深入探讨“最好用”的jQuery Tooltip插件——Sexy Tooltips 1.1。 Sexy Tooltips是一款设计精美...

    jquery.tooltip.js

    jquery插件,tooltip提示文字。

    jQuery Tooltip Plugin各种浮动提示效果插件.rar

    这是使用jQuery Tooltip Plugin弹出各种浮动提示效果插件的一些例子,用这个插件可以显示自定义的鼠标悬停提示,比如文字提示框、图片框,在鼠标放在特定位置时激活,鼠标移开后消失,如示例所示为弹出一个图片浮动...

    jQuery Tooltip

    jQuery Tooltip 是一个基于 jQuery 库的插件,用于在网页元素上显示提示信息。这个插件可以帮助开发者创建具有自定义样式、动态效果和交互性的工具提示。jQuery 的流行在于其简洁的API和丰富的插件库,jQuery ...

    jQuery Tooltip跟随鼠标提示条

    jQuery Tooltip跟随鼠标提示条是...使用这个名为`jQuery-Tooltip-Plugin-v1.1`的压缩包文件,你将获得一个预封装好的jQuery Tooltip插件,只需按照文档说明引入和配置,即可快速在你的项目中实现跟随鼠标提示条的效果。

    jquery 验证 提示 插件

    jQuery Tooltip插件通常与jQuery Validation Plugin结合使用,为用户提供更加直观的验证体验。它可以在鼠标悬停、焦点或点击事件上触发,显示一个包含有用信息的弹出框。以下是一些使用技巧: 1. 初始化:在页面...

    40个实用的jquery用户界面ui设计技巧及教程.doc

    12. **Build a Better Tooltip with jQuery Awesomeness**:这个教程教你如何用jQuery编写一个插件,创建出比浏览器默认提示更吸引人的提示框。 13. **Simple Tooltip – jQuery & CSS**:Soh Tanaka的教程教你如何...

    25个优雅的jQuery Tooltip插件推荐

    6. **Tipsy - Facebook-Style Tooltip Plugin for jQuery**:模仿Facebook的Tooltip样式,提供了一种社交网络风格的提示效果。 7. **ClueTip**:ClueTip支持多用途的Tooltip,可以包含图片和其他HTML内容,还支持...

    jquery插件集合

    - **工具提示插件**:如`jQuery.tooltip`,为元素添加动态提示信息。 - **响应式设计插件**:如`jQuery.responsiveNav`,帮助构建响应式导航菜单。 - **日期/时间插件**:如`jQuery.datetimepicker`,方便用户...

    Jquery表单验证(采用poshytip提示)

    $('input[name="email"]').tooltip('showError', '请输入有效的邮箱地址'); return false; } else { // 提交表单或其他操作 } }); }); ``` 以上就是使用jQuery、Poshytip和正则表达式实现表单验证的基本流程...

    jquery插件和特效

    11. **问卷调查**:利用jQuery和AJAX技术,可以创建动态问卷,如jQuery Survey Plugin,用户填写后可实时处理结果,无需刷新页面。 12. **无缝滚动**:如jQuery ScrollPath或marquee插件,可用于创建平滑的无限滚动...

    10个JQuery经典组件源码及技术手册.zip

    6. **工具提示(Tooltips)**:如jQuery UI的Tooltip,显示元素的附加信息。 7. **滚动条(Custom Scrollbars)**:如Perfect Scrollbar,自定义浏览器滚动条样式。 8. **轮盘赌(Wheel Spinners)**:用于创建抽奖...

    100个jquery特效

    4. Tooltip Plugins:如TipTip和qTip,提供自定义的提示框效果。 四、jQuery与响应式设计 在响应式设计中,jQuery能够帮助检测屏幕尺寸,动态调整布局和特效,例如: 1. Responsive Menus:jQuery可以轻松实现...

    Protip:新一代jQuery Tooltip插件

    简要功能49位实时刷新工具提示选项。 实时元素检查(元素已删除?-&gt;工具提示应该消失)。 重力:如果它不适合屏幕,请找到更好的位置。 DOM目标:追加到根或另一个目标元素中。 位置:外部,内部,边框,中心单击...

    jquery 工具提示插件awTooltip

    .aw-tooltip::before { content: ""; position: absolute; } ``` ### 高级功能 1. **触发事件**:你可以设置触发工具提示的事件,比如鼠标悬停(hover)、点击(click)等。默认是`hover`,可通过`trigger`参数...

    jQuery弹出层

    - **插件集成(Plugin Integration)**: 结合其他jQuery插件,如日期选择器、表单验证等。 - **性能优化(Performance Optimization)**: 减少DOM操作,优化动画效果,提升用户体验。 总之,jQuery弹出层提供了一种...

Global site tag (gtag.js) - Google Analytics