In my Rails-generated template, I am able to successfully add a Bootstrap tooltip in the application.html.erb file. However, when attempting to add a tooltip in a template partial loaded by AngularJS, it does not function as expected.
Within the application.js.coffee file:
jQuery ->
$("a[rel~=popover], .has-popover").popover()
$("a[rel~=tooltip], .has-tooltip").tooltip()
In the application.html.erb file:
<a href="#" class="has-tooltip" title="tooltip">hover over me for a tooltip</a>
The above setup works correctly on any page.
In the /app/assets/templates/guides/show.html.erb file:
<a href="#" class="has-tooltip" title="tooltip">hover over me for tooltip </a>
This particular template is being loaded by AngularJS using the "ng-view" directive in the application.html.erb file like so:
<div id="ng-app" ng-app="Guide" ng-view >
<!-- angular templates load here -->
</div>
The appropriate AngularJS route triggers the loading process:
when('/guides/:id', {
templateUrl:'<%= asset_path("guides/show.html") %>',
controller: 'VideoDetailCtrl'
});
When displaying a page with both links, the tooltip from application.html.erb functions properly, but the one in show.html.erb does not.
There seems to be an issue with timing. The first tooltip attaches fine before the AngularJS template or partial is loaded. Is there a way to trigger attachment of tooltips after the templates and partials are fully loaded?
A blog post suggests using a method involving onload in an ng-include to replace ng-view:
I am curious if there is a more universal Angular approach to this problem, especially considering that tooltips are just one example of many elements that will need to be attached to the final DOM?