【jQuery】ツールチップを生成Angular Tooltips

Angular Tooltipsはangularjsを使って要素にツールチップを生成するjQueryプラグインです。
設定が色々と出来そうなのでメモ。

オプション

ツールチップの位置

tooltip-side=””でツールチップの表示設定することができます。

<a href="#" tooltips tooltip-title="tip" tooltip-side="top">Tooltip me</a>
<a href="#" tooltips tooltip-title="tip" tooltip-side="bottom">Tooltip me</a>
<a href="#" tooltips tooltip-title="tip" tooltip-side="left">Tooltip me</a>
<a href="#" tooltips tooltip-title="tip" tooltip-side="right">Tooltip me</a>

ツールチップのタイトル

tooltip-title=””かtitle=””でタイトルの設定ができます。

<a href="#" tooltips tooltip-title="tip" tooltip-title="Hey" tooltip-content="<i>Woa!</i>">Tooltip me</a>
<a href="#" tooltips tooltip-title="tip" title="Hey" tooltip-content="<i>Woa!</i>">Tooltip me</a>

ツールチップサイズ

tooltip-size=””でツールチップのサイズを設定することができます。

<a href="#" tooltips tooltip-title="tip"  tooltip-size="small">Tooltip me</a>
<a href="#" tooltips tooltip-title="tip" tooltip-size="medium">Tooltip me</a>
<a href="#" tooltips tooltip-title="tip" tooltip-size="large">Tooltip me</a>

この他にもビューコントローラや速度などの設定もできるようです。
詳しくは下記デモ・ダウンロードから確認してください。

 

【jQuery】ツールチップを生成Angular Tooltips

  • LATEST
  • RELATED
  • POPULAR