I have a rails 4.0 site using bootstrap 3.0. The tooltip is displaying but with no style. The bootstrap example shows that the markup will look like this
<div class="tooltip">
<div class="tooltip-inner">
</div>
<div class="tooltip-arrow"></div>
</div>
However when I inspect it, the markup generated looks like it is jQuery not bootstrap.
<div id="ui-tooltip-18 role="tooltip" class="ui-tooltip ui-widget ui-corner-all ui-widget-content">
</div>
Here is my application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require twitter/bootstrap
//= require_tree .
Here is my JavaScript calling the tooltip
$(function(){
$('[data-toggle=tooltip]').tooltip();
});
Here is my markup on the page:
<h3>Verifications</h3>
<table>
<% @verification_types.each do |type| %>
<tr>
<td><%= link_to "#{type.name}", '#', data: { toggle: "tooltip" }, title: "Default title" %></td>
</tr>
<% end %>
</table>
I hate this way around it but I got it to work. I had to add a js file I called it fix_tooltip.js and added this to it $.fn.bstooltip = $.fn.tooltip;
then in my script that is calling tooltip
it now does $('[data-toggle]').bstooltip();
It feels really hacky and don't like it. But I couldn't get it to work by changing the jQuery-UI tooltip.
I ended up with the following working solution:
application.js
//= require jquery
//= require bootstrap
//= require fix_conflict
//= require jquery.ui.all
//= require jquery_ujs
//= require others
//= require_tree .
fix_conflict.js (thanks for @covard)
$.fn.bstooltip = $.fn.tooltip;
others.js
$('.form a').bstooltip();
#IMPORTANT: Make sure to target the exact element on which the tooltip is defined
HTML
<form class='form' ...>
...
<a href='#' data-toggle='tooltip' title="some tooltip text>?</a>
...
</form>
IMPORTANT : As mentioned above - targeting the exact element where the tooltip is defined is important. Otherwise when using a generic targeting $('.form').bstooltip()
I ended up with the JQuery styling/tooltip
@tamersalama 's answer helped me figure out a simple solution:
Do not include all jquery-ui plugins but rather just those you need (minus the tooltip plugin)
Here's my application.js:
//= require jquery
//= require jquery-ui/autocomplete
//= require jquery-ui/datepicker
//= require jquery_ujs
//= require bootstrap
//= require_tree .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.