import { ArgTypes, Subtitle, Title } from '@storybook/addon-docs';

<div className="bq-doc__wrapper" data-theme="light">
  <div className="bq-doc__container" >
    <Title>Tooltip</Title>

    A tooltip component is a user interface element that displays additional information about a particular element when the user hovers or clicks on it.
    It is usually displayed as a small pop-up box that appears near the element in question.

    <Subtitle>Best Practices</Subtitle>

    To ensure that tooltips effectively provide additional information without hindering user experience, consider the following best practices:

    - Provide definitions for technical terms or jargon, especially in scientific or financial applications, to make complex information more accessible to users who may not be familiar with the terminology.
    - Display additional information about interactive elements, such as buttons, links, or other elements, to help users understand their purpose or function and how to interact with them effectively.
    - Present additional context or data about specific elements, such as charts, tables, or images, to help users better understand the content and make more informed decisions.

    <Subtitle>👍 When to use</Subtitle>

    - When you want to provide additional information about an element without cluttering the UI.
    - When you want to provide context-specific help or guidance to the user.
    - When you want to clarify the meaning of a particular element.

    <Subtitle>Properties</Subtitle>

    <ArgTypes of="bq-tooltip" />
  </div>
</div>
