.jpg)
ToolTip using MooTools
(No Ratings Yet)
Loading ...
Tooltip let’s you create mouse over tooltips to your content and allows you to show additional information.It using Gzip loader technique that will deliver CSS and Javascript files more faster and also with minimun HTTP request.Need MooTools,PHP and a few js.The main code is from YOOtooltip.
Display parameter:block or inline
The display option is used to define wether the tooltip trigger is a “inline” or “block” element. By default every trigger is a “inline” element. Tip: Use the “block” option when adding tooltips to div’s which surround images.
< !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: UTF-8" />
<title>ToolTip_mootools script_hotajax.org</title>
<!--www.hotajax.org-->
<link rel="stylesheet" href="tooltip.css.php" type="text/css" />
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="tooltip.js"></script>
<style type="text/css">
<!--
body {
font-family: Helvetica,Arial,sans-serif;
line-height: 2.5em;
font-size: 14px;
padding:25px;
margin:150px 100px 0 100px;
border: 1px solid #d8d7d7;
}
span.info {
display: block;
padding: 1px;
margin-bottom: 1px;
background-color: #FFFFCC;
border: 1px solid #d8d7d7;
color: #000;
}
-->
</style>
</head>
<body>
<div class="body">
<div style="float: right; margin: 40px 68px 0px 0px;"><strong>Image display parameter (display: 'block'):</strong>
<div id="tooltip-1" class="tooltip-toggler"><img title="ToolTip!" alt="ToolTip!" src="logo.png" /></div><script type="text/javascript">new ToolTip('tooltip-1', 'The ToolTip plugin can appear hovering text, images or any other kind of HTML content.', { mode: 'cursor', display: 'block', width: 250, style: 'default', sticky: 1 });</script><br />
</div>
<strong>ToolTip with sticky option (sticky: 0):</strong>
<div id="tooltip-2" class="tooltip-toggler">Hover here!</div>
<script type="text/javascript">new ToolTip('tooltip-2', '<img style="margin: 20px 0px 0px -20px;" width="224" height="68" align="right" title="ToolTip!" alt="ToolTip!" src="logo.png" /><strong>ToolTip</strong><br />The Tooltip plugin can have different widths.', { mode: 'cursor', display: 'inline', width: 300, style: 'default', sticky: 0 });</script><br />
<strong>ToolTip with text:</strong>
<div id="tooltip-3" class="tooltip-toggler">Hover here!</div>
<script type="text/javascript">new ToolTip('tooltip-3', 'The ToolTip plugin can display any kind of text inside a tooltip.', { mode: 'cursor', display: 'inline', width: 250, style: 'default', sticky: 0 });</script><br />
<strong>ToolTip with image:</strong>
<div id="tooltip-4" class="tooltip-toggler">Hover here!</div>
<script type="text/javascript">new ToolTip('tooltip-4', '<img style="margin: 20px 0px 0px -20px;" width="224" height="68" align="right" title="ToolTip!" alt="ToolTip!" src="logo.png" />The ToolTip plugin can display any image inside a tooltip.', { mode: 'cursor', display: 'inline', width: 250, style: 'default', sticky: 0 });</script><br />
<strong>ToolTip with HTML content:</strong>
<div id="tooltip-5" class="tooltip-toggler">Hover here!</div>
<script type="text/javascript">new ToolTip('tooltip-5', '<strong>ToolTip</strong><br /><span class="info">The ToolTip plugin can display any kind of HTML content inside a tooltip.</span>', { mode: 'cursor', display: 'inline', width: 250, style: 'default', sticky: 0 });</script><br />
<strong>ToolTip with width 300px:</strong>
<div id="tooltip-6" class="tooltip-toggler">Hover here!</div>
<script type="text/javascript">new ToolTip('tooltip-6', '<img style="margin: 20px 0px 0px -20px;" width="224" height="68" align="right" title="ToolTip!" alt="ToolTip!" src="logo.png" />The Tooltip plugin can have different widths.', { mode: 'cursor', display: 'inline', width: 300, style: 'default', sticky: 0 });</script><br />
<strong>width 450px and the mode (mode: 'trigger'):</strong>
<div id="tooltip-7" class="tooltip-toggler">Hover here!</div>
<script type="text/javascript">new ToolTip('tooltip-7', '<img style="margin: 30px 0px 0px -20px;" width="224" height="68" align="right" title="ToolTip!" alt="ToolTip!" src="logo.png" /><strong>ToolTip</strong><br /><span class="info" style="width: 180px">The Tooltip plugin can have different widths.</span>', { mode: 'trigger', display: 'inline', width: 450, style: 'default', sticky: 0 });</script><br />
<strong>Width 450px and sticky option (sticky: 1):</strong>
<div id="tooltip-7" class="tooltip-toggler">Hover here!</div>
<script type="text/javascript">new ToolTip('tooltip-7', '<img style="margin: 30px 0px 0px -20px;" width="224" height="68" align="right" title="ToolTip!" alt="ToolTip!" src="logo.png" /><strong>ToolTip</strong><br /><span class="info" style="width: 180px">The Tooltip plugin can have different widths.</span>', { mode: 'cursor', display: 'inline', width: 450, style: 'default', sticky: 1 });</script>
</div>
</body>
</html>
Demo: http://www.hotajax.org/tooltip/index.html
Download: http://www.hotajax.org/component/docman/doc_download/372-tooltip-using-mootools.html
Source: http://www.hotajax.org/mootools/tooltips–rating/565-tooltipmootools.html
Related Listings:
- Mobile Tooltip Widget I am making an Ajax application using GWT and I...
- jQuery plugin Tooltip Script Replacing standard tooltips is easy: Just include the script on...
- Build a Better Tooltip with jQuery Awesomeness Apr 1st in Javascript & AJAX by Jon Cazier Browsers...
- Cut & Paste Ajax Tooltip script v1.2 Description: This Ajax script enhances the default “title” attribute of...
- Poly Tooltip v1.1 PolyTooltip – a very easy way to make HTML tooltips...
Do you like this post?
Tags:
1 Comment »
RSS feed for comments on this post. TrackBack URL
Leave a comment
|
|
|
|
December 15th, 2009 at 1:48 am
[...] This post was mentioned on Twitter by shzad1, Eyes Drinker. Eyes Drinker said: RT @3gcreations ToolTip using MooTools http://bit.ly/6vqY0s [...]