ToolTip Hover Balloon’s Via CSS

CSS

/* ToolTip Balloon */
.balloon a:link span{display: none; }
.balloon a:visited span{display: none; }
.balloon a img { border: 0px; }
.balloon a:hover span {
    position: absolute;
    margin:5px 0px 0px 5px;
    background-color: beige;
    max-width:400px;
    padding: 2px 10px 2px 10px;
    border: 1px solid #C0C0C0;
    font: normal 10px/12px verdana;
    text-decoration: none;
    color: #000;
    text-align: left;
    display: block;     
}
.balloon .innerText { width: 300px;  }

ASP.NET

<span class="balloon">
<a href="Javascript:void(0)">
   <img src="../Images/information.png"  />
   <span class="innerText">Type in the JHA ID and click find. Please note, all other fields
                                    will be ignored when using the JHA ID field. 
   </span>
</a>
</span>

Source

Advertisements