CSS ToolTip

===========

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

デモは[GitHub](http://ogom.github.com/css-tooltip/)をご覧ください。

![tooltip_appear](https://raw.github.com/ogom/css-tooltip/gh-pages/images/tooltip_appear.png)


# HTML/CSS
## Tag
ロールオーバーでToolTipが表示されます。

```html
<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`を指定するとロールオーバーの効果で吹き出しが表示されます。

```css
.tooltip {
  position: relative;
}

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

### 吹き出しの背景と枠
`transition`で***ふわっと***表示されるようにします。

```css
.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;
}
```

### 吹き出しの位置
上部や下部に配置します。

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

### 吹き出しの背景と枠
背景と枠の色を変更します。

```css
.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;
}
```

### 吹き出しの矢印
矢印の位置を調整します。

```css
.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;
}
```

### 矢印の枠（上部）
枠の色を変更します。

```css
.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;
}
```

### 矢印の背景（上部）
背景の色を変更します。

```css
.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;
}
```

### 矢印の枠（下部）
枠の色を変更します。

```css
.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;
}
```

### 矢印の背景（下部）
背景の色を変更します。

```css
.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;
}
```

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

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

---

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

```ruby
# 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
```