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

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

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

  <%= render HakumiComponents::Flex::Component.new(justify: :center, gap: :small) do %>
    <%= render HakumiComponents::Tooltip::Component.new(title: "prompt text", placement: :bottom_left) do %>
      <%= render(HakumiComponents::Button::Component.new) { "BL" } %>
    <% end %>
    <%= render HakumiComponents::Tooltip::Component.new(title: "prompt text", placement: :bottom) do %>
      <%= render(HakumiComponents::Button::Component.new) { "Bottom" } %>
    <% end %>
    <%= render HakumiComponents::Tooltip::Component.new(title: "prompt text", placement: :bottom_right) do %>
      <%= render(HakumiComponents::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 HakumiComponents::Flex::Component.new(justify: :center, align: :center, style: "height: 800px;") do %>
  <%= render HakumiComponents::Tooltip::Component.new(title: "Thanks for using Hakumi Rails. Have a nice day!", placement: :top) do %>
    <%= render(HakumiComponents::Button::Component.new(type: :primary)) { "Scroll The Window" } %>
  <% end %>
<% end %>
Arrow
Show or hide the arrow.
Code 
<%= render HakumiComponents::Space::Component.new do %>
  <%= render HakumiComponents::Tooltip::Component.new(title: "With arrow", placement: :top, arrow: true) do %>
    <%= render(HakumiComponents::Button::Component.new) { "With Arrow" } %>
  <% end %>
  <%= render HakumiComponents::Tooltip::Component.new(title: "Without arrow", placement: :top, arrow: false) do %>
    <%= render(HakumiComponents::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 HakumiComponents::Flex::Component.new(vertical: true, gap: :middle) do %>
  <%= render HakumiComponents::Typography::Text::Component.new(type: :secondary) do %>Presets<% end %>
  <%= render HakumiComponents::Space::Component.new(wrap: true) do %>
    <% %i[pink red yellow orange cyan green blue purple geekblue magenta volcano gold lime].each do |color| %>
      <%= render HakumiComponents::Tooltip::Component.new(title: color.to_s.capitalize, color: color) do %>
        <%= render(HakumiComponents::Button::Component.new) { color.to_s.capitalize } %>
      <% end %>
    <% end %>
  <% end %>

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

Access via element.hakumiComponent.api
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.