Add stylish Tooltip to your links

Add stylish Tooltip to your links
Few days ago I published a post about how to add animated underline to your sites link here I continuing the episode with another idea how to Add Cool Tooltip to your links. The tooltip is a hint is a common graphical user interface element. It is used in conjunction with a cursor, usually a pointer. The user hovers the pointer over an item, without clicking it, and a tooltip may appear—a small "hover box" with information about the item being hovered over. Generally HTML has classic style tooltip as default. Here I ma presenting a updated highend one. It’s a common trick can be found on many top level websites it done by CSS2 and 3. Let’s see how it looks like and how to add it to your links.

Add stylish Tooltip to your links


Preview: 

Add stylish Tooltip to your links


Codes for copy:

CSS:

<style>/*crawlist.net CSS starts*/

/*general style*/
.ks-tt { position: relative; display: inline-block; }
.ks-tt:before, .ks-tt:after {
    position: absolute;
    opacity: 0;
    z-index: 1000000;
    -webkit-transition: 0.3s ease;
    -moz-transition: 0.3s ease;
    pointer-events: none;}
.ks-tt:hover:before, .ks-tt:hover:after {
    opacity: 1;}
.ks-tt:before {
    content: '';
    position: absolute;
    background: transparent;
    border: 6px solid transparent;
    position: absolute;}       
.ks-tt:after {
    content: attr(data-ks-tt);
    background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 8px 10px;
            font-size: 12px;
    white-space: nowrap;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);}



/* top */
.ks-tt--top:before {
    bottom: 100%;
    left: 50%;
    margin: 0 0 -18px 0;
    border-top-color: rgba(0, 0, 0, 0.8);}       
.ks-tt--top:after {
    bottom: 100%;
    left: 50%;
    margin: 0 0 -6px -10px;}
.ks-tt--top:hover:before {
    margin-bottom: -10px;}
.ks-tt--top:hover:after {
    margin-bottom: 2px;}



/* bottom */
.ks-tt--bottom:before {
    top: 100%;
    left: 50%;
    margin: -14px 0 0 0;
    border-bottom-color: rgba(0, 0, 0, 0.8);}       
.ks-tt--bottom:after {
    top: 100%;
    left: 50%;
    margin: -2px 0 0 -10px;}
.ks-tt--bottom:hover:before {
    margin-top: -6px;}
.ks-tt--bottom:hover:after {
    margin-top: 6px;}


/* right */
.ks-tt--right:before {
    left: 100%;
    bottom: 50%;
    margin: 0 0 -4px -8px;
    border-right-color: rgba(0,0,0,0.8);}       
.ks-tt--right:after {
    left: 100%;
    bottom: 50%;
    margin: 0 0 -13px 4px;}
.ks-tt--right:hover:before {
    margin: 0 0 -4px -0;}
.ks-tt--right:hover:after {
    margin: 0 0 -13px 12px;}



/* left */
.ks-tt--left:before {
    right: 100%;
    bottom: 50%;
    margin: 0 -8px -4px 0;
    border-left-color: rgba(0,0,0,0.8);}       
.ks-tt--left:after {
    right: 100%;
    bottom: 50%;
    margin: 0 4px -13px 0;}
.ks-tt--left:hover:before {
    margin: 0 0 -4px 0;}
.ks-tt--left:hover:after {
    margin: 0 12px -13px 0;}
   
/*crawlist.net CSS ends*/</style>


HTML:

<p><a href="#" class="ks-tt  ks-tt--top" data-ks-tt="Upper Tooltip">Upper Tooltip</a></p>

<p><a href="#" class="ks-tt  ks-tt--right" data-ks-tt="Rightside Tooltip">Rightside Tooltip</a></p>

<p><a href="#" class="ks-tt  ks-tt--bottom" data-ks-tt="Bottom Tooltip">Bottom Tooltip</a></p>

<p><a href="#" class="ks-tt  ks-tt--left" data-ks-tt="Leftside Tooltip">Leftside Tooltip</a></p>


  • The CSS contains 5 part first part is main CSS you must put this code into your style sheet it will generate tooltip. And 4 others are the style preference which side (left, right, bottom and top) tooltip you want to use; copy one of them or all of them as you like.
  • The HTML has 4 individual lines for activating and using 4 different styles as your CSS preference. data-ks-tt indicates what will show on your tooltip, data-ks-tt="Place your Tooltip texts" and >Upper Tooltip</a> place your anchor text

Compatibility:
These codes are universal so they will work on any site on web browser.

So what your think about this trick don’t forget to mention, any problem feedback leave via comment. Chill

Popular posts from this blog

13 Best Forum CMS/Script to use

Easily Get 50000 free Backlink for your website

Read Download ePub Harry Potter Books & Apk

7 best CMS/script for building Social networking website

Add Cool Social Media Sharing icons below posts in Blogger

12 best free Article Rewriter/Spinner you can use

Read Download Stephen King's Novels ePub & Apk

Top 6 Best Alternatives to ZBIGZ

10 Best Free Flash Editor software to use

Add Truck style Social Sharing button below posts in Blogger