multiple values for data-toggle attribute w/bootstrap ui

[alan_k]

I need to assign the data attribute data-toggle used in Bootstrap two values like:

echo "<td><a class='one glyphicon glyphicon-trash' id='delete-row' data-toggle='modal tooltip' data-placement='bottom' title='Delete Record' href='#' data-target='#myModal' aria-hidden='true' data-id='" . $row['id'] . "'></a></td>";

cause this element has a tooltip and is also used to trigger a modal when clicked. However I cant get this to work. Does anyone know if this can be done and how because I see no documentation and I've tried several different scenarios all no good.

[Ingolme]

It doesn't look like bootstrap was prepared for that. What you can do is use the jQuery function for the tooltop. Give your link a class or ID and call the tooltip() method.

$("#delete-row").tooltip();

I suspect you're creating multiple rows and you're giving the same ID "delete-row" to all the links. This isn't going to work, an ID can only appear once on the page. If you want more than one use a class instead.

[alan_k]

The only thing is then will I have the styling the same? The Edit option is right before it and uses the tooltip from Bootstrap. I was wondering, I tried activating the modal thru javascript($('#myModal').modal(show) but it did not work, that is why I fell back on the attribute data-target way of activating the modal for the confirmation box. Do you have any experience using the js way and is there something there not mentioning in the Bootstrap documentation to make it work?

[alan_k]

Follow Up. I stand corrected the jquery function does style it the same way, and thanks for the heads up I had to add class=delete-row. I would be curious though if you have any experience calling the modal plugin via js and how it is done.

Edited November 30, 2014 by alan_k

[Ingolme]

If you want to open a modal box you have to assign an event handler to the link which calls the modal('open') method on the box.

$(".delete-row").click(function(e) {    $("#myModal").modal('open');    e.preventDefault(); // Prevent the link from opening a new page})

Remember that if you want to add a class "delete-row" to your link, you have to add it inside the same class attribute that has the glyphicon and other classes. You can't have two class attributes.

class='one glyphicon glyphicon-trash delete-row'