毎日学習する必要がある Bootstrap ツールチップ プラグイン_JavaScript スキル

ツールチップは、リンクを説明するときに非常に便利です。 Tooltip プラグインは、Jason Frame によって作成された jQuery.tipsy からインスピレーションを受けました。たとえば、Tooltip プラグインは、画像に依存する必要がなくなり、代わりに CSS を使用してアニメーション効果を実現し、データ属性を使用してタイトル情報を保存します。

このプラグインの機能を個別に参照したい場合は、tooltip.js を参照する必要があります。また、ブートストラップ プラグインの概要 の章で説明したように、bootstrap.js または bootstrap.min.js の縮小バージョンを参照することもできます。
1. 使用方法
ツールチップ プラグインは、オンデマンドでコンテンツとマークアップを生成します。デフォルトでは、ツールチップはトリガー要素の後に配置されます。次の 2 つの方法でツールチップを追加できます:

1. data 属性を介して: ツールチップを追加する必要がある場合は、アンカー タグに data-toggle="tooltip" を追加するだけです。アンカーのタイトルはツールヒントのテキストです。デフォルトでは、プラグインはツールチップを上部に設定します。

<a href="#" data-toggle="tooltip" title="Example tooltip">请悬停在我的上面</a>

2. JavaScript 経由: JavaScript 経由でツールチップをトリガー:

$('#identifier').tooltip(options)

Tooltip プラグインは、以前に説明したドロップダウン メニューや他のプラグインとは異なり、純粋な CSS プラグインではありません。プラグインを使用するには、jquery (JavaScript を読み取る) を使用してプラグインを有効にする必要があります。次のスクリプトを使用して、ページ上のすべてのツールヒントを有効にします:

$(function () { $("[data-toggle='tooltip']").tooltip(); });

2. オプション
一部のオプションは、Bootstrap Data API を介して追加されるか、JavaScript を介して呼び出されます。オプションは以下の表にリストされています:

3.ツールチップ

//基本实例

<a href="#" data-toggle="tooltip" title="超文本标识符">HTML5</a>
//JS 部分需要声明

$('#section').tooltip();

ツールチップには、次のようにヒントの表示を構成するためのプロパティが多数あります。

<a href="#" rel="tooltip" data-toggle="tooltip" title="超文本标识符"
 data-animation="false"
 data-html="true"
 data-placement="auto"
 data-selector="a[rel=tooltip]"
 data-trigger="click"
 data-delay="500"
 data-template="<b>123</b>"
>HTML5</a>

JavaScript メソッドは以前のデータを直接削除できます。アニメーション、HTML、配置、セレクター、オリジナルのタイトル、タイトル、トリガー、遅延、コンテナー、テンプレートの属性が含まれます。

//JavaScript 方式

$('#section a').tooltip({
 delay : {
  show : 500,
  hide : 100,
 },
 container : 'body'
});

JavaScript には、表示、非表示、切り替え、破棄の 4 つのメソッドがあります。

//显示
$('#section a').tooltip('show');
//隐藏
$('#section a').tooltip('hide');
//反转显示和隐藏
$('#section a').tooltip('toggle');
//隐藏并销毁
$('#section a').tooltip('destroy');

ツールチップには 4 種類のイベントがあります。

//イベント、その他の同様のイベント

$('#select a').on('show.bs.tooltip', function() {
 alert('调用 show 时触发！');
});

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。