Easy CSS Tooltip

css tooltip

css tooltip

Here we will see a tooltip using css only. Its really short and easy. We are using here a span inside a anchor tag for tooltip text. Hope it will be useful for you.

Source Code

<html>
<head>
<style type="text/css">
* {font-family:Verdana; font-size:11px; }
a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/
a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:190px;}
a.tooltip:hover span{display:inline; position:absolute; border:1px solid #cccccc; background:#ffffff; color:#6c6c6c;}
</style>

</head>
<body>
	<form>
		<a href="#" class="tooltip">
			See Tooltip <span>https://designikx.wordpress.com</span>
		</a>.
		<a href="#" class="tooltip">
			<input type="text">
			<span>https://designikx.wordpress.com</span>
		</a>
	</form>
</body>
</html>

Thanks,
Nikhil Ughade
(WEB DeSigNer)
Mumbai,IN

Nikhil on Deviant Art
http://designikx.deviantart.com
Art – community of artists and those devoted to art. Digital art, skin art, themes, wallpaper art, traditional art, photography, poetry / prose. Art prints.

Nikhil on Twitter
http://twitter.com/designikx

Advertisements

About Nikhil
Name : Nikhil Ughade UI Developer, Accidentally in design field, no turn back since then. Location : Pune (MH, INDIA) From : Amravati (MH,INDIA) College : VYWS's College Of Engg. Badnera, Amravati Hobby : Social Networking, Designing Web Sites, Photography, Reading Books. In Free time works for NGO.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: