1

I have a bootstrap tooltip. A test link works OK here:

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

I have an eex link:

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

I tried to wrap anchor tags around the link:

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

... didn't work.

There are some ideas in this Ruby on Rails tooltip question:

Using Tooltips with link_to (Ruby on Rails 3.2.3)

rel: "data-tooltip" does not raise an error:

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

but how do I add the data-placement="left" class?

Full tooltip here:

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;
}
Afshin Moazami
  • 2,092
  • 5
  • 33
  • 55
RubyRube
  • 602
  • 5
  • 24

2 Answers2

2

You can generate the <a> with data-tooltip and data-placement attributes by passing the attribute and their values as a keyword list to Phoenix.HTML.Link.link/2:

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

This produces the following HTML, which should work with your tooltip:

<a data-placement="left" data-tooltip="I am tooltip text" href="/">Clickame</a>
Dogbert
  • 212,659
  • 41
  • 396
  • 397
1

The correct tooltip syntax for the link, including classes, would be:

<%= 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") %>

original:

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