CODEWITHSUNDEEP
javascriptjqueryhtmlbootstrap-4tooltip
Cray
Cray

Reputation: 5483

Add Bootstrap 4 tooltip to dynamic button

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?

Upvotes: 0

Views: 814

Answers (1)

Cory Kleiser
Cory Kleiser

Reputation: 2024

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>

Upvotes: 1

Related Questions