javascriptを使用せず、CSS3のみでTooltipを実装します。

サンプル

コード

コード全体は sujoyu/balloon-annotation · GitHub に上げてあります。

.balloon-annotation {
    display: inline-block;
    color: #2785C0;
    cursor: default;
}

.balloon-annotation > .balloon-annotation-body {
    display: inline-block;
    visibility: hidden; /* フェードインアニメーションのため、display: none;は使いません */
    position: absolute;
    z-index: 100;
    margin: -16px 0 0 16px;
    padding: 16px 24px;
    border-radius:3px;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
    background-color: #2C3E50;
    max-width: 700px;
    color: #FFF;
    font-size: small;
    justify-content: center;
    opacity: 0; /* フェードアウトアニメーションのため、初期値は透過です */
　　
　　/* visibilityはopacityのアニメーション後に切り替えるためdelay 200msです */
    transition: opacity 200ms ease 0s, visibility 0ms linear 200ms; 
}

.balloon-annotation:hover > .balloon-annotation-body {
    visibility: visible;
    opacity: 1;　/* フェードインアニメーションのため、ロールオーバー時は不透明です */

    /* visibilityはopacityのアニメーション前に切り替えるためdelay 0です */
    transition: opacity 300ms ease 0s, visibility 0ms linear;
}

/*
Balloon beak.
*/
.balloon-annotation > .balloon-annotation-body:before {
    display: inline-block;
    position: absolute;
    margin-left: -30px;
    border-width: 6px 6px 6px medium;
    border-style: solid solid solid none; /* borderの1辺だけをnoneにすると三角形になります */
    border-color: transparent #2C3E50;
    content: "";
}