Dreamtheweb.com

Hi friend's today i am explain about stylish tool tip  for asp.net with animated effects .
It is very easy to embed to your webpages.You can also  see change gridview row color based on data
and hide or visible div tag on button click .


ASp.net page.

<form id="form1" runat="server">
    <div>
      
      <div style="margin-top:150px">
    dreamtheweb.com
            <a href="#" class="tt">? <span class="tt-info"> (Tool tip Information )</span> </a>
     
       </div>
    </div>
    </form>

.CSS  
  <style type="text/css">
    .tt
    {
    background-color:#e2e2e2;
    color:#878787;
    border-radius:50%;
    padding:2px 4px;
    display:inline-block;
    position:relative;
    line-height:1;
    font-size:9px;
    font-size:0.9rem;
    -webkit-transition:all 300ms ease;
    transition:all 300ms ease
    }


.tt-info{
font-size:1.2rem;
bottom:42px;
display:none;
position:absolute;
width:200px;
margin-left:-20px;
padding:10px;
color:#383838;
background:#fff;
border-collapse:separate;
box-shadow:0 0 5px 0 rgba(0,0,0,0.2);
border:1px solid #009FC4;
text-align:center;
line-height:1.2
}
.tt-info:before,.tt-info:after
{
    content:"";
    width:0;
    height:0;
    margin:0 0 0 -10px;
    position:absolute;
    left:20px;
    bottom:-24px;
    border-width:12px;
    border-style:solid;
    border-color:#009FC4    transparent transparent
    }
    .tt-info:after
    {
        bottom:-23px;
        border-color:#fff transparent transparent;
        }

            @-moz-document url-prefix()
            {.tt-info{opacity:0;
            display:block;
            pointer-events:none;
            transition:all 300ms ease-out;
            transform:scale(0.75) rotateX(90deg);
            transform-origin:50% 100%
            }
            .tt:hover .tt-info,.tt.opened .tt-info
            {
                opacity:1;
                 transform:scale(1) rotateX(0)
            }
    </style>

Tips: You can easy to change width,color ,font size etc on .tt-info class style.