Edit in JSFiddle

<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>

.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: 10px 0;
padding: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background: #0C9B95;
color: #fcfcfc;
font-size: 14px;
display: none;
position: absolute;
}
.Triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 0px 10px 10px 10px;
border-color: transparent transparent #0DA19B transparent;
margin-top: -39px;
margin-left: 10px;
position: absolute;
}
.SimpleText:hover .HoverText{display:block }