Circular Tooltip

Pure CSS circular tooltip menu

by bruscopelliti

HTML

<!-- content to be placed inside <body>…</body> -->
<a class='button ctrl' href='#' tabindex='1'>★</a>

<ul class='tip ctrl'>
    <li class='slice'><a href='#'>✦</a>
    </li>
    <li class='slice'><a href='#'>✿</a>
    </li>
    <li class='slice'><a href='#'>✵</a>
    </li>
    <li class='slice'><a href='#'>✪</a>
    </li>
    <li class='slice'><a href='#'>☀</a>
    </li>
</ul>

CSS

/**
 * Circular Tooltip (SO)
 * http://stackoverflow.com/q/13132864/1397351
 */
 * {
    margin: 0;
    padding: 0;
}
body {
    overflow: hidden;
    background: url(http://theearlcarlson.com/experiments/amTooltip/img/bg.jpg) no-repeat;
}
/* generic styles for button & circular menu */
 .ctrl {
    position: absolute;
    top: 50%;
    left: 50%;
    font: 1.5em/1.13 Verdana, sans-serif;
    -webkit-transition: .5s;
}
/* generic link styles */
 a.ctrl, .ctrl a {
    display: block;
    opacity: .56;
    background: #c9c9c9;
    color: #7a8092;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 -1px dimgrey;
}
a.ctrl:hover, .ctrl a:hover, a.ctrl:focus, .ctrl a:focus {
    opacity: 1;
}
a.ctrl:focus, .ctrl a:focus {
    outline: none;
}
.button {
    z-index: 2;
    margin: -.625em;
    width: 1.25em;
    height: 1.25em;
    border-radius: 50%;
    box-shadow: 0 0 3px 1px white;
}
/* circular menu */
 .tip {
    z-index: 1;
    /**outline: dotted 1px white;/**/
    margin: -5em;
    width: 10em;
    height: 10em;
    -webkit-transform: scale(.001);
    list-style: none;
    opacity: 0;
}
/* the ends of the menu */
 .tip:before, .tip:after {
    position: absolute;
    top: 34.3%;
    width: .5em;
    height: 14%;
    opacity: .56;
    background: #c9c9c9;
    content:'';
}
.tip:before {
    left: 5.4%;
    border-radius: .25em 0 0 .25em;
    box-shadow: -1px 0 1px dimgrey, inset 1px 0 1px white, inset -1px 0 1px grey, inset 0 1px 1px white, inset 0 -1px 1px white;
    -webkit-transform: rotate(-75deg);
}
.tip:after {
    right: 5.4%;
    border-radius: 0 .25em .25em 0;
    box-shadow: 1px 0 1px dimgrey, inset -1px 0 1px white, inset 1px 0 1px grey, inset 0 1px 1px white, inset 0 -1px 1px white;
    -webkit-transform: rotate(75deg);
}
/* make the menu appear on click */
 .button:focus + .tip {
    -webkit-transform: scale(1);
    opacity: 1;
}
/* slices of the circular menu */
 .slice {
    overflow: hidden;
    position: absolute;
   ...