Компонент Tooltip

Компонент <Tooltip> позволяет выводить подсказки рядом с элементами.

Содержимое <Tooltip> необходимо передать в параметре tooltipContent.

import { Button } from '@eisgs/button';
import { Modal, useModal } from '@eisgs/modal';

const modal = useModal();

<>
  <Tooltip
    trigger="click"
    tooltipContent="Tooltip content"
    placement="bottomLeft"
  >
    <Button type="primary">
      Trigger: click
    </Button>
  </Tooltip>
  
  <br />

  <Tooltip
    trigger="hover"
    tooltipContent="Tooltip content"
    placement="bottomLeft"
  >
    <Button type="primary">
      Trigger: hover
    </Button>
  </Tooltip>
  
  <br />

  <Button 
    type="primary" 
    onClick={() => modal.open('tooltip-modal')}
  >
    Открыть модальное окно
  </Button>

  <Modal name="tooltip-modal">
    <Tooltip
      trigger="click"
      tooltipContent="Tooltip content"
      placement="bottomLeft"
      zIndex={9999}
      enterDelay={0}
    >
      <Button type="primary">
        Trigger: click
      </Button>
    </Tooltip>

    <Tooltip
      trigger="hover"
      tooltipContent="Tooltip content"
      placement="bottomLeft"
      zIndex={9999}
      enterDelay={0}
    >
      <Button 
        type="primary"
        styles={{ marginTop: '10px' }}
      >
        Trigger: hover
      </Button>
    </Tooltip>
  </Modal>
</>

Расположение

Расположение <Tooltip> доступно в следующих вариациях:

import { Button } from '@eisgs/button';

const buttonWidth = '100px';

<>
  <div className="md-flex-row w300" style={{ marginLeft: '115px' }}>
    <Tooltip
      trigger="hover"
      tooltipContent="Tooltip content"
      placement="topLeft"
    >
      <Button 
        type="primary" 
        styles={{ height: '60px', width: '110px', marginLeft: '10px' }}
      >
        top Left
      </Button>
    </Tooltip>

    <Tooltip
      trigger="hover"
      tooltipContent="Tooltip content"
      placement="top"
    >
      <Button 
        type="primary" 
        styles={{ height: '60px', width: '110px', marginLeft: '10px' }}
      >
        top
      </Button>
    </Tooltip>

    <Tooltip
      trigger="hover"
      tooltipContent="Tooltip content"
      placement="topRight"
    >
      <Button 
        type="primary" 
        styles={{ height: '60px', width: '110px', marginLeft: '10px' }}
      >
        top Right
      </Button>
    </Tooltip>
  </div>
  
  <br />

  <div className="md-flex-row w600">
    <div>
      <Tooltip
        trigger="hover"
        tooltipContent="Tooltip content"
        placement="leftTop"
      >
        <Button 
          type="primary" 
          styles={{ height: '60px', marginTop: '10px', width: '110px' }}
        >
          left Top
        </Button>
      </Tooltip>

      <Tooltip
        trigger="hover"
        tooltipContent="Tooltip content"
        placement="left"
      >
        <Button 
          type="primary" 
          styles={{ height: '60px', marginTop: '10px', width: '110px' }}
        >
          left
        </Button>
      </Tooltip>

      <Tooltip
        trigger="hover"
        tooltipContent="Tooltip content"
        placement="leftBottom"
      >
        <Button 
          type="primary" 
          styles={{ height: '60px', marginTop: '10px', width: '110px' }}
        >
          left Bottom
        </Button>
      </Tooltip>
    </div>

    <div>
      <Tooltip
        trigger="hover"
        tooltipContent="Tooltip content"
        placement="rightTop"
      >
        <Button 
          type="primary" 
          styles={{ height: '60px', marginTop: '10px', width: '110px' }}
        >
          right Top
        </Button>
      </Tooltip>

      <Tooltip
        trigger="hover"
        tooltipContent="Tooltip content"
        placement="right"
      >
        <Button 
          type="primary" 
          styles={{ height: '60px', marginTop: '10px', width: '110px' }}
        >
          right
        </Button>
      </Tooltip>

      <Tooltip
        trigger="hover"
        tooltipContent="Tooltip content"
        placement="rightBottom"
      >
        <Button 
          type="primary" 
          styles={{ height: '60px', marginTop: '10px', width: '110px' }}
        >
          right Bottom
        </Button>
      </Tooltip>
    </div>
  </div>
  
  <br />

  <div className="md-flex-row w300" style={{ marginLeft: '115px', marginTop: '10px' }}>
    <Tooltip
      trigger="hover"
      tooltipContent="Tooltip content"
      placement="bottomLeft"
    >
      <Button
        type="primary"
        styles={{ height: '60px', width: '110px', marginLeft: '10px' }}
      >
        bottom Left
      </Button>
    </Tooltip>

    <Tooltip
      trigger="hover"
      tooltipContent="Tooltip content"
      placement="bottom"
    >
      <Button
        type="primary"
        styles={{ height: '60px', width: '110px', marginLeft: '10px' }}
      >
        bottom
      </Button>
    </Tooltip>

    <Tooltip
      trigger="hover"
      tooltipContent="Tooltip content"
      placement="bottomRight"
    >
      <Button
        type="primary"
        styles={{ height: '60px', width: '110px', marginLeft: '10px' }}
      >
        bottom Right
      </Button>
    </Tooltip>
  </div>
</>

Обработчики открытия и закрытия

Обработчик onOpen вызывается при отображении подсказки, onClose при скрытии

import { Button } from '@eisgs/button';
import { useState } from 'react';

const [isOpened, setIsOpened] = useState(false);

<Tooltip
  trigger="click"
  onOpen={() => setIsOpened(true)}
  onClose={() => setIsOpened(false)}
  placement="bottomLeft"
  tooltipContent="Подсказка"
>
  <Button>{`Подсказка ${isOpened ? 'отображается': 'скрыта'}`}</Button>
</Tooltip>