CSSのTooltipを吹き出し風にして表示する方法

Social_Media_DimSum --Social Media Small Plate Style
CSSのTooltipを吹き出し風にして表示する方法を紹介します。

photo credit: The Daring Librarian via photopin cc





コードは、下記を参考にしました。

http://ogom.github.io/css-tooltip/


メニューバーのSNSアイコンをマウスオーバーした時に、Tooltipを表示するため、HTMLは以下のようになりました。


<ul id='footer_menu'>

<div class="tooltip bottom">
<li><a href='http://mba-hack.blogspot.jp/'><span class='entypo-home'/><div class="tooltip-inner">HOME<div class="tooltip-angle"></div></div></a></li></div>


<div class="tooltip bottom">
<li><a href='http://mba-hack.blogspot.jp/feeds/posts/default' target='blank'><span class='fontawesome-rss'/><div class="tooltip-inner1">RSS<div class="tooltip-angle"></div></div></a></li>
</div>


<div class="tooltip bottom">
<li><a href='http://feeds.feedburner.com/Mba-hack' target='blank'><span class='fontawesome-fire'/><div class="tooltip-inner2">FeedBurner<div class="tooltip-angle"></div></div></a></li>
</div>


<div class="tooltip bottom">
<li><a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fmba-hack.blogspot.jp%2Ffeeds%2Fposts%2Fdefault' target='blank'><img alt='follow us in feedly' height='28' id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-logo-black_2x.png' width='28'/><div class="tooltip-inner3">Feedly<div class="tooltip-angle"></div></div></a></li>
</div>

</ul>



次は、CSSです。色々と変更、追加があります。ソースからの変更箇所は、分かりやすいようにスペースを入れました。角丸は取り外しています。


また、アイコンを個別に対応させるために、 .tooltip-inner1~3まで作り、対応しています。具体的には、それぞれのアイコンにTooltipの表示位置を leftで指定します。


/* tooltip */
/* http://qiita.com/ogomr/items/99a2986bd04975f71f4e */

.tooltip {
position: relative;
}

.tooltip:hover .tooltip-inner {
visibility: visible;
opacity: .9;
}

.tooltip .tooltip-inner {
   font-size:12px;
position: absolute;
display: block;
text-align: center;
text-decoration: none;
font-weight: bold;
left: 10px;
padding: 4px 6px;
max-width: 200px;
color: #ffffff;
background-color: #444;
border: 2px solid #333;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity .6s ease-in-out;
z-index: 10;
}

.tooltip.bottom .tooltip-inner {
margin-top: 8px;
}

/*tooltip_c_1*/
.tooltip:hover .tooltip-inner1 {
visibility: visible;
opacity: .9;
}

.tooltip .tooltip-inner1 {
font-size:12px;
position: absolute;
display: block;
text-align: center;
text-decoration: none;
font-weight: bold;
   left: 60px;
padding: 4px 6px;
max-width: 200px;
color: #ffffff;
background-color: #444;
border: 2px solid #333;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity .6s ease-in-out;
z-index: 10;
}

.tooltip.bottom .tooltip-inner1 {
margin-top: 8px;
}
/*tooltip_c_1*/

/*tooltip_c_2*/
.tooltip:hover .tooltip-inner2 {
visibility: visible;
opacity: .9;
}

.tooltip .tooltip-inner2 {
font-size:12px;
position: absolute;
display: block;
text-align: center;
text-decoration: none;
font-weight: bold;
   left: 100px;
padding: 4px 6px;
max-width: 200px;
color: #ffffff;
background-color: #444;
border: 2px solid #333;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity .6s ease-in-out;
z-index: 10;
}

.tooltip.bottom .tooltip-inner2 {
margin-top: 8px;
}
/*tooltip_c_2*/

/*tooltip_c_3*/
.tooltip:hover .tooltip-inner3 {
visibility: visible;
opacity: .9;
}

.tooltip .tooltip-inner3 {
font-size:12px;
position: absolute;
display: block;
text-align: center;
text-decoration: none;
font-weight: bold;
   left: 170px;
padding: 4px 6px;
max-width: 200px;
color: #ffffff;
background-color: #444;
border: 2px solid #333;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity .6s ease-in-out;
z-index: 10;
}

.tooltip.bottom .tooltip-inner3 {
margin-top: 8px;
}
/*tooltip_c_3*/

.tooltip-angle {
position: absolute;
border-left-width: 0;
line-height: 0;
left: 20%;
}

.tooltip-angle-inner {
position: absolute;
border-left-width: 0;
line-height: 0;
left: 2px;
}

.tooltip.bottom .tooltip-angle {
top: -10px;
   border-left: solid 10px transparent;
border-bottom: solid 10px #333;
}

.tooltip.bottom .tooltip-angle-inner {
top: 5px;
   border-right: solid 0px transparent;
border-bottom: solid 5px #444;
}

/* tooltip */