Skip to main content
Frutjam logo Frutjam
v2.1.1
Theme

Tooltip Component

A lightweight, accessible tooltip component built with CSS and Tailwind CSS. Display contextual hints and additional information on hover or focus without JavaScript. Supports multiple placement positions and color variants for effective, accessible UI guidance and documentation hints.

Tooltip components display additional information when users hover over or focus on an element. Built with semantic HTML attributes and CSS, tooltips enhance user experience by providing context-specific help without cluttering the interface. The Frutjam tooltip system supports multiple positions, custom content, and smooth animations for seamless information discovery.

Note: Tooltips rely on :hover and :focus, which are not available on touch/mobile devices. For mobile-first layouts, use the responsive variant lg:tooltip so the tooltip only activates on desktop (large screens and above). On smaller screens, consider using a different disclosure pattern such as a popover or modal.

Class Type Description
tooltipBaseWrapper that reveals data-tip content on hover/focus
tooltip-contentModifierCustom HTML content inside the tooltip bubble
tooltip-topModifierOpens above the trigger (default)
tooltip-bottomModifierOpens below the trigger
tooltip-leftModifierOpens to the left of the trigger
tooltip-rightModifierOpens to the right of the trigger
tooltip-startModifierOpens to the logical start side
tooltip-endModifierOpens to the logical end side
tooltip-primaryColorPrimary theme color bubble
tooltip-secondaryColorSecondary theme color bubble
tooltip-accentColorAccent theme color bubble
tooltip-neutralColorNeutral theme color bubble
tooltip-infoColorInfo semantic color bubble
tooltip-successColorSuccess semantic color bubble
tooltip-warningColorWarning semantic color bubble
tooltip-errorColorError semantic color bubble

Tooltip

1
2
3
<div class="tooltip" data-tip="Tooltip">
   <button class="btn">Hover me</button>
</div>

1
2
3
<div className="tooltip" data-tip="Tooltip">
   <button className="btn">Hover me</button>
</div>

Custom Tooltip Content

❤️
Like
html 
1
2
3
4
5
6
7
<div class="tooltip tooltip-end">
    <div class="tooltip-content">
        <div class="text-xl">❤️</div>
        <div>Like</div>
    </div>
    <button class="btn">Hover me</button>
</div>

Tooltip with Icon

html 
1
2
3
4
5
6
<div class="tooltip" data-tip="Menu">
    <button class="btn btn-sm">
        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h16"/><path d="M4 12h16"/><path d="M4 19h16"/></svg>
        <span class="sr-only">Menu</span>
    </button>
</div>

Force Open Tooltip

html 
1
2
3
<div class="tooltip tooltip-open" data-tip="hello">
  <button class="btn">Force open</button>
</div>

Tooltip Positioning Options

Top Placement

html 
1
2
3
<div class="tooltip tooltip-top tooltip-open" data-tip="Tooltip top">
    <button class="btn">Top position</button>
</div>

Right Placement

html 
1
2
3
<div class="tooltip tooltip-right tooltip-open" data-tip="Tooltip right">
    <button class="btn">Right position</button>
</div>

End Placement

html 
1
2
3
<div class="tooltip tooltip-end tooltip-open" data-tip="Tooltip end">
    <button class="btn">End position</button>
</div>

Bottom Placement

html 
1
2
3
<div class="tooltip tooltip-bottom tooltip-open" data-tip="Tooltip bottom">
    <button class="btn">Bottom position</button>
</div>

Left Placement

html 
1
2
3
<div class="tooltip tooltip-left tooltip-open" data-tip="Tooltip left">
    <button class="btn">Left position</button>
</div>

Start Placement

html 
1
2
3
<div class="tooltip tooltip-start tooltip-open" data-tip="Tooltip start">
    <button class="btn">Start position</button>
</div>

Tooltip Color Variants

Primary Color

html 
1
2
3
<div class="tooltip tooltip-primary tooltip-open" data-tip="Primary">
  <button class="btn btn-xs">Primary color</button>
</div>

Secondary Color

html 
1
2
3
<div class="tooltip tooltip-secondary tooltip-open" data-tip="Secondary">
  <button class="btn btn-xs">Secondary color</button>
</div>

Accent Color

html 
1
2
3
<div class="tooltip tooltip-accent tooltip-open" data-tip="Accent">
  <button class="btn btn-xs">Accent color</button>
</div>

Info Color

html 
1
2
3
<div class="tooltip tooltip-info tooltip-open" data-tip="Info">
  <button class="btn btn-xs">Info color</button>
</div>

Success Color

html 
1
2
3
<div class="tooltip tooltip-success tooltip-open" data-tip="Success">
  <button class="btn btn-xs">Success color</button>
</div>

Warning Color

html 
1
2
3
<div class="tooltip tooltip-warning tooltip-open" data-tip="Warning">
  <button class="btn btn-xs">Warning color</button>
</div>

Error Color

html 
1
2
3
<div class="tooltip tooltip-error tooltip-open" data-tip="Error">
  <button class="btn btn-xs">Error color</button>
</div>

Neutral Color

html 
1
2
3
<div class="tooltip tooltip-neutral tooltip-open" data-tip="Neutral">
  <button class="btn btn-xs">Neutral color</button>
</div>

Responsive Tooltips

Show only on large screens with lg:tooltip

html 
1
2
3
<div class="lg:tooltip" data-tip="Hey there!">
  <button class="btn">Hover me</button>
</div>

JS & React Helper

Use createTooltip from frutjam/js or useTooltip from frutjam/react to show or hide a tooltip programmatically — useful for guided tours or triggered help text.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<div class="flex gap-2 mb-4">
  <button class="btn btn-sm" id="tip-show">Show</button>
  <button class="btn btn-sm" id="tip-hide">Hide</button>
  <button class="btn btn-sm" id="tip-toggle">Toggle</button>
</div>
<div class="tooltip" data-tip="Programmatic tooltip" id="js-tooltip">
  <button class="btn">Target</button>
</div>
<script type="module">
  import { createTooltip } from 'frutjam/js'
  const tip = createTooltip(document.getElementById('js-tooltip'))
  document.getElementById('tip-show').onclick = () => tip.show()
  document.getElementById('tip-hide').onclick = () => tip.hide()
  document.getElementById('tip-toggle').onclick = () => tip.toggle()
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import { useTooltip } from 'frutjam/react'

export default function TooltipDemo() {
  const tooltip = useTooltip()
  return (
    <>
      <div className="flex gap-2 mb-4">
        <button className="btn btn-sm" onClick={tooltip.show}>Show</button>
        <button className="btn btn-sm" onClick={tooltip.hide}>Hide</button>
        <button className="btn btn-sm" onClick={tooltip.toggle}>Toggle</button>
      </div>
      <div ref={tooltip.ref} className="tooltip" data-tip="Programmatic tooltip">
        <button className="btn">Target</button>
      </div>
    </>
  )
}