Esküvő

Tipsy jQuery Tooltip

Tipsy is a cross-browser jQuery tooltip plugin written by Jason Frame. It uses only jQuery and CSS, so no images needed, it creates the arrow with CSS. Inside the tooltip you can place any HTML, images. Tooltip can be triggered on hover, focus and manually. Original files can be downloaded from GitHub.

jQuery

Add jQuery libary and tipsy jQuery plugin to HTML head, than initialize it. Tooltips can be apply for any id, class and tag.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.tipsy.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	// apply tooltip for Id
	$('#id').tipsy();
	// apply tooltip for Class
	$('.class').tipsy();
	// apply tooltip for Tag
	$('a').tipsy();
});
</script>

Default options

$.fn.tipsy.defaults = {
    delayIn: 0,      // delay before showing tooltip (ms)
    delayOut: 0,     // delay before hiding tooltip (ms)
    fade: false,     // fade tooltips in/out?
    fallback: '',    // fallback text to use when no tooltip text
    gravity: 'n',    // gravity
    html: false,     // is tooltip content HTML?
    live: false,     // use live event support?
    offset: 0,       // pixel offset of tooltip from element
    opacity: 0.8,    // opacity of tooltip
    title: 'title',  // attribute/callback containing tooltip text
    trigger: 'hover' // how tooltip is triggered - hover | focus | manual
};

Gravity means the placement of the tooltip:  nw (North West),  n (North), ne (North East),  w (West),  e (East),  sw (South West),  s (South),  se (South East).
Options can be used like this:

$('#example').tipsy({html: true, gravity: 'w' });

CSS

Add CSS styling to HTML.

<style type="text/css">
.tipsy {
	font-size: 10px;
	position: absolute;
	padding: 5px;
	z-index: 100000;
}
.tipsy-inner {
	background-color: #000;
	color: #FFF;
	max-width: 200px;
	padding: 5px 8px 4px 8px;
	text-align: center;
}

/* Rounded corners */
.tipsy-inner {
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

.tipsy-arrow {
	position: absolute;
	width: 0;
	height: 0;
	line-height: 0;
	border: 5px dashed #FFF;
}

/* Rules to color arrows */
.tipsy-arrow-n {
	border-bottom-color: #000;
}
.tipsy-arrow-s {
	border-top-color: #000;
}
.tipsy-arrow-e {
	border-left-color: #000;
}
.tipsy-arrow-w {
	border-right-color: #000;
}

.tipsy-n .tipsy-arrow {
	top: 0px;
	left: 50%;
	margin-left: -5px;
	border-bottom-style: solid;
	border-top: none;
	border-left-color: transparent;
	border-right-color: transparent;
}
.tipsy-nw .tipsy-arrow {
	top: 0;
	left: 10px;
	border-bottom-style: solid;
	border-top: none;
	border-left-color: transparent;
	border-right-color: transparent;
}
.tipsy-ne .tipsy-arrow {
	top: 0;
	right: 10px;
	border-bottom-style: solid;
	border-top: none;
	border-left-color: transparent;
	border-right-color: transparent;
}
.tipsy-s .tipsy-arrow {
	bottom: 0;
	left: 50%;
	margin-left: -5px;
	border-top-style: solid;
	border-bottom: none;
	border-left-color: transparent;
	border-right-color: transparent;
}
.tipsy-sw .tipsy-arrow {
	bottom: 0;
	left: 10px;
	border-top-style: solid;
	border-bottom: none;
	border-left-color: transparent;
	border-right-color: transparent;
}
.tipsy-se .tipsy-arrow {
	bottom: 0;
	right: 10px;
	border-top-style: solid;
	border-bottom: none;
	border-left-color: transparent;
	border-right-color: transparent;
}
.tipsy-e .tipsy-arrow {
	right: 0;
	top: 50%;
	margin-top: -5px;
	border-left-style: solid;
	border-right: none;
	border-top-color: transparent;
	border-bottom-color: transparent;
}
.tipsy-w .tipsy-arrow {
	left: 0;
	top: 50%;
	margin-top: -5px;
	border-right-style: solid;
	border-left: none;
	border-top-color: transparent;
	border-bottom-color: transparent;
}
</style>

 

Demo »


Esküvő


Related articles

Unordered List Style Image CSS

Unordered List Style Image CSS

06/03/2013

Learn how to style UL with any image using CSS.

OL and UL List CSS Style

OL and UL List CSS Style

03/03/2013

Styling ordered and unordered lists is easy. Just write a single line of CSS to change the list style type.

Pie Chart with Flot jQuery Plugin

Pie Chart with Flot jQuery Plugin

28/02/2013

Learn how to use the pie plugin for Flot charts.


3 comments

Nicolas Mendez2015-03-20 20:20

Question: How can modifies the pluggin for example to show the tooltip on focus or on hover? witch is the difference?

Keyur2014-04-25 15:59

Hi, \\r\\n\\r\\nYou have really written nice tooltip jquery helper. I have couple of questions as listed below.\\r\\n\\r\\n1. Does this tool tip friendly with flot graphs ?\\r\\n2. Can you show the jsfiddle demo of tipsy tooltip with flot graph ?\\r\\n3. Also is this tooltip responsive in nature ?

seban2013-06-10 13:25

Many many thanks bro.

Leave a comment

We welcome any comment from you! Please keep in mind that comments are moderated and rel='nofollow' is in use. So, please do not use a domain as your name or a spammy keyword, or your comment will be deleted.

Name: *

E-mail: *

Message: *

Click on the apple *


Find us on Facebook

Tags

Esküvő

Back to Top