CODEWITHSUNDEEP
twitter-bootstrapelixirphoenix-framework
RubyRube
RubyRube

Reputation: 602

Bootstrap tooltips in eex templates

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

Upvotes: 1

Views: 354

Answers (2)

RubyRube
RubyRube

Reputation: 602

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>

Upvotes: 1

Dogbert
Dogbert

Reputation: 222278

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>

Upvotes: 2

Related Questions