使用Bootstrap 5创建自定义工具提示

8dtrkrch 于 9个月前发布在 Bootstrap

关注(0)|答案(2)|浏览(114)

我正在使用Bootstrap 5并尝试创建自定义工具提示。我在这里看到了Bootstrap 5文档中使用的标记。
引导5工具提示标记
我收集（并在网上查找）工具提示不在调用元素中，而是兄弟元素。我试图使用一个自定义类，如下面的标记。

// CSS test option #1
.custom-tooltip + .tooltip > .tooltip-inner
{
    text-align: left;
    max-width: 500px;
}

// CSS test option #2
.custom-tooltip ~ .tooltip > .tooltip-inner
{
    text-align: left;
    max-width: 500px;
}

<span class="custom-tooltip" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" title="The tooltip text<br/>Extra textC">
    <svg ... ></svg>
</span>

因此，如果您只使用.tooltip-inner，显然，它工作得很好，但我不想要一个全局工具提示，需要有不同的自定义工具提示。

twitter-bootstrap

来源：https://stackoverflow.com/questions/66236686/using-bootstrap-5-to-create-custom-tooltips

2条答案

按热度按时间

luaexgnf1#

（这个问题花了一些时间才弄清楚，因为规范的答案不起作用-这很可能是一个JSFiddle问题，或者是一个BS 5错误。不确定）*

文档中的方法是将您的自定义类添加到customClass选项中，如下所示：

<span data-bs-customClass="custom-tooltip" data-bs-toggle="tooltip" data-bs-html="true" title="The tooltip text<br/>Extra text">
  STUFF
</span>

但我不能让它在这个JSFiddle上工作。这是因为html呈现 （在Chrome上） 为小写，而“customClass”中的“C”呈现为“customclass”。所以BS 5 JS不会接收到解决方法是在工具提示初始化器中传递该选项，如下所示：

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl, {
    'customClass': 'custom-tooltip'
  })
})

然后你的CSS应该正常工作：

.custom-tooltip.tooltip > .tooltip-inner
{
    text-align: left;
    max-width: 500px;
}

编辑：

原来这是固定的...正确的方法是在大写选项前加上连字符“-”，并使用小写形式，如下所示：

<span data-bs-custom-class="custom-tooltip" data-bs-toggle="tooltip" data-bs-html="true" title="The tooltip text<br/>Extra text">
  STUFF
</span>

初始化器还应该排除该选项（添加它会覆盖data属性）。初始化器是一个根据文档：

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

赞(0）回复(0）举报 9个月前

fkvaft9z2#

我想用单击显示工具提示，因此代码如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <link rel="stylesheet" href="@{/styles/bootstrap_rtl_5.2.3.min.css}"/>
</head>

<body>

<img alt="i" data-bs-customClass="custom-tooltip-does-not-work" data-bs-html="true"
     data-bs-toggle="tooltip" src="@{/bootstrap-icons-1.10.5/info-circle-fill.svg}"
     title="#{card.block.agreement.contract.info}">

<script>
    $(document).ready(function () {
        [].slice.call(document.querySelectorAll('img[data-bs-toggle="tooltip"]')).map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl, {
                'customClass': 'custom-tooltip',
                animated: 'fade',
                placement: 'bottom',
                trigger: 'click'
            })
        })
    });
</script>

</body>

</html>

也要感谢：引导工具提示单击触发器不工作

赞(0）回复(0）举报 9个月前

我来回答

使用Bootstrap 5创建自定义工具提示

2条答案

相关问题

热门标签

最新问答