Anleitungen und TippsPhP Html Javascript

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Zuletzt angesehen: • CSS Tooltip
Blog
Forum

Sidebar

Navigation

Tags

php:csstooltip
,

CSS Tooltip

Css tooltips are a very common technique to show some nice looking tooltips.

Example HelpHelpexample TooltipThis is some text for the tooltip to show you a nice css tooltip

Technical idea: The idea is simple. Every tooltip link has an inner span tag. This span is moved out of screen until you hover the link with your mouse. Thats it.

The HTML Code: 

<a class='tooltip' href='#'>This is a tooltip
   <span class="custom">Some text for the tooltip</span>
</a>

The Css Code: 

.tooltip {
	border-bottom: 1px dotted #000000;
	color: #000000;
	outline: none;
	cursor: help;
	text-decoration: none;
	position: relative;
}
 
.tooltip span {
	margin-left: -999em;
	position: absolute;
}
 
.tooltip:hover span {
	position: absolute;
	left: 1em;
	top: 2em;
	z-index: 99;
	margin-left: 0;
	width: 250px;
}

That's it. A not yet nice looking tooltip with html and css.

Nice looking CSS Tooltip

To make it looking good, we need some images, css shadows and other good looking stuff. So you need some 48px nice looking icons (you can google some or copy my icons). HelpHelpTooltip 1You can have differect tooltips categories HelpHelpTooltip 2Maybe you want to show some nice information HelpHelpTooltip 3Or maybe you show some warnings before some one is doing something HelpHelpTooltip 4Even errors can be shown and dont take too much space, but a single icon 

.tooltip {
	/*border-bottom: 1px dotted #000000;*/
	color: #000000;
	outline: none;
	cursor: help;
	text-decoration: none;
	position: relative;
}
 
.tooltip span {
	margin-left: -999em;
	position: absolute;
}
 
.tooltip:hover span {
	border-radius: 5px 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
	font-family: Calibri, Tahoma, Geneva, sans-serif;
	position: absolute;
	left: 1em;
	top: 2em;
	z-index: 99;
	margin-left: 0;
	width: 250px;
}
 
.tooltip:hover span img {
	border: 0;
	margin: -10px 0 0 -55px;
	float: left;
	position: absolute;
}
 
.tooltip:hover span em {
	font-family: Candara, Tahoma, Geneva, sans-serif;
	font-size: 1.2em;
	font-weight: bold;
	display: block;
	padding: 0.2em 0 0.6em 0;
}
 
.tooltip .classic {
	padding: 0.8em 1em;
}
 
.tooltip .custom {
	padding: 0.5em 0.8em 0.8em 2em;
}
 
 
.tooltip .classic {
	background: #FFFFAA;
	border: 1px solid #FFAD33;
}
 
.tooltip .critical {
	background: #FFCCAA;
	border: 1px solid #FF3334;
}
 
.tooltip .help {
	background: #BCFF96;
	border: 1px solid #A2DB81;
}
 
.tooltip  .info {
	background: #9FDAEE;
	border: 1px solid #2BB0D7;
}
 
.tooltip .warning {
	background: #FFFFAA;
	border: 1px solid #FFAD33;
}

Complete CSS Tooltip example in one HTML File

If you just want an minimalistic example, use this Html code. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>ToolTips Example</title>
		<style type="text/css">
.tooltip {
   border-bottom: 1px dotted #000000;
	color: #000000;
	outline: none;
	cursor: help;
	text-decoration: none;
	position: relative;
}
.tooltip span {
	margin-left: -999em;
	position: absolute;
}
.tooltip:hover span {
	border-radius: 5px 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
	font-family: Calibri, Tahoma, Geneva, sans-serif;
	position: absolute;
	left: 1em;
	top: 2em;
	z-index: 99;
	margin-left: 0;
	width: 250px;
}
.tooltip:hover span img {
	border: 0;
	margin: -10px 0 0 -55px;
	float: left;
	position: absolute;
}
.tooltip:hover span em {
	font-family: Candara, Tahoma, Geneva, sans-serif;
	font-size: 1.2em;
	font-weight: bold;
	display: block;
	padding: 0.2em 0 0.6em 0;
}
.tooltip .custom {
	padding: 0.5em 0.8em 0.8em 2em;
}
.tooltip .classic {
	background: #FFFFAA;
	border: 1px solid #FFAD33;
}
.tooltip .help {
	background: #BCFF96;
	border: 1px solid #A2DB81;
}
		</style>
	</head>
	<body>
	<p> This is a basic Tooltip: <a class="tooltip" href="#">Help
	<span class="custom help">
	  <img src="help.png" alt="Help" height="48" width="48" />
	  <em>Help</em>This is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own tooltips!
	</span>
	</a></p>
	</body>
</html>

Make it easy usable with php

We will now build a little help function, that creates 1 of those nice looking tooltips and just requires the important stuff.

Here we go 

function tooltip_help($msg,$title="Help",$linktext = "", $url = "#"){
  return "<a class='tooltip' href='$url'>".$linktext.
         //if you want to use another tooltip type, just change this css class and the image
         '<span class="custom help">'. 
         '<img src="images/help.png" alt="'.$title.'" height="48"width="48" />
         <em>'.$title.'</em>'.$msg .'</span></a>';
}

All you got to do is include the css anywhere in your header, fix the image url and have nice tooltips in your homepage.

php/csstooltip.txt · Zuletzt geändert: 2012/10/01 18:45 von ben

Seiten-Werkzeuge

www.Umingo.de
1241 Visitors and 1252 times Entrypoint since 13. Jul 2012