Tooltip

Component

Interactive examples and API documentation

Basic
The simplest usage. Tooltip will show on mouse enter.
Tooltip will show on mouse enter.
Code 
<%= render Hakumi::Tooltip::Component.new(title: "prompt text") do %>
  <%= render Hakumi::Typography::Text::Component.new do %>Tooltip will show on mouse enter.<% end %>
<% end %>
Placement
There are 12 placement options available.
Code 
<%= render Hakumi::Flex::Component.new(vertical: true, align: :center, gap: :small, style: "padding: 80px 20px;") do %>
  <%= render Hakumi::Flex::Component.new(justify: :center, gap: :small) do %>
    <%= render Hakumi::Tooltip::Component.new(title: "prompt text", placement: :top_left) do %>
      <%= render(Hakumi::Button::Component.new) { "TL" } %>
    <% end %>
    <%= render Hakumi::Tooltip::Component.new(title: "prompt text", placement: :top) do %>
      <%= render(Hakumi::Button::Component.new) { "Top" } %>
    <% end %>
    <%= render Hakumi::Tooltip::Component.new(title: "prompt text", placement: :top_right) do %>
      <%= render(Hakumi::Button::Component.new) { "TR" } %>
    <% end %>
  <% end %>

  <%= render Hakumi::Flex::Component.new(justify: :"space-between", style: "width: 320px;") do %>
    <%= render Hakumi::Flex::Component.new(vertical: true, gap: :small) do %>
      <%= render Hakumi::Tooltip::Component.new(title: "prompt text", placement: :left_top) do %>
        <%= render(Hakumi::Button::Component.new) { "LT" } %>
      <% end %>
      <%= render Hakumi::Tooltip::Component.new(title: "prompt text", placement: :left) do %>
        <%= render(Hakumi::Button::Component.new) { "Left" } %>
      <% end %>
      <%= render Hakumi::Tooltip::Component.new(title: "prompt text", placement: :left_bottom) do %>
        <%= render(Hakumi::Button::Component.new) { "LB" } %>
      <% end %>
    <% end %>

    <%= render Hakumi::Flex::Component.new(vertical: true, gap: :small) do %>
      <%= render Hakumi::Tooltip::Component.new(title: "prompt text", placement: :right_top) do %>
        <%= render(Hakumi::Button::Component.new) { "RT" } %>
      <% end %>
      <%= render Hakumi::Tooltip::Component.new(title: "prompt text", placement: :right) do %>
        <%= render(Hakumi::Button::Component.new) { "Right" } %>
      <% end %>
      <%= render Hakumi::Tooltip::Component.new(title: "prompt text", placement: :right_bottom) do %>
        <%= render(Hakumi::Button::Component.new) { "RB" } %>
      <% end %>
    <% end %>
  <% end %>

  <%= render Hakumi::Flex::Component.new(justify: :center, gap: :small) do %>
    <%= render Hakumi::Tooltip::Component.new(title: "prompt text", placement: :bottom_left) do %>
      <%= render(Hakumi::Button::Component.new) { "BL" } %>
    <% end %>
    <%= render Hakumi::Tooltip::Component.new(title: "prompt text", placement: :bottom) do %>
      <%= render(Hakumi::Button::Component.new) { "Bottom" } %>
    <% end %>
    <%= render Hakumi::Tooltip::Component.new(title: "prompt text", placement: :bottom_right) do %>
      <%= render(Hakumi::Button::Component.new) { "BR" } %>
    <% end %>
  <% end %>
<% end %>
Auto Shift
Auto adjust Popup and arrow position when Tooltip is close to the edge of the screen. Will be out of screen when exceed limitation.
Code 
<%= render Hakumi::Flex::Component.new(justify: :center, align: :center, style: "height: 800px;") do %>
  <%= render Hakumi::Tooltip::Component.new(title: "Thanks for using Hakumi Rails. Have a nice day!", placement: :top) do %>
    <%= render(Hakumi::Button::Component.new(type: :primary)) { "Scroll The Window" } %>
  <% end %>
