时间戳

首页 > 解决方案 > 将 Bootstrap 4 工具提示添加到动态按钮

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

问题描述

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

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

<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是新的，并且在页面加载时工具提示的脚本找不到它。有没有办法“重新加载”该功能？

标签： javascriptjqueryhtmlbootstrap-4tooltip

解决方案

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

$('.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>

推荐阅读