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;
	cursor:pointer;
}
.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:before {/* text*/
    background: 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:44px;
    line-height:44px;
    width:140px;
    padding:0 20px;

    left:48px;
    margin-top:50%;
    top:-22px;
    
	font-family: MuseoSansRounded700;
    content:attr(data-title);
} 

.tip.current:after{
	background:url(http://tests.arieh.co.il/current.png) 0 0 no-repeat;
	height:40px;
	width:19px;
	display:block;
	border:0;
	top:-20px;
	left:37px
}

.tip:after, 
.tip.current:hover:after {
    content:'';
    border:11px solid transparent;
    border-right:13px solid rgba(0,0,0,0.6);
    height:0;
    width:0;
    left:24px;
    /* vertical align */
    top:-11px;
    margin-top:50%;
    background:none;
}

dabblet.html

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

settings.json

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