Search code examples
ruby-on-railsruby-on-rails-4twitter-bootstrap-3tooltip

I would like to add a tooltip to the glyphicon


Rails 4.1
Bootstrap 3

This is the code for the view:

<td>
  <%= link_to my_model, class: 'btn btn-info' do %>
    <span class="glyphicon glyphicon-search"></span>
  <% end %>
</td>

I would like to add a tooltip when the mouse hovers over the button to display something like "View Agent Data". I found some help on how to do this with bootstrap, but not when using a glyphcon. Any ideas?

Solution:

In the view:

<%= link_to my_model, class: 'btn btn-info',  title: 'View Agent Data', 'data-toggle' => 'tooltip', 'data-placement' => 'right' do %>
  <span class="glyphicon glyphicon-search"></span>
<% end %>

In application.js:

$(document).on("ready page:change", function() {
  $('.btn-info').tooltip();
});

Solution

  • You can set the necessary data attributes in the 'link_to' helper:

    <%= link_to my_model, class: 'btn btn-info',  title: 'View Agent Data', 'data-toggle' => 'tooltip', 'data-placement' => 'right' do %>
      <span class="glyphicon glyphicon-search"></span>
    <% end %>