Fetching contributors…
Cannot retrieve contributors at this time
184 lines (139 sloc) 5.17 KB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
<html lang="en">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>FloatingTips demo page</title>
<!-- Include Mootools and FloatingTips -->
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="Source/FloatingTips.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
// Lets create four simple tips, one for each possible position.
new FloatingTips('#simple'); // Top position is default
new FloatingTips('#simple a.bottom', { position: 'bottom' });
new FloatingTips('#simple a.left' , { position: 'left' });
new FloatingTips('#simple a.right' , { position: 'right' });
// This creates a tip that appear inside the target element
new FloatingTips('#inside a', { position: 'inside', balloon: false, motion: 0 });
// Let's create a customized tip
new FloatingTips('#customized a', {
// Content can also be a function of the target element!
content: function(e) { return 'I\'m a link and I am ' + e.getSize().x + ' px wide! :)'; },
position: 'bottom', // Bottom positioned
center: false, // Place the tip aligned with target
arrowSize: 12 // A bigger arrow!
// The following is a tip with HTML content taken from a page element!
new FloatingTips('#advanced a', {
// Content can be a string (an attribute name) or a function.
// If it's a function, it can returns string or HTML elements.
content: function() { return $('htmlcontent'); },
html: true, // I want that content is interpreted as HTML
center: false, // I do not want to center the tooltip
arrowOffset: 16, // Arrow is a little more the the right
offset: { x: -10 } // Position offset {x, y}
// A tip that appears when entering data in an input field
new FloatingTips('#focus input', {
content: 'rel',
position: 'right',
showOn: 'focus',
hideOn: 'blur',
distance: 6
// Events demo
new FloatingTips('#events a').addEvents({
'show': function(tip, element) {
if (element.get('id') == 'first_event')'second_event').floatingTipsShow();
'hide': function(tip, element) {
if (element.get('id') == 'first_event')'second_event').floatingTipsHide();
<style type="text/css">
body {
font-family: sans-serif;
font-size: 13px;
div {
margin: 20px 10px;
p {
color: #999999;
margin: 0 0 5px;
a {
font-weight: bold;
color: #3344FF;
a:hover {
font-weight: bold;
color: #6677FF;
/* The following is the only rule you need to customize your tip look */
.floating-tip {
background-color: black;
padding: 5px 15px;
color: #dddddd;
font-weight: bold;
font-size: 11px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
<div><h1>FloatingTips demo page</h1></div>
<div id="simple">
<p>Some simple tips. Different position, always centered:</p>
<a href="#" title="A tooltip." class="top">Default (top)</a> |
<a href="#" title="Another tooltip." class="bottom">Bottom</a> |
<a href="#" title="Again..." class="left">Left</a> |
<a href="#" title="Ok, you got it." class="right">Right</a>
<div id="inside">
You can place it also inside the target element:
<a href="#" title="Et voil&agrave;!">Try me</a>
<div id="customized">
<p>A customized tip. Not centered, bigger arrow, customized content:</p>
<p><a href="#">What can I say about me?</a></p>
<div id="advanced">
<p>An advanced <b>(and very cool!)</b> tip. HTML content:</p>
<p><a href="#">Let me see!</a></p>
<!-- This is the tooltip content. Note that is not displayed in the DOM. Inner HTML will be placed as tip content -->
<div id="htmlcontent" style="display: none;">
<p style="overflow: hidden; padding-top: 10px; padding-bottom: 10px; width: 320px; margin: 0;">
<img src="" style="float: left; margin-right: 10px; width: 64px; height: 64px;">
The Son of Man <i>(Le fils de l'homme)</i> is a 1964 painting
by the Belgian surrealist painter Ren&eacute; Magritte.
Magritte painted it as a self-portrait. <i style="color: #666666;">(from Wikipedia, of course)</i>
<div id="focus">
<p>You can show tooltip on focus instead of cursor events:</p>
<p><input type="text" rel="About that field..." value="Edit me"></p>
<div id="events">
<p>When <a href="#" title="Look right!" id="first_event">this</a> tooltip has been shown, <a href="#" title="Hello!" id="second_event">this</a> tooltip will be shown</p>
Read Javascript comments on this demo or see
<a href="" target="_blank">docs</a>
for more!