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: lock):</strong>
<div id="tooltip-1" class="tooltip-toggler"><img title="ToolTip!" alt="ToolTip!" src="logo.png" /></div><script type="text/javascript">new ToolTip( ooltip-1, The ToolTip plugin can appear hovering text, images or any other kind of HTML content., { mode: cursor, display: lock, width: 250, style: wouldefault, 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( ooltip-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: wouldefault, 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( ooltip-3, The ToolTip plugin can display any kind of text inside a tooltip., { mode: cursor, display: inline, width: 250, style: wouldefault, 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( ooltip-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: wouldefault, 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( ooltip-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: wouldefault, 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( ooltip-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: wouldefault, sticky: 0 });</script><br />
<strong>width 450px and the mode (mode: rigger):</strong>
<div id="tooltip-7" class="tooltip-toggler">Hover here!</div>
<script type="text/javascript">new ToolTip( ooltip-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: rigger, display: inline, width: 450, style: wouldefault, 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( ooltip-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: wouldefault, 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
Original Source:
Related Stuff
-
MooV: Using cutting edge Video phones and Software Video Phones - coupling all that with VoIP and empowering the disabled.
-
Moo Telecom: VoIP communications made easy - Ring anyway with the fun and ease of using a normal phone
-
TagR:Mobile Social Network with Real Time Locations Based services, and Ambience Intelligence, VoiP, IM, Skype, Googletalk, Mapping, Flickr, Events, Calendaring, Scheduling, SecondLife Support
-
ClearSMS : ClearSMS is a Web-based application that lets you send bulk SMS messages to your customers, contacts, or just about anyone.
-
Jajah:jah is a VoIP (Voice over IP) provider, founded by Austrians Roman Scharf and Daniel Mattes in 2005[1]. The Jajah headquarters are located in Mountain View, CA, USA, and Luxembourg. Jajah maintains a development centre in Israel.
-
Skype: It’s free to download and free to call other people on Skype. Skype the number one voice over ip software
- PrivatePhone: a free local phone number with voicemail and messages you can check online or from any phone.