1。ツールチップ（プロンプトボックス）
ソースコードファイル：
tooltip.js
tooltip.scss
実装の原則：
1.表示する要素の位置情報情報を取得します（上、左、下、右、幅、高さなど）
2。ツールチップの位置を計算します。ツールチップは、上部、左、下、右の1つです。
3.次に、計算された位置値に基づいて座標値を計算します
4。ツールチップに座標値を適用します
ソースコード分析：
1。所有者document：document; 2つのオブジェクトが含まれています：<doctype>、documentlement（rootノード）
2。$ .CONTAINS（DOMA、DOMB）：DOMAにDomb要素が含まれているかどうかを判断します
3.オフセットセットオフセットメソッドが適用され、使用パラメーターが渡されます。オフセットが設定されている場合、丸められないためです。
4。$ビューポート：ToolTiprのコンテナ要素を表示します
5。取得：この関数は、上、左、下、右、幅、高さ、スクロールなどの要素位置決め座標に関連する情報を取得します。
5.1。 GetBoundingClientRectメソッドが使用されますが、この方法ではIE8の幅と高さを差し込むことができます。
5.2。ボディの場合、幅と高さがウィンドウにリセットされます
5.3。ソースコードは次のとおりです。
$ element = $ element || $ element //パラメーターが渡されない場合、$ element（ツールチップイベントをトリガーする要素）はデフォルトのvar el = $ element [0] var isbody = el.tagname == 'body' var elrect = el.getboundingclientrect（）if（elrect.width == null）{// https://github.com/twbs/bootstrap/issues/14093 elrect = $ .extend（{}、elrect、{width：elrect.right -elrect.left、height：elrect.bottom -elrect.top}）} var eloffset = {TOP：0、左：0}：$ element.offset（）var scroll = {scroll：isbody？ document.documentlement.scrolltop || document.body.scrolltop：$ element.scrolltop（）} var outourdims = isbody？ {width：$（window）.width（）、height：$（window）.height（）}：nullreturn $ .extend（{}、elrect、scroll、outourdims、eloffset）6.GetCalculatedOffset：幅と高さの折り畳み原理を使用してそれを実装するツールチップの座標値を計算します
6.1。一番下の時間
6.1.1。上部は、ポジショニング要素のトップ +高さ（POS）です
6.1.2。左は位置決め要素の幅（POS） /2ツールチップ要素幅 /2
6.2。トップの場合
6.2.1。上部は、要素（POS）を見つけるトップツール要素の高さです。
6.2.2。左は位置決め要素の幅（POS） /2ツールチップ要素幅 /2
6.3。残っているとき
6.3.1。上部は、トップポジショニング要素（POS）高さ/2ツールチップ要素の高さ/2です
6.3.2。左は、要素（POS）を見つける左のツールチップ要素の幅です。
6.4。右
6.4.1。上部は、トップポジショニング要素（POS）高さ/2ツールチップ要素の高さ/2です
6.4.2。左は位置決め要素の幅（POS）です
6.5。小さな三角形の位置は、一般に要素の50％です。ただし、ツールチップが左、上、右、下部に隠されている場合、再計算して調整する必要があります。メソッド名は次のとおりです。GetViewPortAdjustedDelta
6.5.1。最初にオーバーフローの幅または高さを計算します
6.5.2。次に、arrowdeltaの値を計算し、値 * 2ツールチップ幅 +ツールチップ幅を非表示にします
6.5.3。三角形の上部または左パーセントの値を設定します
2。ポップオーバー（ポップアップボックス）
ソースコードファイル：
popover.js
popover.scss
実装の原則：
1。ツールチップの実装を継承します
2。追加のタイトルを使用すると、コンテンツをカスタマイズすることもできます（入力やボタンなどのインタラクティブコントロールを挿入できます）
それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記はこの記事に関するものです。誰もがJavaScriptプログラミングを学ぶことが役立つことを願っています。