Question

我在index.html.erb页面上有一个链接。它是一个下载链接。现在我希望如果光标悬停在链接上，那么将显示工具提示文本我尝试了几种组合，但还没有得到解决方案。

我的代码在这里：

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

我安装了bootstrap，我想为这两个链接生成bootstrap工具提示。请告诉我该怎么做以及正确的语法。

Answer 1

您可以在＆＃39; link_to＆＃39;中设置必要的数据属性。助手：

<%= 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'%>

然后添加以下js

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

Answer 2

试试这个：

<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>

并将其添加到您的JavaScript文件中：

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

Answer 3

我知道这种语法 <span tooltip-placement="top" tooltip-append-to-body="true" tooltip="Your Text"></span>

试试这种方式 <span tooltip-placement="top" tooltip-append-to-body="true" tooltip="Your Text"><%= link_to "CSV", users_export_path(format: "csv") %></span>

Answer 4

试试这个，

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

这将显示工具提示为＆＃34; CSV＆＃34;和＆＃34; XLS＆＃34;在链接hower。

在rails应用程序的link_to标记中添加工具提示

4 个答案: