بسیاری از کاربران وبسایت وقتی وارد سایت شما می شوند، انتظار دارند که از کلیک روی یک لینک اطلاعات بیشتری به دست بیاورند، شما با ساختن یک تولتیپ اختصاصی آنها را از توضیحات بیشتر لینک مطلع می سازید. امکان اینکه کلیک لینک شما بالاتر برود خیلی بیشتر است و به ارتقای سئوی وبسایت شما بسیار کمک خواهد کرد.بریم سراغ کدها برویم تا بیشتر براتون جا بیفته....

 

ساختار (html)


<body style="text-align:center">

<h2>عنوان مورد نظر</h2>
<p>روی لینک زیر بروید تا تولتیپ نمایش داده شود:نظر</p>

<div class="tooltip">با موس هاور کن
<span class="tooltiptext">این متن تولتیپ است.</span>
</div>

</body>


استایل (css)

 

	
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

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

	

 

 

 

خروجی تولتیپ اختصاصی

 

دانلود کد تولتیپ اختصاصی