آموزش ساخت تولتیپ با CSS3 و Js

[Saberian 1,793]

با سلام خدمت تمام دوستان.

در این پست میخوایم با هم دیگه یک تولتیپ زیبا و حرفه ایی درست کنیم اما خیلی راحت و بدون اینکه بخواید به خودتون فشار بیارید .

 

 

 

 

 

ساخت این تولتیپ آسان هست و فقط با کمی دانش کدنویسی و کد ها می تونید راحت این تولتیپ را پیدا سازی کنید روی هر چیزی که میخواهید از منو یا کلمه و جمله .!!!

 

خوب هر چیزی توی دنیایی مجازی دارای استایل می باشد و ما هم با استایل شروع به کار می کنیم.

این css ها را درون فایل style.css پوسته سایت یا قالب وبلاگتون قرار بدید .

 

کد:

 

 

 a.sbtooltip:hover {    position: relative; /* Allows the tooltip to be absolutely positioned */    z-index: 100;} /* Speech Bubble */a.sbtooltip:before {    background:  rgb(224,168,38); /* For browsers that don't support gradients */     background: -webkit-gradient( /* Webkit gradient */        linear,         left bottom,        left top,        color-stop(0.44, rgb(207,141,0)),         color-stop(0.72, rgb(224,168,38))    );    background:  -moz-linear-gradient( /* Firefox gradient */        90deg,         rgb(207,141,0) 44%,        rgb(224,168,38) 72%    );    color: #fff;     content: attr(sbtooltip); /* This takes the content of the attribute  named “sbtooltip?and displays it within this element*/    display: none;  /* Hidden until hovered upon */ /* Font, padding, top and right must change depending on the font  size you are using on your web page */    font: 12px Helvetica,  Arial,Georgia, sans-serif;    padding: 5px 10px;    position: absolute;     top: 33px;    right: 0; /* Border radii for different browsers */     -moz-border-radius: 8px;    -webkit-border-radius: 8px;     border-radius: 8px; /* Box shadows for different browsers */    -moz-box-shadow: 0px 0px  4px #999;    -webkit-box-shadow: 0px 0px 4px #999;    box-shadow: 0px  0px 4px #999;} /* Triangle */a.sbtooltip:after {    border-width: 12px;     border-style: solid;    border-color: transparent transparent  rgb(224,168,38) transparent;    content: ""; /* Forces this  pseudo-element to appear on hover */    display: none;    height: 2px;  /* Width and height could  be left out, but I prefer a less 'pointy'  triangle */    width: 2px;    position: absolute;    top: 10px;     right: 10px;} /* Display on hover */a.sbtooltip:hover:after,  a.sbtooltip:hover:before {    display: block; /* The Speech-bubble  tooltip and pointer will appear on hover */} 

 

 

 

 

 

 

 

خوب همراه با سی اس اس توضیحاتی هم نوشتم که بعدان اگه خواتسی تغییراتی بدهید به مشکل نخورید.

خوب بعد از این باید جی کوئری های که باید باشه رو بزارید!!

 

کد:

 

 

<script  type='text/javascript'  src='js/jquery.sbtooltip.js'></script><script  type="text/javascript"> $(document).ready(function(){                                $("a.sbtooltip").sbTooltip();    }); </script>

 

 

 

 

 

 

 

می تونید فایل جی کوئری را در اخر اموزش دانلود کنید.

خوب حالا همه کار ها رو کردید حال اگه میخواهید هر چیزی که دارای تولتیپی باشد که طریف کردید باید

کد:

 

 

class="sbtooltip" title="matnd ke mikhahid to toltip biad"

 

 

 

 

رو به قسمت پی اچ پی خودتون اضافه کنید مثلا

 

کد:

 

 

<a class="sbtooltip" href="https://go.20script.ir/index.php?url=https://go.20script.ir/index.php?url=&anchor=" title="CSS3 and jQuery">matn azmayeshi</a>

 

 

 

 

 

 

خوب اموزش تموم شد امید وارم از این اموزش خوشتون اومده باشه !!