tooltips

@stvelte-plugins/utputips

Простое действие для подъема инструментов и компонент, предназначенные для стр.

Попробуйте в стройной реплике.

Установить

yarn add @svelte-plugins/tooltips

# or with NPM

npm i @svelte-plugins/tooltips

# or with PNPM

pnpm i @svelte-plugins/tooltips

Использование компонента подъема инструментов

< script >
  import { Tooltip } from " @svelte-plugins/tooltips " ;
</ script >

< Tooltip content = " Hello world! " >
 Check out my tooltip
</ Tooltip >

Использование действия подъема инструментов

< script >
  import { tooltip } from " @svelte-plugins/tooltips " ;
</ script >

Checkout out my < u title = " Hello World! " use:tooltip >tooltip</ u >

Checkout out my < u use:tooltip ={{ content : ' Hello World! ' }}>tooltip</ u >

API

Реквизит

Проп	Описание	Ценить
действие	Действие, которое запускает подсказку (нависнуть	нажимать
анимация	Анимация для применения к подсказке	string (по умолчанию: ``)
стрелка	Если false , стрелка для подъема инструментов не будет показана.	boolean (по умолчанию: true )
автопозиция	Регулируйте позицию подъема инструментов, если происходит обрезка просмотра	boolean (по умолчанию: false )
содержание	Строка или объект, содержащий компонент и реквизит	string
задерживать	Задержка анимации в миллисекундах для применения к подъеме инструментов	number (по умолчанию: 200 )
hideonclickoutside	Скрывает всплывающую подсказку, когда происходит внешний щелчок	boolean (по умолчанию: false )
максимума	Максимальная допустимая ширина содержания подъема инструментов	number (по умолчанию: 200 )
позиция	Позиция, в которой должна появляться всплывающая подсказка относительно его родителя	string (по умолчанию: top )
показывать	Позволяет вам вручную контролировать видимость подсказки	boolean (по умолчанию: false )
стиль	Объект, содержащий переопределения переменной темы	object (по умолчанию: null )
тема	Название тематического класса CSS	string (по умолчанию: ``)

Использование компонентов в качестве контента

Проп	Описание	Ценить
Content.component	Стройный компонент	component (по умолчанию: null )
Content.props	Любая компонентная проката	object (по умолчанию: null )

< script >
  import ComponentAsTooltip from ' ./ComponentAsTooltip ' ;
</ script >

Checkout out my < span use:tooltip ={{ content : { component : ComponentAsTooltip , props : { title : ' Hello World! ' } } }}>tooltip</ span >

Тематическое

Вы можете настроить тему подсказки инструментов, используя несколько методов:

• Назначьте имя класса темы через свойство theme , которое включает все ваши переоценки переменных CSS
• Определите переопределения напрямую, используя свойство style
• Переопределить переменные CSS во всем мире

Пароли для подсказки CSS:

 --tooltip-arrow-size : 10 px ;
--tooltip-background-color : rgba ( 0 , 0 , 0 , 0.9 );
--tooltip-border-radius : 4 px ;
--tooltip-box-shadow : 0 1 px 20 px rgba ( 0 , 0 , 0 , 0.25 );
--tooltip-font-family : -apple-system , BlinkMacSystemFont , 'Segoe UI' , Roboto , Oxygen-Sans , Ubuntu , Cantarell ,
  'Helvetica Neue' , sans-serif;
--tooltip-font-size : 14 px ;
--tooltip-font-weight : 500 ;
--tooltip-line-height : 1.25 rem ;
--tooltip-color : # fff ;
--tooltip-offset-x : 12 px ;
--tooltip-offset-y : 12 px ;
--tooltip-padding : 12 px ;
--tooltip-white-space-hidden : nowrap;
--tooltip-white-space-shown : normal;
--tooltip-z-index : 100 ;

Использование свойства темы

// action
< span title = "hello world!" use:tooltip ={{ theme : ' custom-tooltip ' }}>Hover over me</ span >

// component
< Tooltip content = " hello world! " theme = " custom-tooltip " >Hover over me</ Tooltip >

< style >
  :global( .tooltip.custom-tooltip ) {
    --tooltip-background-color : hotpink ;
    --tooltip-box-shadow : 0 1 px 8 px pink ;
  }
</ style >

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

// action
< span title = "hello world!" use:tooltip ={{ style : { backgroundColor : ' blue ' , borderRadius : ' 10px ' } }}>Hover over me</ span >

// component
< Tooltip content = "hello world!" style ={{ style : { backgroundColor : ' blue ' } }}>Hover over me</ Tooltip >

Изменение

Изменение

Лицензия

Грань