Add a 'data-toggle' attribute to a button in javascript

Question

I'm trying create a bootstrap tooltip in a button in javascript.

This is what I'm trying to achieve:

 <input type="image" src="~/images/icon_trash_red.png" class="m-l-20" onclick="RemoveItem(this)" height="20"  data-toggle="tooltip" data-placement="right" title="Remover aluno" />

This is what I have so far:

    button = document.createElement("Input");
    button.src = "/images/icon_trash_red.png";
    button.width = '20';
    button.type = 'image';
    button.onclick = function () {
       RemoveItem(this);
    };
    button.style.marginLeft = '70px';
    button.title = "Remover aluno";
    button.setAttribute("data-toggle", "tooltip");

The 'setAttribute' seems to be working fine, because if I change to something like this: button.setAttribute("height", "50px"); it works.

Any ideas what I'm doing wrong?

Pranav C Balan · Accepted Answer · 2017-04-03 15:04:37Z

4

It will add the attribute to the element but you need to initialize the tooltip.

// initialize tooltip for all elements which has the data-toggle attribute
$('[data-toggle="tooltip"]').tooltip()

// or initialize just for the button
$(button).tooltip()

Note : The code should be after adding the attribute to the element.

edited Apr 3, 2017 at 15:04

answered Apr 3, 2017 at 14:52

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Alex Over a year ago

@Perozzo so what is your question then when the attribute gets added?

Dave Over a year ago

Also, make sure you've added the element to the page first before calling tooltip()

T.J. Crowder Over a year ago

@Perozzo: I fyou're doing that before adding the attribute to the button, it won't pick up that button. Once you add the attribute, you need to call $(button).tooltip() to initialize tooltips for that button, since it didn't previously have the attribute. (Don't use Pranav's first example, if you've already done it, no need to re-initialize the others.)

gregoryp Over a year ago

Thank you so much @PranavCBalan @T.J.Crowder @Dave. I was calling $('[data-toggle="tooltip"]').tooltip() just once and before the button's creation. Just added $(button).tooltip(); and it worked like a charm!

Collectives™ on Stack Overflow

Add a 'data-toggle' attribute to a button in javascript

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related