Untitled

dabblet.css

body {
    background-color: #fff;
    color: #333;
    font-family: sans-serif;
    font-size: 20px;
    line-height: 1.6em;
}

.example {
    border: 3px solid orange;
    padding: 4px 20px;
}

.example-4 {
    position: relative;
}

.example-4:after {
    position: absolute;
    top: 36px;
    left: 60px;
    border-radius: 8px;
    padding: 4px 8px;
    background-color: #333;
    min-width: 100px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    opacity: 0.0;
    transition: opacity 1s;
    content: attr(data-time);
}

.example-4:before {
    position: absolute;
    top: 26px;
    left: 80px;
	border-color: transparent transparent #333 transparent;
	border-style: solid;
	border-width: 0 10px 10px 10px;
	width: 0;
	height: 0;
    opacity: 0;
    transition: opacity 1s;
	content: '';
}

.example-4:hover:before,
.example-4:hover:after {
	opacity: 0.9;
}
    

dabblet.html

<p>
    <span class="example example-4" data-time="8:05 pm">15 mins ago</span>
</p>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"html"}