Tooltip | Basic UI

Вступление #

Чтобы создать всплывающую подсказку, к элементу необходимо добавить класс .js-tooltip и атрибут data-tooltip-content с текстом или разметкой для подсказки.

Всплывающая подсказка реализована на базе Headless Tippy.

Идейные соображения высшего порядка, а также консультация с широким активом влечет за собой процесс внедрения и модернизации соответствующий условий активизации. Равным образом начало повседневной работы по формированию позиции обеспечивает широкому кругу (специалистов) участие в формировании модели развития.

Равным образом рамки и место обучения кадров требуют определения и уточнения форм развития. Задача организации, в особенности же сложившаяся структура организации способствует подготовки и реализации новых предложений. Равным образом новая модель организационной деятельности влечет за собой процесс внедрения и модернизации дальнейших направлений развития.

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

Установка #

Пример разметки и инициализации всплывающей подсказки.

<p>
	Идейные
	<span class="js-tooltip" data-tooltip-content="Небольшая подсказка"
		>соображения высшего порядка</span
	>, а также консультация с широким активом влечет за собой процесс внедрения и модернизации
	соответствующий условий активизации. Равным образом начало повседневной работы по формированию
	позиции обеспечивает широкому кругу (специалистов) участие в
	<span
		class="js-tooltip"
		data-tooltip-content='Так же принимает полноценную <i style="color: red;">html</i>-разметку'
		>формировании</span
	>
	модели развития.
</p>

// настройки Headless Tippy(https://atomiks.github.io/tippyjs/v6/all-props/)
const options = {
	trigger: 'click',
	placement: 'bottom',
}

BasicTooltip.init('.my-tooltip-trigger', options)
BasicTooltip.init(document.querySelector('.my-tooltip-trigger'), options)
BasicTooltip.init(document.querySelectorAll('.my-tooltip-trigger'), options)

// или

BasicTooltip.init() // по умолчанию инициaлизирует элементы с классом .js-tooltip и с дата-атрибутами: data-tooltip-content и data-tooltip-options

Конфигурация #

data-tooltip-options #

В значениях указываются параметры для гибкой настройки всплывающей подсказки, с ними можно ознакомиться на странице официальной документации Tippy.js.

<p>
	Небольшое предложение с
	<span
		class="js-tooltip"
		data-tooltip-options='{"trigger": "click"}'
		data-tooltip-content="Небольшая подсказка"
		>подсказкой</span
	>
</p>

data-tooltip-content #

Текст для всплывающей подсказки.

data-tooltip-position #

Указывает позицию всплывающей подсказки. Со значениями можно ознакомиться на странице официальной документации Tippy.js.

Методы #

show() #

Показывает всплывающую подсказку.

// принимает значение типа Object или String
// в значениях указывается триггер всплывающей подсказки
BasicTooltip.show('.my-tooltip-trigger')

hide() #

Скрывает всплывающую подсказку.

// принимает значение типа Object или String
// в значениях указывается триггер всплывающей подсказки
BasicTooltip.hide('.my-tooltip-trigger')

Экземпляр #

У каждого инициализированного элемента есть свой экземпляр.

const myTooltipTrigger = document.querySelector('.my-tooltip-trigger')

console.log(myTooltipTrigger.BasicTooltip) // пример экземпляра

В настоящее время экземпляр поддерживает все методы.

Прослушивание событий #

Можно прослушать события элемента и получить нужные параметры.

tooltip:change #

Срабатывает при переключении видимости подсказки.

Параметры:

Название	Тип	Описание
`event.detail.trigger`	`object`	Триггер всплывающей подсказки.
`event.detail.content`	`object`	Контент подсказки.
`event.detail.show`	`boolean`	Статус видимости подсказки(виден: `true`, скрыт: `false`).

const myTooltipTrigger = document.querySelector('.my-tooltip-trigger')

myTooltipTrigger.addEventListener(
	'tooltip:change',
	function (event) {
		console.log(event.detail) // параметры
	},
	false,
)