Bootstrap4 提示框

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

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

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

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

title 屬性的內(nèi)容為提示框顯示的內(nèi)容：

<
a

href
=
"
#
"

data-toggle
=
"
tooltip
"

title
=
"
我是提示內(nèi)容!
"
>
鼠標(biāo)移動到我這
a
>

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

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

實例

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

嘗試一下 ?

指定提示框的位置

默認(rèn)情況下提示框顯示在元素上方。

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

實例

<
a

href
=
"
#
"

data-toggle
=
"
tooltip
"

data-placement
=
"
top
"

title
=
"
我是提示內(nèi)容!
"
>
鼠標(biāo)移動到我這
a
>

<
a

href
=
"
#
"

data-toggle
=
"
tooltip
"

data-placement
=
"
bottom
"

title
=
"
我是提示內(nèi)容!
"
>
鼠標(biāo)移動到我這
a
>

<
a

href
=
"
#
"

data-toggle
=
"
tooltip
"

data-placement
=
"
left
"

title
=
"
我是提示內(nèi)容!
"
>
鼠標(biāo)移動到我這
a
>

<
a

href
=
"
#
"

data-toggle
=
"
tooltip
"

data-placement
=
"
right
"

title
=
"
我是提示內(nèi)容!
"
>
鼠標(biāo)移動到我這
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
>

嘗試一下 ?

提示內(nèi)容添加 HTML 標(biāo)簽，設(shè)置 data-html="true"，內(nèi)容放在 title 標(biāo)簽里頭:

實例

<
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
>

嘗試一下 ?

網(wǎng)頁標(biāo)題：創(chuàng)新互聯(lián)Bootstrap4教程：Bootstrap4 提示框
URL地址：http://fisionsoft.com.cn/article/cogshdp.html