چگونه با استفاده از تولتیپ کابران را راهنمایی کنیم؟

مجموعه تولتیپ های زیبا

ToolTip,تولتیپ

چگونه با استفاده از تولتیپ کابران را راهنمایی کنیم؟

Tooltip باکس کوچکی است که شامل توضیحات می باشد و با قرار گرفتن نشانگر ماوس بر روی عنصر مورد نظر ظاهر می شود. 
برای درک بهتر این موضوع بر روی لینک دمو کلیک کنید.

کد CSS برای ایجاد ToolTip

<style>
    body {
  background: #e6e6e6;
  font-family: "Helvetica", "Arial";
  padding-top: 100px;
  text-align: center;
}

a {
  background: #D2D7D3;
  color: #222;
  border-radius: 100%;
  display: inline-block;
  text-decoration: none;
  position: relative;
  width: 40px;
  height: 28px;
  margin: 0 2px;
  padding-top: 12px;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
}

a.icon:before {
  font-family: "FontAwesome", sans-serif;
  color: #fff;
  font-size: 20px;
}

a.facebook:before {
  content: '\f09a';
}

a.twitter:before {
  content: '\f099';
}

a.github:before {
  content: '\f113';
}

a.dribble:before {
  content: '\f17d';
}

a.pinterest:before {
  content: '\f0d2';
}

a span {
  background: #fff;
  color: #222;
  font-size: 14px;
  font-weight: bold;
  position:  absolute;
  bottom: 0;
  left: -25px;
  right: -25px;
  padding: 5px 7px;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all .4s;
  -moz-transition: all .4s;
  transition: all .4s;
}

a span:before {
  content: '';
/*   width: 0;
  height: 0; */
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  position: absolute;
  bottom: -5px;
  left: 40px;
}

a:hover span {
  bottom: 50px;
  visibility: visible;
  opacity: 1;
}


/* Hover through the icons */

a.facebook:hover {
  background-color: #4183d7; 
  color: #bfbfbf;
}

a.facebook span {
  color: #4183d7;
}

a.twitter:hover {
  background-color: #19b5fe;
  color: #fff;
}

a.twitter span {
  color: #19b5fe;
}

a.github:hover {
  background-color: #000;
  color: #fff;
}

a.github span {
  color: #000;
}

a.dribble:hover {
  background-color: #f62459;
  color: #fff;
}

a.dribble span {
  color: #f62459;
}

a.pinterest:hover {
  background-color: #f22613;
  color: #fff;
}

a.pinterest span {
  color: #f22613;
}
</style>

کد HTML برای ایجاد ToolTip

<div>
        <a href="http://www.facebook.com" class="icon facebook"><span>Facebook</span></a>
        <a href="http://www.twitter.com" class="icon twitter"><span>Twitter</span></a>
        <a href="http://www.github.com" class="icon github"><span>Github</span></a>
        <a href="http://www.dribble.com" class="icon dribble"><span>Dribble</span></a>
        <a href="http://pinterest.com" class="icon pinterest"><span>Pinterest</span></a>
</div>

منبع:طراحی سایت ارزان

اگر سوالی در رابطه با این مطلب دارید می توانید از طریق فرم زیر ارسال کنید
  • ایمیل شما به هیچ عنوان در سایت نمایش داده نمی شود
  • شماره تماس اختیاری است می توانید آن را وارد نکنید
  • کامنت شما بعد از تایید مدیر سایت نمایش داده می شود