Untitled

dabblet.css

div.tip{
	margin:100px 150px;
	width:25px;
	height:25px;
	border:1px solid orange;
	border-radius:50%;
	background:linear-gradient(top,  #f9f44a 2%, #ffa51e 61%, #d17308 100%);
	position:relative;
}
.tip:hover:before, .tip:hover:after,
.tip.hover.before, .tip.hover.after{
    display:block;    
}

.tip:after, .tip:before {
    display:none;
    position:absolute;
    font-size:0.8em;
}

.tip:after {/*tip*/
    content:'';
    border:7px solid transparent;
    border-right:10px solid rgba(0,0,0,0.7);
    height:0;
    width:0;
    left:20px;
    top:5px;
}
.tip:before {/* text*/
    background-color:rgba(0,0,0,0.7);
    border-radius:5px;
    box-shadow:0px 1px 8px rgba(0, 0, 0, 0.35), 0px 0px 2px rgba(0, 0, 0, 0.1);

    vertical-align:middle;

    color:#fff;
    
    height:30px;
    line-height:30px;
    width:140px;
    padding:0 10px;

    left:37px;
    top:-2px;
    
	font-family: MuseoSansRounded700;
    content:attr(data-title);
}

.tip.horiz:before {
    top:-40px;
    left:-65px;
    text-align:center;
}

.tip.horiz:after {
    border:7px solid transparent;
    border-top:10px solid rgba(0,0,0,0.7);
    left:5px;
    top:-10px;
}         

dabblet.html

<div class="tip" data-title="Cover"></div>
<div class="tip horiz" data-title="Chapter 1"></div>

settings.json

{"page":"css","view":"split"}