A tooltips is a piece of text that pops up when you hover the mouse over a region on a website. If you use the Joomla! back end, for example, tooltips are used to help explain the action of different parameters (Options), as shown in the screenshot below:

Tooltips are a great way to give the user access to information without using up space on the screen. You can use basic tooltips just by adding a "title" attribute to a tag. However, this doesn't give you the option to style the tooltips. Some extensions for Joomla! 1.7+, like Contact Enhanced, allows you to add tooltips, however some templates do not provide tooltips styling. It is very easy to add styled tooltips to your site. This tutorial will show you how.

Add the CSS rules below to your template's CSS file:

/* -- TOOLTIP STYLES ----------------------------- */
.tip {
	float: left;
	background: #ffc;
	border: 1px solid #D4D5AA;
	padding: 5px;
	max-width: 400px;
	z-index: 50;
}

.tip-title {
	padding: 0;
	margin: 0;
	font-size: 1em;
	font-weight: bold;
	margin-top: -15px;
	padding-top: 15px;
	padding-bottom: 5px;
	background: url(../images/selector-arrow.png) no-repeat;
}

.tip-text {
	font-size: 1em;
	margin: 0;
}
.tip-top{}
.tip-bottom{}
.tip-wrap{}

Then right click on the image below and "Save image as ..." to your template's image folder.

Hopefully this will help you out.

Recommend to a friend