如何在 Bootstrap 中为一个链路设置多个数据切换?

jc3wubiy  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(6)|浏览(121)

我有一个链接,我想为它设置一个引导工具提示,我也想让它显示一个引导模式。要显示一个模式,代码如下:

<a href="#myModal" role="button" data-toggle="modal">Show</a>

下面是引导工具提示:

<a data-placement="right" data-toggle="tooltip" rel="tooltip" data-original-title='Hello' href="#"></a>

现在如何合并它。组合意味着有一个链接,显示模态,并有一个引导工具提示太?

y3bcpkx1

y3bcpkx11#

我发现了问题:

<a href="#myModal" role="button" data-toggle="modal" rel="tooltip" data-original-title='Hello'>Show</a>

就这样

mfuanj7w

mfuanj7w2#

我更愿意使用这样的 Package 元素:

<span data-placement="right" data-toggle="tooltip" title="Hello">
    <a href="#myModal" role="button" data-toggle="modal">Show</a>
</span>

这对我来说似乎更直接。看下面这个:http://www.bootply.com/zqJRSAjSuQ

8ehkhllq

8ehkhllq3#

您不需要使用data-toggle作为工具提示,您可以更改为您想要的,例如data-tt

<a href="#myModal" role="button" data-toggle="modal" data-tt="tooltip" title="hi">Show</a>

并在javascript中初始化:

$("[data-tt=tooltip]").tooltip();

JsFiddle

xienkqul

xienkqul4#

★可能还需要对它进行初始化:我需要在页面底部初始化它。

$("[rel='tooltip']").tooltip();
vxf3dgd4

vxf3dgd45#

将数据属性添加到元素:

<a data-toggle="modal" data-hover="tooltip" title="Click to Open" data-placement="right" href="#"></a>

并在javascript中初始化:

$("[data-hover='tooltip']").tooltip();
vfh0ocws

vfh0ocws6#

当工具提示放错位置时,您可能需要考虑使用div而不是span元素...
根据F.L.的回答,这对我很有效:

<div data-placement="right" data-toggle="tooltip" title="Hello">
    <a href="#myModal" role="button" data-toggle="modal">Show</a>
</div>

相关问题