Develop Reference

Use of data-toggle="tooltip" in <a> or <span>

when I use data-toggle="tooltip" with the tag <h>, it works normally:
<h3 data-toggle="tooltip" data-placement="right"
title="example"> example </h3>
but when I try to use with <a>/<td>/<span>, this does not work normally, it just shows the normal tool-tip, without any style.
I'm starting with JavaScript and CSS, so I'm a bit stuck.
What can I do to solve this?
(I'm aware there are similar questions to this but they haven't solved my problem)
Thanks in advance.

It works for me: https://jsfiddle.net/fgcb27aa/
Check if you have tooltips enabled in your current page.
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
});

Popover not showing in button inside table row

I have a table being built via the map function of JavaScript (ReactJS).
On the last column, I should be having buttons that are meant to open a popover that will (eventually) hold some information. This cell is being done like this:
<td>
<div>
<button className="btn btn-primary"
tabIndex="0"
role="button"
data-toggle="popover"
data-trigger="focus"
title="Details"
data-content="Testing, Testing">
<b>IN PIT</b>
</button>
</div>
</td>
So far, the said button appears, but no popover whatsoever. I'm not using npm or anything of the sorts since I'm not a front-end-designer myself, and that doesn't seem trivial to setup. I just want something "good enough" for testing purposes.
What am I missing?

Looking at your https://pastebin.com/KuRHjWxr. Popovers won't work, you have to implement them other way.
You initiate
$('[data-toggle="popover"]').popover();
$('[data-toggle="tooltip"]').tooltip(); when there are no buttons in DOM.
Call .popover() and .tooltip() after your buttons are successfully rendered to the DOM.

The names of your attributes imply that you are expecting bootstrap (an external library) to be loaded and attach to the element to provide functionality, is bootstrap included in a script tag on the page? Those attributes don't do anything themselves, they are just tags to attach actions to. Add a bootstrap cdn tag inside the bottom of the body tag to address.

Initializing "hidden" tooltips on page-load

Greetings everyone :)
My question pertains to the bootstrap tooltips. I have a bunch of tooltips within my page (5 to be exact).
The tooltips look (more or less) like this:
<span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="top" title="{{'calculation.ttSD' | translate}}"></span>
I initialize them at the very top of the page (right after the ) with the classic:
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Most tooltips are initialized without any problems, however 2 are not working properly. There are some parts of the page that are hidden as the page loads and revealed depending upon what the user has entered.
Example:
<tr ng-if="condition == 'true'">
<label data-translate="the.text.to.put.in.the.label"/>
<span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="top" tittle="someText">
...
These tooltips are not getting initialized properly at the beginning. As a quick fix i just copied the above javascript and placed it right after the tooltips, which works. Except that kills the DRY principle since the same exact js comes up 3-4 times within the page.
What is a better way (if there is a way at all) of initializing all bootstrap tooltips, regardless if hidden or not?
Thanks :)

ng-if prevents DOM Element from being rendered. Hence the initialization in document.ready will not take effect on your ng-if false elements
Instead you can use ng-show/ ng-hide as they only changes display css-poperty
modified your example to ng-show instead of ng-if
<tr ng-show="condition == 'true'">
<label data-translate="the.text.to.put.in.the.label"/>
<span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="top" tittle="someText">
hope it helps

Prototype, jQuery and Bootstrap cause tooltip elements to be hidden on mouse out

I've been working on a project using Prototype, jQuery and Bootstrap. We use Bootstrap Tooltips in our UI, normally over icons and text, as below:
<span class="glyphicon glyphicon-asterisk" data-toggle="tooltip" data-placement="bottom" title="Some tooltip"></span>
<span class="glyphicon glyphicon-asterisk" data-toggle="tooltip" data-placement="bottom" title="Another tooltip"></span>
Link tooltip
We then use some simple Javascript to activate our tooltip:
var _j = jQuery.noConflict();
_j("[data-toggle=\"tooltip\"]").tooltip();
I'm using _j alias of jQuery as the $ prefix is used by Prototype. This works fine, but as soon as you move your mouse from a tooltip'd element, it has style="display: hidden; applied. I can't work out any reasonable explanation, so was wondering if anyone has any ideas?
Here is a jsFiddle.

use this trick to solve the problem:
$('.tooltips').tooltip().on('hidden.bs.tooltip', function(){
jQuery(this).show();
});

You could use display:block !important within your CSS file. Doing this, it will force the element to show, even when the script is telling them to hide.

Bootstrap open Modal AND Hyperlink

I am looking for a way to open a modal as well as the underlying hyperlink.
So if my code looks like this:
<a class="btn pull-right" target="_blank" href="http://www.example.com" data-toggle="modal" data-target="#modal_div" data-remote="false">something</a>
I want to open the Modal as well as the link to "www.example.com"...
Does anybody have an idea of how to accomplish this?
Thanks for your advice!

You should define the .click handler for your link, remove data- attributes and toggle .modal() with javascript.
I think that bootstrap handler for clicking on anchors with data- attributes for modals and other plugins uses preventDefault(), that is why you just can't use href="http://www.example.com".
FIDDLE DEMO