Question

我有一个bootstrap工具提示。测试链接在这里工作正常：

<a data-tooltip="I am tooltip text" data-placement="left">Clickame</a>

我有一个eex链接：

 <span><%= link "  ", to: post_path(@conn, :show, post), class: "btn btn-default btn-md btn-read-post unicode-lg" %></span>

我试图在链接周围包裹锚标记：

    <a data-tooltip="edit" data-placement="left"><span><%= link "    ", to: post_path(@conn, :show, post), class: "btn btn-default btn-md btn-read-post unicode-lg" %></span></a>

......没有工作。

这个Ruby on Rails工具提示问题中有一些想法：

Using Tooltips with link_to (Ruby on Rails 3.2.3)

rel：＆＃34; data-tooltip＆＃34;没有引起错误：

<span><%= link "  ", to: post_path(@conn, :show, post), class: "btn btn-default btn-md btn-read-post unicode-lg", rel: "data-tooltip" %></span>

但如何添加数据展示位置=＆＃34;左＆＃34;类？

完整的工具提示：

https://codepen.io/peiche/pen/JaftA

a[data-tooltip] {
  position: relative;
}

a[data-tooltip]::before,
a[data-tooltip]::after {
  position: absolute;
  display: none;
  opacity: 0.85;
}

Answer 1

您可以通过将属性及其值作为关键字列表传递给<a>来生成包含data-tooltip和data-placement属性的Phoenix.HTML.Link.link/2：

<%= link("Clickame", to: "/", "data-tooltip": "I am tooltip text", "data-placement": "left") %>

这会生成以下HTML，它应该与您的工具提示一起使用：

<a data-placement="left" data-tooltip="I am tooltip text" href="/">Clickame</a>

Answer 2

链接的正确工具提示语法（包括类）将是：

<%= link("   ", to: post_path(@conn, :show, post), "data-tooltip": "I am tooltip text", "data-placement": "left", class: "btn btn-default btn-md btn-read-post unicode-lg") %>

原：

<span><%= link "  ", to: post_path(@conn, :show, post), class: "btn btn-default btn-md btn-read-post unicode-lg" %></span>

eex模板中的Bootstrap工具提示

2 个答案: