Tooltip

It's a secret little top hat for your elements

Includes a Ruby component and corresponding Rails helper

Ruby

Includes a Stimulus controller

Stimulus

Example

Fill the tank

<% # Text content %>
<%= nk_tooltip(content: "Fill the tank") do |t| %>
  <%= nk_button icon: "fuel" %>
<% end %>

<% # Block content %>
<%= nk_tooltip do |t| %>
  <%= t.content do %>
    Anything goes here
  <% end %>
  <%= nk_button icon: "fuel" %>
<% end %>

Install

Set up Nitro Kit then

bin/rails generate nitro_kit:add tooltip

Files generated

Dependencies

This component adds third-party dependencies:

JavaScript@floating-ui/coreWeb GitHub
JavaScript@floating-ui/domWeb GitHub

Usage

`nk_tooltip(content: nil, placement: nil, **attrs) { \|tooltip\| ... }`
Property	Default	Description
`content`	`nil`	Text content of the tooltip
`placement`	`nil`	Floating UI Placement of the dropdown
`**attrs`		HTML attributes for `<span>` element

`tooltip.content(text = nil, **attrs) { ... }`
Property	Default	Description
`text`	`nil`	Plain text content
`**attrs`		HTML attributes for `<div>` element