添加 Bootstrap 4 工具提示到动态按钮

Question

我想向按钮添加工具提示，该按钮可能会在页面加载后发生变化。

例如。我使用这样的按钮：

<a href="#" class="btn btn-link">Button active</a>

现在有可能，按钮被禁用并且看起来像这样：

<a href="#" class="btn btn-link disabled">Button disabled</a>

我知道想用 JS 向禁用的按钮添加工具提示。

我试过这段代码：

$('.btn-link.disabled').tooltip({
    title: '<div class="text-left">Please select color first</div>',
    html: true,
});

那是行不通的。我想是因为 class disabled 是新的，并且在页面加载时工具提示的脚本找不到它。有没有办法 "reload" 这个功能？

Answer 1

这里有一个简单的方法来完成您的要求。您可以将其更新为您的特定用例，但这应该可以帮助您入门。

$('.btn-link.disabled').wrap('<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Please select color first"></span>');

<a href="#" class="btn btn-link">Button active</a>

<a href="#" class="btn btn-link disabled">Button disabled</a>



<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

添加 Bootstrap 4 工具提示到动态按钮

Add Bootstrap 4 tooltip to dynamic button

html

javascript

jquery

tooltip

bootstrap-4