@eisgs/hint v3.0.0

Компонент Hint

Компонент принимает все пропсы от @eisgs/tooltip (является стилизованной версией Tooltip).

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

<Hint content="Подсказка">
  <Button>
    Подсказка
  </Button>
</Hint>

Типы

Параметр type может иметь два значения - light (значение по умолчанию) и dark.

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

const styles = { marginBottom: 40 };
const types = ['light', 'dark'];

<div className="md-flex-row w300" style={{ flexWrap: 'wrap' }}>
  {types.map((type) => {
    const content = `Подсказка с type='${type}'`;
      
    return (
      <Hint
        key={type}
        content={content}
        containerStyles={styles}
        type={type}
      >
        <Button>
          {content}
        </Button>
      </Hint>
    );
  })}
</div>

Варианты позиционирования

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

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

const gridStyles = { display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gridTemplateRows: 'repeat(5, 60px)', gridGap: 10 };
const buttonStyles = { width: '100%', height: '100%!important' };
const containerStyles = { height: '60px', minWidth: '100%' };

<div className="md-flex-row w700" style={gridStyles}>
  <Hint
    content="top Left content"
    placement="topLeft"
    containerStyles={{...containerStyles, gridColumn: 2}}
  >
    <Button 
      type="primary" 
      styles={buttonStyles}
    >
      top Left
    </Button>
  </Hint>

  <Hint
    content="top content"
    placement="top"
    containerStyles={containerStyles}
  >
    <Button 
      type="primary"
      styles={buttonStyles}
    >
      top
    </Button>
  </Hint>

  <Hint
    content="top Right content"
    placement="topRight"
    containerStyles={containerStyles}
  >
    <Button 
      type="primary" 
      styles={buttonStyles}
    >
      top Right
    </Button>
  </Hint>
    
  <Hint
    content="left Top content"
    placement="leftTop"
    containerStyles={{...containerStyles, gridColumn: 1, gridRow: 2}}
  >
    <Button 
      type="primary" 
      styles={buttonStyles}
    >
      left Top
    </Button>
  </Hint>

  <Hint
    content="left content"
    placement="left"
    containerStyles={{...containerStyles, gridColumn: 1, gridRow: 3}}
  >
    <Button 
      type="primary" 
      styles={buttonStyles}
    >
      left
    </Button>
  </Hint>

  <Hint
    content="left Bottom content"
    placement="leftBottom"
    containerStyles={{...containerStyles, gridColumn: 1, gridRow: 4}}
  >
    <Button 
      type="primary" 
      styles={buttonStyles}
    >
      left Bottom
    </Button>
  </Hint>

  <Hint
    content="right Top content"
    placement="rightTop"
    containerStyles={{...containerStyles, gridColumn: 5, gridRow: 2}}
  >
    <Button 
      type="primary" 
      styles={buttonStyles}
    >
      right Top
    </Button>
  </Hint>

  <Hint
    content="right content"
    placement="right"
    containerStyles={{...containerStyles, gridColumn: 5, gridRow: 3}}
  >
    <Button 
      type="primary" 
      styles={buttonStyles}
    >
      right
    </Button>
  </Hint>

  <Hint
    content="right Bottom content"
    placement="rightBottom"
    containerStyles={{...containerStyles, gridColumn: 5, gridRow: 4}}
  >
    <Button 
      type="primary" 
      styles={buttonStyles}
    >
      right Bottom
    </Button>
  </Hint>
  
  <Hint
    content="bottom Left content"
    placement="bottomLeft"
    containerStyles={{...containerStyles, gridColumn: 2, gridRow: 5}}
  >
    <Button
      type="primary"
      styles={buttonStyles}
    >
      bottom Left
    </Button>
  </Hint>

  <Hint
    content="bottom content"
    placement="bottom"
    containerStyles={{...containerStyles, gridColumn: 3, gridRow: 5}}
  >
    <Button
      type="primary"
      styles={buttonStyles}
    >
      bottom
    </Button>
  </Hint>

  <Hint
    content="bottom Right content"
    placement="bottomRight"
    containerStyles={{...containerStyles, gridColumn: 4, gridRow: 5}}
  >
    <Button
      type="primary"
      styles={buttonStyles}
    >
      bottom Right
    </Button>
  </Hint>
</div>

Отступы

Доступны три значения для параметра arrowOffset - 8 (значение по умолчанию для igs), 16 (значение по умолчанию для eisgs) и 32 (может быть только при type="light").

Значение arrowOffset соответствует отступу контента подсказки:

• 8 (8px вертикальный отступ, 12px горизонтальный отступ);

• 16 (16px вертикальный и горизонтальный отступ);

• 32 (32px вертикальный и горизонтальный отступ);

При установленной теме igs меняется значение borderRadius - 4 (значение по умолчанию) и 8 (при arrowOffset="32")

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

const containerStyles = { marginBottom: 40 };

<>
  <Hint
    content="Обычная подсказка"
    placement="topLeft"
    containerStyles={containerStyles}
  >
    <Button>
      Обычная подсказка
    </Button>
  </Hint>

  <Hint 
    placement="topLeft"
    maxWidth={424}
    arrowOffset={32}
    content={
      <>
        <Typography type="p2" weight="bold" styles="margin-bottom: 12px">Вариант 1</Typography>
        <Typography type="p2" styles="margin-bottom: 20px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suscipit tellus malesuada viverra a enim, eget nisl leo. Et nulla consectetur netus commodo aliquet eu turpis nunc.</Typography>
        <Typography type="p2" weight="bold" styles="margin-bottom: 12px">Вариант 2</Typography>
        <Typography type="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suscipit tellus malesuada viverra a enim, eget nisl leo. Et nulla consectetur netus commodo aliquet eu turpis nunc.</Typography>
      </>
    }
  >
    <Button>
      Подсказка с arrowOffset='32'
    </Button>
  </Hint>
</>