4.20、Bootstrap V4自學之路-----內容---提示框

我預計要歇菜，mark！

概述

在使用提示框插件的時候你須要知道這些：

• 提示框依賴第三方庫Tether實現定位。你必須在bootstrap.js以前調用 tether.min.js，才能使提示框起做用。

• 提示框須要依賴提示冒泡插件。

• 出於性能的緣由，提示框是選擇性加入的，因此你必須本身初始化它們。

• 標題零長度的提示框不會顯示出來。

• 指定container: 'body'以免複雜組件（好比說輸入框組，按鈕組，等等）中的渲染問題。

• 在隱藏的元素上觸發的提示框不會起做用。

• 若是從一個跨多行的連接上觸發提示框，提示框將居中。在<a>上使用white-space:nowrap;能夠避免這種狀況。

示例：在任何地方啓用提示框

在網頁上初始化全部的提示框的一個途徑是用data-toggle屬性選中它們：

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

示例：使用container選項

若是你在一個父元素上有一些樣式與提示框產生干擾，你能夠指定一個自定義的container，這樣提示框的HTML將出如今這個元素內部了。

$(function () {
   $('.example-popover').popover({
        container: 'body'   
   }) 
})

靜態提示框

歇菜。。。

現場演示

<button type="button" class="btn btn-lg btn-danger bd-popover" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

歇菜，出不來呀。。。

四個方向

例子是這個例子，可是我懷疑仍是JS引入的不對。

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

    在下一次點擊時撤回

使用focus觸發器，會在用戶下一次點擊時抹除提示框。

爲dismiss-on-next-click明確標記

爲了適當的跨瀏覽器和跨平臺表現，你必須使用<a>標記。不能是<button>標記，並且<a>還必須包含一個tabindex屬性。

$('.popover-dismiss').popover({
   trigger: 'focus' 
})

用法

利用JavaScript啓用提示框：

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

選項

能夠利用data屬性或者JavaScript傳遞選項。若是用data屬性，請把選項名追加到data-後面，好比說寫成data-animation=""。

$().popover(options) 爲一個元素集合初始化提示框。

.popover('show') 顯示一個元素的提示框。**在提示框真正顯示以前返回給調用者**（也就是，在`shown.bs.popover`事件發生以前）。這被視爲提示冒泡的一次「人爲」觸發。零長度標題零長度內容的提示框不會顯示。

$('#element').popover('show')

.popover('hide') 隱藏一個元素的提示框。

**在提示框真正隱藏以前返回給調用者**（也就是，在`hidden.bs.popover`事件發生以前）。這被視爲提示框的一次「人爲」觸發。 Copy

$('#element').popover('hide')

  .popover('toggle') 切換一個元素的提示框。

**在提示框真正顯示或隱藏以前返回給調用者**（也就是，在 `shown.bs.popover`或`hidden.bs.popover`事件發生以前）。這被視爲提示框的一次「人爲」觸發。 Copy

$('#element').popover('toggle')

  .popover('destroy') 隱藏並銷燬一個元素的提示框。

使用委派的提示框（建立時使用了[`selector`選項](#options)）不能在後代觸發元素上被單獨銷燬。 Copy

$('#element').popover('destroy')

事件

名稱	類型	默認值	描述
animation	boolean	true	對提示框應用一個CSS褪色過渡
container	string | false	false	向一個特定元素追加提示框。示例：container: 'body'。這個選項在某些時候特別有用，好比說它容許你在文檔流中在觸發元素附近定位提示框--這將防止在窗口調整大小的時候，提示框飄到遠離觸發元素的位置。
content	string | function	''	若是data-content屬性不存在，提供默認的content值。 若是提供了一個函數，調用這個函數時，函數的this引用被設置爲附加提示框的元素。
delay	number | object	0	延遲顯示或延遲隱藏提示框（以毫秒計）——它不會應用到人爲觸發類型。 若是向這個選項提供一個數字，顯示和隱藏都會應用這個延遲。 對象結構是delay: { "show": 500, "hide": 100 }
html	boolean	false	向提示框插入HTML。若是值爲false，將使用jQuery的text方法向DOM插入內容。若是你擔憂跨站腳本攻擊的話，請使用text。
placement	string | function	'right'	如何定位提示框：`top`、 `bottom`、`left`、`right`、`auto`。 若是指定了`auto`，它會動態地調整提示框的位置。舉個例子，若是placement是`auto left`，提示框將盡量地顯示在左側，不然顯示在右側。 若是用一個函數來決定placement，會調用提示框的DOM節點做爲第一個參數，而後觸發元素的DOM節點是第二個參數。this的上下文設置爲提示框的實例。
selector	string	false	若是提供了一個選擇器，提示框將被委派給指定的目標。在實踐中，它讓動態添加的HTML內容也能附加提示框。看這裏和一個翔實的例子。
template	string	'<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'	在建立提示框時使用HTML。 提示框的title將注入到.popover-title裏面。 提示框的content將注入到.popover-content裏面。 .popover-arrow將變成提示框的箭頭 最外層的包裹元素必須擁有.popover類。
title	string | function	''	若是title屬性不存在，提供默認的title值。 若是提供了一個函數，調用這個函數時，函數的this引用被設置爲附加提示框的元素。
trigger	string	'click'	如何觸發提示框——`click`、`hover`、`focus`、`manual`。你能夠傳遞多個觸發器，用空格隔開它們。可是`manual`不能用別的觸發器結合使用。
constraints	Array	'hover focus'	一個約束數組，傳遞給Tether。欲知更多請查詢Tether的約束文檔
offsets	string	'0 0'	提示框相對於目標的偏移，欲知更多請查詢Tether的偏移文檔。

事件類型	描述
show.bs.popover	當調用show實例方法時，會當即觸發該事件。
shown.bs.popover	當提示框對用戶來講可見時（須要等待CSS過渡完成），會觸發該事件。
hide.bs.popover	當調用hide實例方法時，會當即觸發該事件。
hidden.bs.popover	當提示框對用戶來講終於完成隱藏時（須要等待CSS過渡完成），會觸發該事件。

$('#myPopover').on('hidden.bs.popover', function () {
   // do something… 
})