Tooltip.js
Tooltip.scss
1.ツールチップ要素の位置情報 (上、左、下、右、幅、高さなど) を表示するには
2. ツールチップの位置 (上、左、下、右のいずれか) を計算します。 right
3. 次に、計算位置の値に従って、座標値を計算します
4. 座標値をツールチップに適用します
1. ownerDocument: document; 2 つのオブジェクトが含まれます:
2. $.contains(domA, domB): domA に domB 要素が含まれているかどうかを判断します
3. offset.setOffset メソッドが適用され、 offset が値を設定するとき、四捨五入ができないため、パラメータが渡されます
4. $viewport: Tooltipr のコンテナ要素を表示します
5. getPosition: この関数は、要素の位置座標に関連する情報を取得します。として: 上、左、下、右、幅、高さ、スクロールなど。
5.1. getBoundingClientRect メソッドは共有されますが、IE8 の場合、このメソッドは幅と高さ
をプラグインします。ボディの幅と高さはウィンドウの
にリセットされます。 5.3. ソース コードは次のとおりです:
$element = $element || <span style="color: #0000ff">this</span>.$element <span style="color: #008000">//</span><span style="color: #008000">如果没有传入参数,则以$element(触发tooltip事件的元素)为准</span> <span style="color: #0000ff">var</span> el = $element[0<span style="color: #000000">] </span><span style="color: #0000ff">var</span> isBody = el.tagName == 'BODY' <span style="color: #0000ff">var</span> elRect =<span style="color: #000000"> el.getBoundingClientRect() </span><span style="color: #0000ff">if</span> (elRect.width == <span style="color: #0000ff">null</span><span style="color: #000000">) { </span><span style="color: #008000">//</span><span style="color: #008000"> width and height are missing in IE8, so compute them manually; see https://github.com/twbs/bootstrap/issues/14093</span> elRect = $.extend({}, elRect, { width: elRect.right - elRect.left, height: elRect.bottom -<span style="color: #000000"> elRect.top }) } </span><span style="color: #0000ff">var</span> elOffset = isBody ? { top: 0, left: 0<span style="color: #000000"> } : $element.offset() </span><span style="color: #0000ff">var</span> scroll = { scroll: isBody ? document.documentElement.scrollTop ||<span style="color: #000000"> document.body.scrollTop : $element.scrollTop() } </span><span style="color: #0000ff">var</span> outerDims = isBody ? { width: $(window).width(), height: $(window).height() } : <span style="color: #0000ff">null</span> <span style="color: #0000ff">return</span> $.extend({}, elRect, scroll, outerDims, elOffset)
6.5. 小さな三角形の位置は通常、要素の 50% ですが、ツールチップが左、上、右、下で隠れている場合は、位置を再計算して調整する必要があります。メソッド名は次のとおりです: getViewportAdjustedDelta
6.5.1. 最初にオーバーフローした幅または高さを計算します
6.5.2. 次に、arrowDelta の値、非表示の値 * 2 – ツールチップの幅 + ツールチップの幅
を計算します。三角形の上または左のパーセント値を設定します
Popover.js
Popover.scss
1. ツールチップの実装を継承します
2. 追加のタイトルがあり、コンテンツをカスタマイズすることもできます (入力、ボタン、その他の対話型コントロールを挿入できます)