Tooltip (CSS Only)

HTML

<div class="element-wrapper">　　
    <label>Label 1 <span class="tooltip-indicator">i</span>

        <div class="tooltip-box">Tooltip Opens up for TEXTBOX1</div>　　</label>　　
    <input type="text" placeholder="information..." />
</div>
<div class="element-wrapper">　　
    <label>Label 2 <span class="tooltip-indicator">i</span>

        <div class="tooltip-box">Tooltip Opens up for TEXTBOX2</div>　　</label>　　
    <input type="text" placeholder="information..." />
</div>
<div class="element-wrapper">　　
    <label>Label 3 <span class="tooltip-indicator">i</span>

        <div class="tooltip-box">Tooltip Opens up for TEXTBOX3</div>　　</label>　　
    <input type="text" placeholder="information..." />
</div>
<div class="element-wrapper">　　
    <label>Label 4 <span class="tooltip-indicator">i</span>

        <div class="tooltip-box">Tooltip Opens up for TEXTBOX4</div>　　</label>　　
    <input type="text" placeholder="information..." />
</div>

CSS

* {
    box-sizing:border-box
}
.element-wrapper {
    padding-bottom:15px;
    font-family:arial;
    font-size:13px;
    width:100%;
    display:inline-block;
    vertical-align:middle;
    text-align:left
}
.element-wrapper label {
    float:left;
    width:80px;
    position:relative
}
.tooltip-indicator {
    background:#f00;
    color:#fff;
    font-size:11px;
    border-radius:10px;
    height:12px;
    width:12px;
    text-align:center;
    cursor:pointer;
    display:inline-block;
    vertical-align:middle
}
.tooltip-indicator:hover + .tooltip-box {
    display:block;
}
.tooltip-box {
    background:#f5f5f5;
    border:solid 1px #ccc;
    border-radius:5px;
    padding:10px;
    position:absolute;
    width:230px;
    top:-3px;
    left:86%;
    display:none
}
.tooltip-box:before {
    content:'';
    position: absolute;
    left: -10px;
    top: 2px;
    height: 0px;
    border-top: solid 8px transparent;
    border-bottom: solid 8px transparent;
    border-right: solid 9px #ccc;
}

JavaScript

In todays modern web development world Tooltip is a very popular element to show useful information.Even you can use the same
for the content which you don’t want to display to users all the time, user can simply click / hover on some of graphic icon or hover on the same
for the information.It is useful to save lots of space on webpage.

Tooltip is a important element
for web developments, so on the air lots of Third party plugins are available with different different approach, using HTML and CSS.

I have created my own
for latest project requirement, using the same HTML and CSS in a simple way without single line of script.

Here are the steps..

First we have to create wrapper of the element with this wrapper we can wrap up all need full content
Second We need Graphic pointer to indicate Tooltip
Third Tooltip element we need to be create where we can contain Tooltip information
Last but not the least CSS
for the styling and position of the Tooltip.

HTML code..

< div class = ”element - wrapper” > 　　 < label > 　　Label　　 < span class = ”tooltip - indicator” > i < /span>
　　<div class=”tooltip-box”>Tooltip Opens up for TEXTBOX2</div > 　　 < /label>
　　<input type=”text” placeholder=”information...” / > < /div>