引导工具提示单击触发器不起作用

这里的绝对菜鸟。我的目标是让引导工具提示在单击引导程序字形时出现。但它出现在悬停时。在这里分享 jsfiddle - https://jsfiddle.net/govind91/Lzzgxcro/

这是 html

<span class="glyphicon glyphicon-question-sign" aria-hidden="true" title="Some tooltip text!" data-toggle="tooltip" data-trigger="click" > </span>

爪哇语

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

请让我知道我哪里出错了。

我相信除了CSS文件之外，您还需要包含Bootstrap JavaScript文件，然后它应该可以工作了！

https://jsfiddle.net/a4WwQ/1082/

$('a[data-toggle="tooltip"]').tooltip({
    animated: 'fade',
    placement: 'bottom',
    trigger: 'click'
});

我想

在标题属性值中使用html，所以代码是这样的：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>

<img alt="i" data-bs-customClass="custom-tooltip-does-not-work" data-bs-html="true"
     data-bs-toggle="tooltip" src="./info-circle-fill.svg"
     title=" Test Click Title ">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
     
<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>

也感谢：使用引导程序 5 创建自定义工具提示

相关内容

最新更新

热门标签：