javascript - 将 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,
});

那是行不通的。我认为是因为 disabled 类是新的，并且在页面加载时工具提示的脚本无法找到它。有没有办法“重新加载”该函数？

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>