CODEWITHSUNDEEP
jqueryruby-on-railsformstwitter-bootstraptooltip
Abhradip
Abhradip

Reputation: 413

Adding tooltip in link_to tag in rail application

I have a link on the index.html.erb page. Its a download link. Now I want that if the cursor hovers on the link then a tooltip text will be displayed.e I have tried several combinations but did not get the solution yet.

My code is here:

<p>
Download:
<%= link_to "CSV", users_export_path(format: "csv") %> |
<%= link_to "Excel",users_export_path(format: "xls") %>
</p>

I installed bootstrap and I want to generate bootstrap tooltip for this two links. Please tell what should I do along with right syntax.

Upvotes: 6

Views: 8652

Answers (4)

Navin
Navin

Reputation: 924

Try this, 

<%= link_to "CSV", users_export_path(format: "csv"),  title: 'CSV' %> | <%= link_to "Excel",users_export_path(format: "xls"), title: 'XLS' %>

This will show a tooltip as "CSV" and "XLS" on link hower.

Upvotes: 1

Alex K Jose
Alex K Jose

Reputation: 252

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

<%= link_to "CSV", users_export_path(format: "csv"), title: 'Download CSV', 'data-toggle' => 'tooltip', 'data-placement' => 'right'%> | 
<%= link_to "Excel", users_export_path(format: "xls"), title: 'Download Excel', 'data-toggle' => 'tooltip', 'data-placement' => 'right'%>

then add the following js

$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip(); 
});

Upvotes: 11

Prity
Prity

Reputation: 224

Try this:

<p>
  Download:
  <%= link_to "CSV", users_export_path(format: "csv"), "data-toggle" => "tooltip", "data-placement" => "top", "title" => "Add a title" %> |
  <%= link_to "Excel",users_export_path(format: "xls"), "data-toggle" => "tooltip", "data-placement" => "top", "title" => "Add a title" %>
</p>

And add this to your JavaScript file:

$('a[data-toggle="tooltip"]').tooltip();

Upvotes: 2

Pavanello
Pavanello

Reputation: 11

I know this syntax <span tooltip-placement="top" tooltip-append-to-body="true" tooltip="Your Text"></span>

Try this way <span tooltip-placement="top" tooltip-append-to-body="true" tooltip="Your Text"><%= link_to "CSV", users_export_path(format: "csv") %></span>

Upvotes: 0

Related Questions