Biofarma | Bind UI

The tooltip component, at a minimum, has a container, a pointer arrow, and a message. A button icon pointer, badge, image and close button can also be added.

Type	Resource
Design	Figma
Web	Web Storybook
Code	Gitlab

Usage

import { Tooltip } from 'bio-bind-ui';

<Tooltip
  delay={200}
  event='hover'
  id='tooltip'
  mode='light'
  placement='top-center'
  showArrow
  textSize='sm'
/>

Examples

import React from "react";
import { Badge, Tooltip as TooltipComponent } from "bio-bind-ui";
 
const Tooltip = () => {
 
return (
    <div>
       <TooltipComponent
       event="click"
       textSize="xs"
       text={
         <>
           <div
             style={{
               display: "flex",
               alignItems: "center",
               justifyContent: "center",  // Corrected to justifyContent
               gap: "0.5rem",
             }}
           >
             <p>Text Title</p>
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="24"
               height="24"
               viewBox="0 0 24 24"
               fill="none"
             >
               <path
                 fillRule="evenodd"
                 clipRule="evenodd"
                 d="M4.3986 4.3986C6.34317 2.45406 9.0317 1.25 12 1.25C14.9683 1.25 17.6568 2.45406 19.6014 4.3986C21.5459 6.34317 22.75 9.0317 22.75 12C22.75 14.9683 21.5459 17.6568 19.6014 19.6014C17.6568 21.5459 14.9683 22.75 12 22.75C9.0317 22.75 6.34317 21.5459 4.3986 19.6014C2.45406 17.6568 1.25 14.9683 1.25 12C1.25 9.0317 2.45407 6.34316 4.3986 4.3986ZM12 2.75C9.4455 2.75 7.13403 3.78452 5.45926 5.45926C3.78451 7.13404 2.75 9.4455 2.75 12C2.75 14.5545 3.78452 16.866 5.45926 18.5407C7.13403 20.2155 9.4455 21.25 12 21.25C14.5545 21.25 16.866 20.2155 18.5407 18.5407C20.2155 16.866 21.25 14.5545 21.25 12C21.25 9.4455 20.2155 7.13403 18.5407 5.45926C16.866 3.78452 14.5545 2.75 12 2.75Z"
                 fill="#1E293B"
               />
               <path
                 fillRule="evenodd"
                 clipRule="evenodd"
                 d="M12 5.5C12.6903 5.5 13.25 6.05965 13.25 6.75C13.25 7.44035 12.6903 8 12 8C11.3097 8 10.75 7.44035 10.75 6.75C10.75 6.05965 11.3097 5.5 12 5.5Z"
                 fill="#1E293B"
               />
               <path
                 fillRule="evenodd"
                 clipRule="evenodd"
                 d="M10.5 10C10.5 9.58579 10.8358 9.25 11.25 9.25H12.25C12.6642 9.25 13 9.58579 13 10V17C13 17.4142 12.6642 17.75 12.25 17.75C11.8358 17.75 11.5 17.4142 11.5 17V10.75H11.25C10.8358 10.75 10.5 10.4142 10.5 10Z"
                 fill="#1E293B"
               />
               <path
                 fillRule="evenodd"
                 clipRule="evenodd"
                 d="M9.75 17C9.75 16.5858 10.0858 16.25 10.5 16.25H14C14.4142 16.25 14.75 16.5858 14.75 17C14.75 17.4142 14.4142 17.75 14 17.75H10.5C10.0858 17.75 9.75 17.4142 9.75 17Z"
                 fill="#1E293B"
               />
             </svg>
             <Badge label="Badge" size="small" variant="information" />
           </div>
         </>
       }
     >
       <p style={{ color: "#000000" }}>
         Text XS
       </p>
     </TooltipComponent>
    </div>
);
 
};
 
export default Tooltip;

Mode (Optional)

Use mode for change color mode of tooltip component: light or dark

import React from "react";
import { Badge, Tooltip as TooltipComponent } from "bio-bind-ui";
 
