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;
  visibility: hidden;
  border:transparent solid 1px;
  padding:5px;
  color:white;
  background:black;
  border-radius:5px;
  opacity: 0;
  transition: opacity 3s;
}

.tooltip:hover .text
{
  visibility: visible;
  opacity: 1;
}

.tooltip .text::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

</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>