Tooltip

<bh-tooltip> | BharatTooltip

The Tooltip component provides contextual help or guidance when users hover or focus on elements. It supports configurable positions, sizes, colors, delay timing, and arrow indicators.

Open in

Right Tooltip

Tooltip Content

Left Tooltip

Tooltip Content

Basic Usage

Preview

Open in

Right Tooltip

Tooltip Content

HTML

<bh-tooltip>
  <span slot="trigger">Hover me</span>
  Hello there!
</bh-tooltip>

React

import { BharatTooltip } from 'bharat-ui';

function TooltipExample() {
  return (
    <BharatTooltip>
      <span slot="trigger">Hover me</span>
      Hello there!
    </BharatTooltip>
  );
}

Positions

Preview

Open in

Left Tooltip

Tooltip Content

Top Tooltip

Tooltip Content

Bottom Tooltip

Tooltip Content

Right Tooltip

Tooltip Content

HTML

<bh-tooltip position="left" background="#3366ff" color="white">
    <span slot="trigger">
      <bh-button >Right Tooltip</bh-button>
    </span>
    Tooltip Content
</bh-tooltip>


<bh-tooltip background="#30BC6B" color="white">
    <span slot="trigger">
      <bh-button>Top Tooltip</bh-button>
    </span>
    Tooltip Content
</bh-tooltip>

<bh-tooltip position="bottom" background="#D58F1E" color="white">
    <span slot="trigger">
      <bh-button>Right Tooltip</bh-button>
    </span>
    Tooltip Content
</bh-tooltip>

<bh-tooltip position="right" background="#D85E53" color="white">
    <span slot="trigger">
      <bh-button>Right Tooltip</bh-button>
    </span>
    Tooltip Content
</bh-tooltip>

React

import React from 'react';
import { BharatTooltip} from 'bharat-ui/react/components/tooltip';
import { BharatButton} from 'bharat-ui/react/components/button';
function App() {
return (
  <BharatTooltip position="left" background="#3366ff" color="white">
    <span slot="trigger">
      <BharatButton>Left Tooltip</BharatButton>
    </span>
    Tooltip Content
  </BharatTooltip>


  <BharatTooltip background="#30BC6B" color="white">
    <span slot="trigger">
      <BharatButton>Top Tooltip</BharatButton>
    </span>
    Tooltip Content
  </BharatTooltip>

  <BharatTooltip position="bottom" background="#D58F1E" color="white">
    <span slot="trigger">
      <BharatButton>Bottom Tooltip</BharatButton>
    </span>
    Tooltip Content
  </BharatTooltip>

  <BharatTooltip position="right" background="#D85E53" color="white">
    <span slot="trigger">
      <BharatButton>Right Tooltip</BharatButton>
    </span>
    Tooltip Content
  </BharatTooltip>
  );
}
export default App;

Properties

Property	Type	Description
position	string	Tooltip position: "top", "right", "bottom", or "left"
color	string	Text color
background	string	Background color
size	string	Tooltip size: "small", "medium", or "large"
width	string	Fixed width
delay	number	Delay in milliseconds before showing the tooltip
arrow	boolean	Whether to display the arrow indicator
always-visible	boolean	If true, tooltip is always shown
visible	boolean	Tooltip visibility (internal/state-managed)
borderRadius	string	Custom border radius