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>

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

1 个答案: