CloseTag | الشروحات | CSS | التلميحات في لغة CSS | CSS Tooltip

<!DOCTYPE html>
<html>
<style>
.tooltip 
{
  position: relative;
  display: inline-block;
  padding:3px;
  cursor: pointer;
  border-bottom:1px dotted black;
}

.text
{
  position:absolute;
  left:102%;
  top:0px;
  display:none;
  border:transparent solid 1px;
  padding:5px;
  color:white;
  background:#555;
  border-radius:5px;
}

.tooltip:hover .text
{
  display:block;
}
</style>
<body>

<h1>CSS tooltip</h1>
<p>CSS tooltip from closetag</p>
<div class="tooltip">Tooltip
  <div class="text">
  www.closetag.com
  </div>
</div>

</body>
</html>