CSS Tooltip Example : Plain CSS

CSS tooltip made with purely css and html

by manoj

HTML

<div class="Container">
    <div class="SimpleText">
        <span>Hover On Me</span>
        <span class="HoverText">This is a example of Css ToolTip
        <div class="Triangle"></div>
        </span>
        
    </div>
</div>

CSS

.Container{margin:30%; position: relative;}
.HoverText, .SimpleText{
    display:block
}
.SimpleText span{
    color:#444; 
    font-family:Arial;
    font-size:15px;
    cursor:pointer;
}
Div.SimpleText span.HoverText{
    border: 3px solid #0C9B95;
    margin: -100px 0;
    padding: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background: #0C9B95;
    color:#fcfcfc;
    font-size:14px;
    display:none;
    position: absolute;
}
.SimpleText:hover .HoverText{display:block }
.Triangle{
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 10px 10px 0 10px;
    border-color: #0DA19B transparent transparent transparent;
    margin-top: 12px;
    margin-left: 10px;
    position: absolute;
    
}