<% end %>
Arrow
Show or hide the arrow.
Code 
<%= render Hakumi::Space::Component.new do %>
  <%= render Hakumi::Tooltip::Component.new(title: "With arrow", placement: :top, arrow: true) do %>
    <%= render(Hakumi::Button::Component.new) { "With Arrow" } %>
  <% end %>
  <%= render Hakumi::Tooltip::Component.new(title: "Without arrow", placement: :top, arrow: false) do %>
    <%= render(Hakumi::Button::Component.new) { "Without Arrow" } %>
  <% end %>
<% end %>
Colorful
We preset a series of colorful Tooltip styles for use in different situations.
Presets
Custom
Code 
<%= render Hakumi::Flex::Component.new(vertical: true, gap: :middle) do %>
  <%= render Hakumi::Typography::Text::Component.new(type: :secondary) do %>Presets<% end %>
  <%= render Hakumi::Space::Component.new(wrap: true) do %>
    <% %i[pink red yellow orange cyan green blue purple geekblue magenta volcano gold lime].each do |color| %>
      <%= render Hakumi::Tooltip::Component.new(title: color.to_s.capitalize, color: color) do %>
        <%= render(Hakumi::Button::Component.new) { color.to_s.capitalize } %>
      <% end %>
    <% end %>
  <% end %>

  <%= render Hakumi::Typography::Text::Component.new(type: :secondary) do %>Custom<% end %>
  <%= render Hakumi::Space::Component.new(wrap: true) do %>
    <%= render Hakumi::Tooltip::Component.new(title: "#f50", color: "#f50") do %>
      <%= render(Hakumi::Button::Component.new) { "#f50" } %>
    <% end %>
    <%= render Hakumi::Tooltip::Component.new(title: "#2db7f5", color: "#2db7f5") do %>
      <%= render(Hakumi::Button::Component.new) { "#2db7f5" } %>
    <% end %>
    <%= render Hakumi::Tooltip::Component.new(title: "#87d068", color: "#87d068") do %>
      <%= render(Hakumi::Button::Component.new) { "#87d068" } %>
    <% end %>
    <%= render Hakumi::Tooltip::Component.new(title: "#108ee9", color: "#108ee9") do %>
      <%= render(Hakumi::Button::Component.new) { "#108ee9" } %>
    <% end %>
  <% end %>
<% end %>
Trigger
Tooltip can be triggered by hover, focus, or click.
Code 
<%= render Hakumi::Space::Component.new do %>
  <%= render Hakumi::Tooltip::Component.new(title: "Hover me", trigger: :hover) do %>
    <%= render(Hakumi::Button::Component.new) { "Hover" } %>
  <% end %>
  <%= render Hakumi::Tooltip::Component.new(title: "Focus me", trigger: :focus) do %>
    <%= render(Hakumi::Button::Component.new) { "Focus" } %>
  <% end %>
  <%= render Hakumi::Tooltip::Component.new(title: "Click me", trigger: :click) do %>
    <%= render(Hakumi::Button::Component.new) { "Click" } %>
  <% end %>
<% end %>

Tooltip API

Prop Type Default Description
title String - The text shown in the tooltip.
placement Symbol :top The position of the tooltip relative to the target. Options: :top, :top_left, :top_right, :bottom, :bottom_left, :bottom_right, :left, :left_top, :left_bottom, :right, :right_top, :right_bottom
trigger Symbol :hover Tooltip trigger mode. Options: :hover, :focus, :click
arrow Boolean true Whether to show the arrow.
color Symbol or String :default The background color. Presets: :pink, :red, :yellow, :orange, :cyan, :green, :blue, :purple, :geekblue, :magenta, :volcano, :gold, :lime. Or any custom color string (e.g., '#f50', 'rgb(255,0,0)').
open Boolean nil Whether the tooltip is visible (controlled mode).
fresh Boolean false When true, allows programmatic control even when open is set.

JavaScript API (element.hakumiTooltip)

Prop Type Default Description
open() Function - Alias for show().
close() Function - Alias for hide().
show() Function - Show the tooltip.
hide() Function - Hide the tooltip.
toggle() Function - Toggle the tooltip visibility.
isOpen() Function - Returns true if the tooltip is visible.
getState() Function - Returns { open, placement, color }.
setPlacement(placement) Function - Change the tooltip placement dynamically.
setColor(color) Function - Change the tooltip color dynamically. Text color is auto-calculated for contrast.