Tooltips

A tooltip is a component that users can hover their mouse to have extra information about it.

Demo

For this component to work a participant need to hover on the element.

Demo	Usage
Hover me	class: :top
Hover me	class: :bottom
Hover me	class: :left
Hover me	class: :right

Usage

A tooltip requires the usage of the `with_tooltip` helper, with three arguments:

1. A string with the value of the tooltip. In the example of this page is "Hello world".

2. An optional class with a symbol on where the tooltip will be displayed. Possible values are :top, :bottom, :right, or :left.

3. A block with the string that the user needs to hover to be displayed.

Source code on GitHub decidim-core/app/packs/src/decidim/tooltips.js


      <%= with_tooltip("Hello world", class: :top) do %>
  <span>Hover me</span>
<% end %>

<%= with_tooltip("Hello world", class: :bottom) do %>
  <span>Hover me</span>
<% end %>

<%= with_tooltip("Hello world", class: :right) do %>
  <span>Hover me</span>
<% end %>

<%= with_tooltip("Hello world", class: :left) do %>
  <span>Hover me</span>
<% end %>