CSS Tool Tip

by Kaleb Hornsby

HTML

<h1>Test</h1>
<div>
<i class="info">
    <div class="tooltip">
        <div class="arrow"></div>
    <div class="inner">This is my help text, describing the item.</div>
    </div>
</i>
  This is my item.
</div>
<div>
    Hello again.
    <i class="info">
    <div class="tooltip">
        <div class="arrow"></div>
        <div class="inner">This is my help text, describing the item.</div>
    </div>
</i>
</div>

CSS

i.info {
    font-style:normal;
    color:blue;
    position:relative;
    margin-top: 2px;
}
i.info::before {
    content: "(?)";
}
i.info .tooltip {
    display:none;
    position:absolute;
    width:20em;
    border:1px solid black;
    background:black;
    margin-top:5px;
    color:white;
}
i.info:hover .tooltip {
    display:block;
    z-index:1000;
}
.arrow {
    width:0%;
    height:0%;
    position:absolute;
    top: -6px;
    left: 4px;
    margin-left: -5px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid black;
}