Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 329
Abhradip Avatar asked Dec 18 '22 16:12

Abhradip


2 Answers

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(); 
});
like image 155
Alex K Jose Avatar answered Dec 28 '22 16:12

Alex K Jose


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();
like image 37
Prity Avatar answered Dec 28 '22 15:12

Prity