Tooltip
⌘
Displays additional information on hover
Overview
Tooltips are designed to provide additional information to users when hovering over an element. Principally designed for desktop rather than touch devices like mobile and tablets, tooltips are typically used to provide more context to short labels that might be pithy or ambiguous in description.
Default
RightSMS messages are charged separately
TopSMS messages are charged separately
BottomSMS messages are charged separately
LeftSMS messages are charged separately
<div className="tooltip">Right<span className="tooltiptext right text-sm text-center">SMS messages are charged separately</span></div>
<div className="tooltip">Top<span className="tooltiptext top text-sm text-center">SMS messages are charged separately</span></div>
<div className="tooltip">Bottom<span className="tooltiptext bottom text-sm text-center">SMS messages are charged separately</span></div>
<div className="tooltip">Left<span className="tooltiptext left text-sm text-center">SMS messages are charged separately</span></div>
Align
Text align centerReal-time message translation is charged separately
Text align leftReal-time message translation is charged separately
Text align rightReal-time message translation is charged separately
<div className="tooltip">Text align center<span className="tooltiptext right text-sm text-center">Real-time message translation is charged separately</span></div>
<div className="tooltip">Text align left<span className="tooltiptext top text-sm text-left">Real-time message translation is charged separately</span></div>
<div className="tooltip">Text align right<span className="tooltiptext bottom text-sm text-right">Real-time message translation is charged separately</span></div>
Components
SMS messages are charged separately
SMS messages are charged separately
Tag
SMS messages are charged separately
<div className="tooltip">
<Icon.Info color="var(--accent-4)" size={24} />
<span className="tooltiptext right text-sm text-center">SMS messages are charged separately</span>
</div>
<div className="tooltip">
<button className="px-4 py-3 font-semibold rounded-xl bg-blue-500 text-white text-base hover:shadow-3xl hover:shadow-blue-500 ease-in-out duration-200">
Button
</button>
<span className="tooltiptext top text-sm text-center">SMS messages are charged separately</span>
</div>
<div className="tooltip">
<span className="py-1 px-2 leading-5 border-transparent rounded-full font-medium text-gray-400 bg-gray-100 dark:bg-gray-800">Tag</span>
<span className="tooltiptext bottom text-sm text-center">SMS messages are charged separately</span>
</div>