Tooltip

Подсказка, которая выводится по наведению на область - триггер передаваемый через cлот.

Использование

WARNING

Внимание! Вы должны всегда использовать подсказки внутри лейаута!

Небезопасные стили

При необходимости (например, для того чтобы изменить тип отображения элемента-триггера) вы можете передать правила стилевой разметки в хост компонента через атрибут styles. Внимание!!! Это небезопасно! По умолчанию хост элемента отображается как display: inline-flex;;

HTML, Angular, Vue

<ds-layout>
  <div slot="main">
    <ds-tooltip
      text="Текст тултипа"
      position="top-center"
      lines="3"
      styles="display: inline-block;"
      arrow
      invert
    >
      <span slot="main">Контент триггера</span>
    </ds-tooltip>
  </div>
</ds-layout>

React

import { Layout, Tooltip } from '@rir/ds-library';

function Component() {
  return (
    <>
      <Layout>
        <div slot="main">
          <Tooltip
            text="Текст тултипа"
            position="top-center"
            lines="3"
            styles="display: inline-block;"
            arrow
            invert
          >
            <span slot="main">Контент триггера</span>
          </Tooltip>
        </div>
      </Layout>
    </>
  );
}

export default Component;

API

Props

Name	Type	Description	Default
position	String: ['bottom-center', 'top-center', 'center-left', 'center-right']	Основное позиционирование подсказки относительно элемента-триггера	'bottom-center'
text	String	Текст	''
arrow	Boolean	Есть ли "треугольничек" у подсказки?	false
invert	Boolean	Перепозиционирование подсказки "справа налево", работает для arrow: true и position: bottom-center и position: top-center	false
width	Number	Максимальная ширина подсказки	240
lines	Number	Количество строчек после которых остальной текст подсказки уходит в многоточие	1
disabled	Boolean	Неактивная, "выключенная" кнопка?	false
_disabled	undefined, String: ['true', 'false']	Дублирующий литеральный атбрибут	undefined
styles	String	"Небезопастная" строка для передачи правил CSS в компонент	''

Slots

Name	Description
main	Основной слот

Примеры проектов

React

Angular

Vue