Tooltips

      No Comments on Tooltips

Tooltips are text that appear on hover of an element.

See the Pen Tooltips by scanfcode (@scanfcode) on CodePen.

Tooltips using CSS

HTML:

<div class="input_cnt">
 <label>TOOL TIP RIGHT : </label><br>
 <input type="text" required />
 <span class="tooltip1">Right tool tip content</span>
</div>
<div class="input_cnt">
  <span class="tooltip2">Top tool tip content</span>
 <label>TOOL TIP ABOVE : </label><br>
 <input type="text" required />
</div>

CSS:


/* right tool tip */
.tooltip1{
    background-color:#009900;
    padding:5px;
    width:240px;
    position:relative;
    display:none;
    color:#fff;
    text-align:left;
    font-size:14px;
    margin:1px 10px;
 
    /* outline radius for mozilla/firefox only */
    -moz-box-shadow:0 0 10px #000;
    -webkit-box-shadow:0 0 10px #000;
}

.tooltip1::after {
    content: "";
    position: absolute;
    top: 0%;
    right: 100%;
    margin-top: 0px;
    border-width: 13px;
    border-style: solid;
    border-color: transparent  #009900 transparent transparent;
}

/* top tool tip */
.tooltip2{
    background-color:#fff;
    border:2px solid #003399;
    border-radius:5px;
    padding:5px;
    width:270px;
    position:relative;
    display:none;
    color:#003399;
    text-align:left;
    font-size:14px;
    margin:1px 10px;
    left:50px;
    top:130px;
    /* outline radius for mozilla/firefox only */
    -moz-box-shadow:0 0 10px #000;
    -webkit-box-shadow:0 0 10px #000;
}
.tooltip2::after {
    content: "";
    position: absolute;
    top:100%;
    right:45%;
    margin-top: 0px;
    border-width: 13px;
    border-style: solid;
    border-color:#003399 transparent  transparent  transparent;
}
/* css causing the tool tip to hover */
.input_cnt:hover .tooltip1 ,.input_cnt:hover .tooltip2
{
    display:inline;position:absolute;
}

Summary
Tooltips
Article Name
Tooltips
Description
Tooltips are text that appear on hover of an element. Tooltips using CSS are easy way to add more information to inputs or text content.
Author
Publisher Name
Scanfcode
Publisher Logo

Leave a Reply

Your email address will not be published. Required fields are marked *