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);