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

Posted 2023-05-08

【中文标题】在铁路应用程序的 link_to 标记中添加工具提示

【英文标题】：Adding tooltip in link_to tag in rail application

【发布时间】：2016-10-06 02:50:27

【问题描述】：

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

我的代码在这里：

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

我安装了引导程序，我想为这两个链接生成引导工具提示。 请告诉我应该用正确的语法做什么。

【问题讨论】：

我无法更改工具提示文本的背景颜色并按照 Alex 的建议进行操作，但它根本不起作用。请有人帮助我。

【参考方案1】：

您可以在 'link_to' 助手中设置必要的数据属性：

<%= 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(); 
);

【讨论】：

,,, 首先代码工作正常，但工具提示文本支持只是白色。但我想更改工具提示的背景颜色。我怎样才能做到这一点？

是的..我已阅读您提供的链接上的文章，但我在铁路应用程序中使用它。所以不能使用 class="red-tooltip" as "tooltip", ' title'=>"Download CSV file" %> 你能帮我找到正确的语法吗？

我不能改变颜色

可以使用以下代码<%= link_to "CSV", users_export_path(format: "csv"), class: 'red-tooltip', title: 'Download CSV', 'data-toggle' => 'tooltip', 'data-placement' => 'right'%>

这会将类 'red-tooltip' 添加到您的链接中。然后你需要为那个类编写css来改变背景颜色。 .red-tooltip + .tooltip > .tooltip-inner background-color: #f00;

【参考方案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();

【讨论】：

谢谢。我应该在哪里添加您提供的 Javascript 行？在代码文件本身或 jquery 文件中。因为我在铁路应用程序中使用它

在 app/assets/javascripts 下的任何 js 文件中，并在 application.js 中要求该文件，如下所示：//= 要求 example.js

【参考方案3】：

试试这个，

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

这将在链接方式上显示“CSV”和“XLS”的工具提示。

【参考方案4】：

我知道这种语法 <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>