Develop Reference

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.

Prevent turbolinks 5 to load on certain <a></a>

I have several examples of the following.
A link like this with no real href:
<a href="#" id="add-item">
<i class="fa fa-plus"></i>
</a>
And some JS that does some magic:
id = $('#watch-path-group').children().length + 1
$('#watch-path-group').append '<input style="margin-top: 4px;" id=wp_"' + id + '" name=wp_"' + id + '" type="text" class="form-control" placeholder="New path...">'
After upgrading to turbolinks 5 the behaviour has changed. When I click the link turbolinks steps in and reloads the page and in this case the newly added element disappears...
I understand that this is probably more or less what turbolinks does. Taken from github:
Turbolinks intercepts all clicks on links to the same domain. When you click an eligible link, Turbolinks prevents the browser from following it. Instead, Turbolinks changes the browser’s URL using the History API, requests the new page using XMLHttpRequest, and then renders the HTML response.
But how do I accomplish what I am trying to do. Should I stop using link tags as described?
Thanks

Looking at the docs, to disable turbolinks on certain links, you need to add data-turbolinks="false" attribute to the element or any of its ancestors.
So the following should work:
<a href="#" id="add-item" data-turbolinks="false">
<i class="fa fa-plus"></i>
</a>
This of course assumes your own click handler is set up properly, your id's are unique, etc.

Making a hyperlink for Angularjs

I am working on a mobile site. I have created a hyperlink that works and was written in basic javascript.
'Go to Tour info '
This code works fine. But I wanted to change the code too better work with angularjs. I tried rewriting it just as...
'<a ng-href="/tours/'+$scope.tourmarkers[i]._id+'">Go to Tour info </a>'
where i cut off part of the of the url that was already being used. I changed the href by adding the ng in front. But I do not feel this is an angular statement. How can i make my original hyperlink be written for angularjs??

try this:
<a ng-href="{{'/tours/' + $scope.tourmarkers[i]._id}}">Go to Tour info </a>

try this
<a ng-href="/tours/{{$scope.tourmarkers[i]._id}}">Go to Tour info </a>
OR
in your controller
$scope.path = '/tours/' + $scope.tourmarkers[i]._id
now in view
'<a ng-href="{{path}}">Go to Tour info </a>'
since ng-href binds dynamically

How to set Bootstrap data-container to particular ID

I tried to make a Bootstrap popover. For that I have written the following code as per the Bootstrap guide.
I am using Bootstrap 3.1.0.
<input id="shelfLifeField" type="text" placeholder="Use-By" class="form-control first" data-container="body" data-toggle="popover" data-placement="bottom" data-html="true" data-content="<div class='row'>this is just for text</div>"/>
It's working fine but the problem was popover content appending to body. I found in the Bootstrap documentation that I can control through the data-container attribute.
data-container="#anotherDivId"
Actually I want to append the popover content to specific div ("anotherDivId") instead of appending to body.
I failed with my idea so can anyone help me.
Thanks.

data-container="#anotherDivId" is right and should work.
Be careful though that if #anotherDivId is hidden (with display:none), then the popover won't work

Using Twitter Bootstrap glyphicons in javascript

Does anyone know how I can use a Twitter Bootstrap glyphicons to replace the image covered in the following example in my javascript (.js) file:
var $img = $('<img class="child-opener-image" src="../img/sample.png" title="text here" />');
in HTML I would just use the following as an example:
<i class="icon-search icon-white"></i>
though not sure how to include this in the javascript example above.
Any ideas?

Use:
$('<i class="child-opener-image icon-search icon-white"></i>');
The image is actually a sprite sheet, so it's kinda fiddly to use it otherwise - you'd need to set the correct background-position etc, so why not just use the class that already has that info!