Tooltip

Tooltip Component Documentation

Description

The Tooltip component is a flexible and customizable tooltip element built on top of react-bootstrap/Tooltip and enhanced with additional features. It supports various placement options, sizes, icons, and descriptions, making it a versatile choice for displaying contextual information.

Usage Example

import React from 'react';
import Tooltip from './Tooltip'; // Adjust the import path as necessary

const Example = () => (
  <div style={{ padding: '100px' }}>
    <Tooltip
      id="example-tooltip"
      size="lg"
      description="This is a detailed description of the tooltip."
      icon="ri-information-line"
    >
      Hover over me!
    </Tooltip>
  </div>
);

export default Example;

props

• id (string, required): An HTML id attribute necessary for accessibility.
• placement (oneOf): Sets the direction the Tooltip is positioned towards. Possible values include:
  • 'auto-start', 'auto', 'auto-end'
  • 'top-start', 'top', 'top-end'
  • 'right-start', 'right', 'right-end'
  • 'bottom-end', 'bottom', 'bottom-start'
  • 'left-end', 'left', 'left-start'
  • Default: 'right'
• arrowProps (shape): An Overlay injected set of props for positioning the Tooltip arrow.
• show (bool): Whether the Overlay is shown.
• popper (shape): A Popper.js config object passed to the underlying popper instance.
• bsPrefix (string): Overrides the underlying component base CSS class name. Default: 'tooltip'.
• children (node): Specifies the content of the Tooltip.
• className (string): Specifies a class name to append to the base element.
• variant (string): The visual style of the Tooltip.
• size (oneOf): The visual size of the Tooltip. Possible values include:
  • 'xxs', 'xs', 'lg'
  • Default: 'xs'
• icon (string): The visual icon of the Tooltip. Default: 'ri-question-line'.
• description (string): The visual description of the Tooltip. Default: ''.

Dependencies

Repository	Usage Count
frontend-app-staff-dashboard	5

Detailed usage locations:

frontend-app-staff-dashboard

• src/components/DocumentCard.jsx
• src/pages/platform-settings/features/FeaturesCard.jsx
• src/pages/users/AddUsersDrawer.jsx
• src/pages/users/learners/index.jsx
• src/pages/users/staffs/index.jsx