Всплывающие подсказки CSS3

Вот такие очень простые всплывающие подсказки Создаем всплывающие подсказки
Это вот она и есть на чистом CSS3 — легко редактируется. Код прост в освоении. могут пригодиться начинающему вебмастеру, ведь с помощью них можно сильно разнообразить текст и разбавить его интерактивными эллементами — смотреть здесь Создаем всплывающие подсказки
Это вот она и есть на чистом CSS3 — легко редактируется. Код прост в освоении. .

<p>Вот такие очень простые 
	<a href="#" class="tooltip"><b style="text-decoration:underline;">всплывающие подсказки</b>
		<span><b>Создаем всплывающие подсказки</b><br>Это вот она и есть на чистом CSS3 - легко редактируется. Код прост в освоении.</span>
	</a>
 могут пригодиться начинающему вебмастеру, ведь с помощью них можно сильно разнообразить текст и разбавить его интерактивными эллементами - 
	<a href="#" class="tooltip"><b style="text-decoration:underline;">смотреть здесь</b>
		<span><b>Создаем всплывающие подсказки</b><br>Это вот она и есть на чистом CSS3 - легко редактируется. Код прост в освоении.</span>
	</a>
 .</p>

<style>
.tooltip
{
    position: relative;
    /*background: #eaeaea;*/
    cursor: help;
    display: inline-block;
    text-decoration: none;
    color: #222;
    outline: none;
}
 
.tooltip span
{
    visibility: hidden;
    position: absolute; 
    bottom: 35px;
    left: 50%;
    z-index: 999;
width: 300px;
margin-left: -157px;
    padding: 15px;
border: 2px solid #41e3d1;
opacity: 1;
background-color: #eef6fc;
    -moz-border-radius: 4px;
    border-radius: 4px;  
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
    box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;  
    text-shadow: 0 1px 0 rgba(255,255,255,.4); 
}
 
.tooltip:hover
{
    border: 0; /* для IE6 */
}
 
.tooltip:hover span
{
    visibility: visible;
}
 

.tooltip span:after
{
    content: "";
    position: absolute;
    z-index: 1000;
    bottom: -16px;
    left: 50%;
    margin-left: -18px;  
    border-top: 8px solid #f00;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;        
    border-bottom: 0;  
}
 
.tooltip span:before 
{
    border-top-color: #ccc;
    bottom: -8px;
}
</style>
</pre>


<style>
.tooltip
{
    position: relative;
    /*background: #eaeaea;*/
    cursor: help;
    display: inline-block;
    text-decoration: none;
    color: #222;
    outline: none;
}
 
.tooltip span
{
    visibility: hidden;
    position: absolute; 
    bottom: 35px;
    left: 50%;
    z-index: 999;
width: 300px;
margin-left: -157px;
    padding: 15px;
border: 2px solid #41e3d1;
opacity: 1;
background-color: #eef6fc;
    -moz-border-radius: 4px;
    border-radius: 4px;  
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
    box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;  
    text-shadow: 0 1px 0 rgba(255,255,255,.4); 
}
 
.tooltip:hover
{
    border: 0; /* для IE6 */
}
 
.tooltip:hover span
{
    visibility: visible;
}
 

.tooltip span:after
{
    content: "";
    position: absolute;
    z-index: 1000;
    bottom: -16px;
    left: 50%;
    margin-left: -18px;  
    border-top: 8px solid #f00;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;        
    border-bottom: 0;  
}
 
.tooltip span:before 
{
    border-top-color: #ccc;
    bottom: -8px;
}
</style>