STooltip

Иконка вопроса со всплывающей подсказкой.

В чем отличие от аналогов?

В отличие от популярных библиотек компонентов для Vue3:

1. Текст подсказки в слоте, так что там можно размещать HTML-контент и ссылки на расширенную информацию.
2. Событийная логика сделана так, что мышку можно перевести с иконки на текст подсказки и кликнуть по ссылке, которая в ней.

Базовый пример

Показы

<p>
    Показы <STooltip>Кол-во показов поискового сниппета. Данные из вебмастера за последний день, когда они есть для запроса</STooltip>
</p>

<template>
    <p>
        Показы <STooltip>Кол-во показов поискового сниппета. Данные из вебмастера за последний день, когда они есть для запроса</STooltip>
    </p>
</template>

<script setup>
import { STooltip } from 'startup-ui'
</script>

Фиксированное положение

По умолчанию положение подсказки выбирается исходя из того, где эта подсказка уместится на экране. Но если нужно указать положение явно, можно использовать атрибут at:

Сверху

Справа

Снизу

Слева

<div>Сверху <STooltip at="top">Подсказка сверху</STooltip></div>
<div>Справа <STooltip at="right">Подсказка справа</STooltip></div>
<div>Снизу <STooltip at="bottom">Подсказка снизу</STooltip></div>
<div>Слева <STooltip at="left">Подсказка слева</STooltip></div>

<template>
    <div>Сверху <STooltip at="top">Подсказка сверху</STooltip></div>
    <div>Справа <STooltip at="right">Подсказка справа</STooltip></div>
    <div>Снизу <STooltip at="bottom">Подсказка снизу</STooltip></div>
    <div>Слева <STooltip at="left">Подсказка слева</STooltip></div>
</template>

<script setup>
import { STooltip } from 'startup-ui'
</script>

Кастомная иконка

Если нужна другая иконка, то её можно заменить атрибутом icon:

Подсказка с другой иконкой

<div>Подсказка с другой иконкой <STooltip icon="circle-info">Используем иконку circle-info</STooltip></div>

<template>
    <div>Подсказка с другой иконкой <STooltip icon="circle-info">Используем иконку circle-info</STooltip></div>
</template>

<script setup>
import { STooltip } from 'startup-ui'
</script>

Если нужна совсем нестандартная иконка/область наведения, то можно использовать слот icon:

❓

<STooltip>
    <template #icon>❓</template>
    Используем в качестве иконки эмодзи
</STooltip>

Интерфейс компонента

Свойства (Props)

Название	Тип	По умолчанию	Описание
at	'top' | 'bottom' | 'right' | 'left' | null	null	Принудительно задает положение подсказки. По умолчанию рассчитывается автоматически.
icon	string | string[]	'circle-question'	Имя иконки FontAwesome для триггера подсказки.

Слоты (Slots)

Название	Описание
default	Содержимое внутри пузыря подсказки. Поддерживает HTML.
icon	Переопределяет стандартную иконку FontAwesome. Позволяет разместить эмодзи, текст или кастомные элементы.