Bootstrap4 提示框

提示框是一個小小的彈窗，在鼠標移動到元素上顯示，鼠標移到元素外就消失。

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網綜合服務，包含不限于成都網站設計、成都網站制作、武定網絡推廣、微信小程序開發(fā)、武定網絡營銷、武定企業(yè)策劃、武定品牌公關、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)為所有大學生創(chuàng)業(yè)者提供武定建站搭建服務，24小時服務熱線：028-86922220，官方網址：www.cdcxhl.com

如何創(chuàng)建提示框

通過向元素添加 data-toggle="tooltip" 來來創(chuàng)建提示框。

title 屬性的內容為提示框顯示的內容：

<
a

href
=
"
#
"

data-toggle
=
"
tooltip
"

title
=
"
我是提示內容!
"
>
鼠標移動到我這
a
>

注意: 提示框要寫在 jQuery 的初始化代碼里: 然后在指定的元素上調用 tooltip() 方法。

以下實例可以在文檔的任何地方使用提示框：

實例

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

嘗試一下 ?

指定提示框的位置

默認情況下提示框顯示在元素上方。

可以使用 data-placement 屬性來設定提示框顯示的方向: top, bottom, left 或 right:

實例

<
a

href
=
"
#
"

data-toggle
=
"
tooltip
"

data-placement
=
"
top
"

title
=
"
我是提示內容!
"
>
鼠標移動到我這
a
>

<
a

href
=
"
#
"

data-toggle
=
"
tooltip
"

data-placement
=
"
bottom
"

title
=
"
我是提示內容!
"
>
鼠標移動到我這
a
>

<
a

href
=
"
#
"

data-toggle
=
"
tooltip
"

data-placement
=
"
left
"

title
=
"
我是提示內容!
"
>
鼠標移動到我這
a
>

<
a

href
=
"
#
"

data-toggle
=
"
tooltip
"

data-placement
=
"
right
"

title
=
"
我是提示內容!
"
>
鼠標移動到我這
a
>

嘗試一下 ?

在按鈕中使用:

實例

<
button

type
=
"
button
"

class
=
"
btn btn-secondary
"

data-toggle
=
"
tooltip
"

data-placement
=
"
top
"

title
=
"
Tooltip on top
"
>
Tooltip on top
button
>

<
button

type
=
"
button
"

class
=
"
btn btn-secondary
"

data-toggle
=
"
tooltip
"

data-placement
=
"
right
"

title
=
"
Tooltip on right
"
>
Tooltip on right
button
>

<
button

type
=
"
button
"

class
=
"
btn btn-secondary
"

data-toggle
=
"
tooltip
"

data-placement
=
"
bottom
"

title
=
"
Tooltip on bottom
"
>
Tooltip on bottom
button
>

<
button

type
=
"
button
"

class
=
"
btn btn-secondary
"

data-toggle
=
"
tooltip
"

data-placement
=
"
left
"

title
=
"
Tooltip on left
"
>
Tooltip on left
button
>

嘗試一下 ?

提示內容添加 HTML 標簽，設置 data-html="true"，內容放在 title 標簽里頭:

實例

<
button

type
=
"
button
"

class
=
"
btn btn-secondary
"

data-toggle
=
"
tooltip
"

data-html
=
"
true
"

title
=
"
Tooltip with HTML
"
>
Tooltip with HTML
button
>

嘗試一下 ?

禁用按鈕：

實例

<
span

class
=
"
d-inline-block
"

tabindex
=
"
0
"

data-toggle
=
"
tooltip
"

title
=
"
Disabled tooltip
"
>

<
button

class
=
"
btn btn-primary
"

style
=
"
pointer-events: none;
"

type
=
"
button
"

disabled
>
Disabled button
button
>

span
>

嘗試一下 ?

文章名稱：創(chuàng)新互聯(lián)Bootstrap4教程：Bootstrap4 提示框
標題來源：http://m.5511xx.com/article/cogshdp.html