CSS ToolTip

===========

CSSのToolTipです。ふわっと吹き出しが表示されます。
吹き出しは上部か下部の位置に表示され、色も変更できます。

デモはGitHubをご覧ください。

HTML/CSS

Tag

ロールオーバーでToolTipが表示されます。

<div class="tooltip bottom blue">ここをロールオーバー
  <div class="tooltip-inner">吹き出し風のToolTip
    <div class="tooltip-angle">
      <div class="tooltip-angle-inner"></div>
    </div>
  </div>
</div>

Style

ToolTipの対象

classにtooltipを指定するとロールオーバーの効果で吹き出しが表示されます。

.tooltip {
  position: relative;
}

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

吹き出しの背景と枠

transitionでふわっと表示されるようにします。

.tooltip .tooltip-inner {
  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;
  -webkit-border-radius: 4px;
          border-radius: 4px;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .6s ease-in-out;
  z-index: 10;
}

吹き出しの位置

上部や下部に配置します。

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

吹き出しの背景と枠

背景と枠の色を変更します。

.tooltip.blue .tooltip-inner {
  background-color: #3A87AD;
  border: 2px solid #1F6377;
}
.tooltip.green .tooltip-inner {
  background-color: #468847;
  border: 2px solid #387038;
}
.tooltip.orange .tooltip-inner {
  background-color: #F89406;
  border: 2px solid #AD6704;
}
.tooltip.red .tooltip-inner {
  background-color: #B94A48;
  border: 2px solid #802420;
}

吹き出しの矢印

矢印の位置を調整します。

.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.top .tooltip-angle {
  bottom: -10px;
  border-right: solid 10px transparent;
  border-top: solid 10px #333;
}
.tooltip.top.blue .tooltip-angle {
  border-top: solid 10px #1F6377;
}
.tooltip.top.green .tooltip-angle {
  border-top: solid 10px #387038;
}
.tooltip.top.orange .tooltip-angle {
  border-top: solid 10px #AD6704;
}
.tooltip.top.red .tooltip-angle {
  border-top: solid 10px #802420;
}

矢印の背景（上部）

背景の色を変更します。

.tooltip.top .tooltip-angle-inner {
  bottom: 5px;
  border-right: solid 5px transparent;
  border-top: solid 5px #444;
}
.tooltip.top.blue .tooltip-angle-inner {
  border-top: solid 5px #3A87AD;
}
.tooltip.top.green .tooltip-angle-inner {
  border-top: solid 5px #468847;
}
.tooltip.top.orange .tooltip-angle-inner {
  border-top: solid 5px #F89406;
}
.tooltip.top.red .tooltip-angle-inner {
  border-top: solid 5px #B94A48;
}

矢印の枠（下部）

枠の色を変更します。

.tooltip.bottom .tooltip-angle {
  top: -10px;
  border-right: solid 10px transparent;
  border-bottom: solid 10px #333;
}
.tooltip.bottom.blue .tooltip-angle {
  border-bottom: solid 10px #1F6377;
}
.tooltip.bottom.green .tooltip-angle {
  border-bottom: solid 10px #387038;
}
.tooltip.bottom.orange .tooltip-angle {
  border-bottom: solid 10px #AD6704;
}
.tooltip.bottom.red .tooltip-angle {
  border-bottom: solid 10px #802420;
}

矢印の背景（下部）

背景の色を変更します。

.tooltip.bottom .tooltip-angle-inner {
  top: 5px;
  border-right: solid 5px transparent;
  border-bottom: solid 5px #444;
}
.tooltip.bottom.blue .tooltip-angle-inner {
  border-bottom: solid 5px #3A87AD;
}
.tooltip.bottom.green .tooltip-angle-inner {
  border-bottom: solid 5px #468847;
}
.tooltip.bottom.orange .tooltip-angle-inner {
  border-bottom: solid 5px #F89406;
}
.tooltip.bottom.red .tooltip-angle-inner {
  border-bottom: solid 5px #B94A48;
}

矢印の位置

矢印の位置を左に移動する

.tooltip.tip .tooltip-angle {
  left: 10px;
}

---

Tips

Ruby on Rails

Railsならtooltip_tagのようなhelperを用意すると簡潔に使えます。

# tooltip helper
def tooltip_tag(name, text, options={})
  options[:position] = options[:position] || "bottom"
  content_tag(:div, class: "tooltip #{options[:position]} #{options[:color]} #{options[:label]}") do
    tag = name.html_safe
    tag += content_tag(:span, class: "tooltip-inner") do
      tag = text.html_safe
      tag += content_tag(:span, class: "tooltip-angle") do
        content_tag(:span, nil, class: "tooltip-angle-inner")
      end
    end
  end.html_safe
end