/*
===
4.5 Tooltip
===

### Tooltip

ツールチップを生成します。

#### HTML

```html
<li class="js-tooltip">
  <a href="#">Tooltip</a>
  <ul class="js-tooltip__child">
    <li>
      <a href="#">Tooltip Child</a>
    </li>
  </ul>
</li>
```

[アコーディオン](section-4.html#link-4)と組み合わせて、画面幅が大きいときにはツールチップ、小さいときには[アコーディオン](section-4.html#link-4)といったように実装できます。

```html
<li class="js-tooltip js-accordion">
  <a href="#">Tooltip</a>
  <ul class="js-tooltip__child js-accordion__content">
    <li>
      <a href="#">Tooltip Child</a>
    </li>
  </ul>
  <a class="js-accordion__switch" href="#" aria-label="TOGGLE"></a>
</li>
```

#### JavaScript

第一引数に、ツールチップを表示する最小の[Media Query Mixin](index.html#link-3)の`$query`変数の数を指定します。

```js
document.addEventListener('DOMContentLoaded', () => {
  const minQuery = 1;
  new Frontwork.Tooltip(minQuery);
});
```

#### SCSS

ツールチップの見た目を補助するMixinが用意されています。

```scss
@include media-query-asc {
  @if $query == 1 {
    @include tooltip;
  }
}
```

*/

@mixin tooltip {

  .js-tooltip__child {
    display: block !important;
    visibility: hidden;
    position: absolute;
  }

  .js-tooltip.is-hover .js-tooltip__child,
  .js-tooltip.is-focus .js-tooltip__child {
    visibility: visible;
  }

}