const Tooltip = () => {
return (
 
<div>
<TooltipComponent
event='click'
textSize='lg'
mode='dark'
text={
  <>
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyItems: 'center',
        gap: '0.5rem',
      }}
    >
      <p>Text Title</p>
      <svg
        xmlns='http://www.w3.org/2000/svg'
        width='24'
        height='24'
        viewBox='0 0 24 24'
        fill='none'
      >
        <path
          fillRule='evenodd'
          clipRule='evenodd'
          d='M4.3986 4.3986C6.34317 2.45406 9.0317 1.25 12 1.25C14.9683 1.25 17.6568 2.45406 19.6014 4.3986C21.5459 6.34317 22.75 9.0317 22.75 12C22.75 14.9683 21.5459 17.6568 19.6014 19.6014C17.6568 21.5459 14.9683 22.75 12 22.75C9.0317 22.75 6.34317 21.5459 4.3986 19.6014C2.45406 17.6568 1.25 14.9683 1.25 12C1.25 9.0317 2.45407 6.34316 4.3986 4.3986ZM12 2.75C9.4455 2.75 7.13403 3.78452 5.45926 5.45926C3.78451 7.13404 2.75 9.4455 2.75 12C2.75 14.5545 3.78452 16.866 5.45926 18.5407C7.13403 20.2155 9.4455 21.25 12 21.25C14.5545 21.25 16.866 20.2155 18.5407 18.5407C20.2155 16.866 21.25 14.5545 21.25 12C21.25 9.4455 20.2155 7.13403 18.5407 5.45926C16.866 3.78452 14.5545 2.75 12 2.75Z'
          fill='#FFFFFF'
        />
        <path
          fillRule='evenodd'
          clipRule='evenodd'
          d='M12 5.5C12.6903 5.5 13.25 6.05965 13.25 6.75C13.25 7.44035 12.6903 8 12 8C11.3097 8 10.75 7.44035 10.75 6.75C10.75 6.05965 11.3097 5.5 12 5.5Z'
          fill='#FFFFFF'
        />
        <path
          fillRule='evenodd'
          clipRule='evenodd'
          d='M10.5 10C10.5 9.58579 10.8358 9.25 11.25 9.25H12.25C12.6642 9.25 13 9.58579 13 10V17C13 17.4142 12.6642 17.75 12.25 17.75C11.8358 17.75 11.5 17.4142 11.5 17V10.75H11.25C10.8358 10.75 10.5 10.4142 10.5 10Z'
          fill='#FFFFFF'
        />
        <path
          fillRule='evenodd'
          clipRule='evenodd'
          d='M9.75 17C9.75 16.5858 10.0858 16.25 10.5 16.25H14C14.4142 16.25 14.75 16.5858 14.75 17C14.75 17.4142 14.4142 17.75 14 17.75H10.5C10.0858 17.75 9.75 17.4142 9.75 17Z'
          fill='#FFFFFF'
        />
      </svg>
      <Badge label='Badge' size='small' variant='information' />
    </div>
  </>
}
>
<p style={{ color: '#000000' }}>Dark</p>
</TooltipComponent>
</div>
); };
 
export default Tooltip;

Props

Props	Required	Default	Type	Description
text	false	-	`React.ReactNode`	The text content of the tooltip, which can be any valid React node.
showArrow	false	`true`	`boolean`	Indicates whether to show the arrow in the tooltip.
placement	false	`top-center`	`top-start`, `top-center`, `top-end`, `right-start`, `right-center`, `right-end`, `bottom-start`, `bottom-center`, `bottom-end`, `left-start`, `left-center`, `left-end`	The placement of the tooltip relative to the target element.
mode	false	`light`	`dark`, `light`	The mode of the tooltip, either dark or light.
id	true	-	`string`	The unique identifier for the tooltip component, useful for accessibility or targeting specific elements.
event	true	`hover`	`hover`, `click`	The event that triggers the tooltip display, either `hover` or `click`.
textSize	false	`md`	`xs`, `sm`, `md`, `lg`, `xl`, `2xl`	The text size of the tooltip.
showCloseIcon	false	`false`	`boolean`	Indicates whether to show a close icon in the tooltip.
delay	false	`200`	`number`	The delay (in milliseconds) before the tooltip appears or disappears.
image	false	-	`<HTMLImageElement>`	The image to be displayed in the tooltip, if applicable.
style	false	`{}`	`React.CSSProperties`	The custom styles for the tooltip component.
className	false	-	`string`	The class name of the tooltip component for styling.

Popover Checkbox

Tooltip

Usage

Examples

TextSize

Mode (Optional)

Props