Bootstrap tooltip without link

Question

To save space in a narrow table cell, I want to use a tooltip to load additional content on hover. However, the tooltip uses the: rel parameter in the tag. I don’t need the link, just its options ... and I don’t want the link anywhere. I used:

link_to display.text, "#", :rel => "tooltip", ...blah..blah link_to_function display.text, "#", :rel => ...blah...blah 

Both work to some degree, however both return to the top of the page.

Its probably smelly code to use a link, which is not really a link to get any other function. Is there a rail way to create a dummy link? Is there an “approved” way of doing this?

Answer 1

You can initialize tooltips for items other than anchors. Try span or div.

Answer 2

I needed to add a tooltip to the element, but I did not want it to be a tag.

I decided to use the tag instead:

 <span class="glyphicons glyphicons-medicine pharmacy-icon" data-toggle="tooltip" data-placement="right" title="Pharmacy Tooltip"></span> 

What will be displayed (when hovering over the glyphicon of medicine) message: pharmacy pharmacy

If you want to take it one step further, you can even customize the tooltip as you like, the following code will be how you can change its style:

 .tooltip { filter: drop-shadow(rgba(0, 0, 0, 0.3) 0 2px 5px); .tooltip-inner { background-color: white; color: red; } .tooltip-arrow { border-right-color: white; } } 

This will change the background color of the tooltip, and the tooltip arrow will be white with red text and the shadow around the tooltip.

If you use bootstrap, be sure to include the following line of code in which the tooltip will be used:

$('.someClass').tooltip();

This ensures that you use the bootstrap tooltip and not the default browser tooltip