BootStrap のポップアップ ボックス (Popover) は、ポップアップ レイヤー上でのマウスの移動をサポートしています。 ポップアップ ウィンドウ レイヤーが非表示にならない理由と解決策。

ポップオーバーはツールチップに似ており、拡張ビューを提供します。ポップオーバーをアクティブにするには、ユーザーは要素の上にマウスを移動するだけです。ポップアップ ボックスの内容はすべて、Bootstrap Data API を使用して入力できます。この方法はツールチップに依存します。

1 遅延を設定します。遅延後にポップアップ ウィンドウが移動しない場合、ポップアップ ウィンドウは非表示になります。 >

2 制御できません Tooltip.prototype.enter = function (obj) { > の

Tooltip.prototype.init = function{中的
var triggers = this.options.trigger.split(' ')后面加上
//设置延时
if (this.options.trigger.indexOf('hover') > -1) {
$.extend(true, this.options, { delay: { hide: 100 } });
}

clearTimeout(self.timeout) の後に、消えたコード

が追加されます

以下はポップアップボックス (Popover) の使い方の補足です

ポップアップボックス (Popover) プラグインはコンテンツを生成しますデフォルトでは、ポップオーバーはトリガー要素の後ろに配置されます。ポップオーバーは 2 つの方法で追加できます:

if (self.options.trigger.indexOf('hover') > -1) {
self.$tip.unbind('mouseenter').bind('mouseenter', function (e) {
self.$tip.data('data-element', self.$element);//触发popover框的点击事件时可以获取id
clearTimeout(self.timeout);
self.hoverState = 'in';
}).unbind('mouseleave').bind('mouseleave', function (e) {
self.hoverState = 'out';
self.timeout = setTimeout(function () {
if (self.hoverState == 'out') self.hide()
}, self.options.delay.hide)
})
}

data 属性経由: ポップオーバーを追加するには、アンカー/ボタン タグに data-toggle= を追加するだけです。単に「ポップオーバー」です。アンカーのタイトルはポップオーバーのテキストです。デフォルトでは、プラグインはポップオーバーを上部に配置します。

JavaScript 経由: JavaScript 経由でポップオーバーを有効にする:

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

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

上記はこの記事の全内容です。その他の関連チュートリアルについては、

ブートストラップ ビデオ チュートリアルをご覧ください。

!

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