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

Question

I want to add a tooltip to a button which could change after the page is loaded.

For example. I use a button like this:

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

Now it could be possible, that the button gets disabled and looks like this:

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

I know want to add a tooltip with JS to the disabled button.

I tried this code:

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

That doesn't work. I think because the class disabled is new and the script for the tooltip couldn't find it when the page loads. Is there a way to "reload" the function?

Answer 1

Here is a simple way to do what you are asking. You can update it to your specific use case but this should get you started.

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