Начало работы

Подключение и использование

Javascript-расширение ui.hint позволяет показывать подсказки на странице.

Подключение на PHP-странице

\Bitrix\Main\UI\Extension::load("ui.hint");

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

В html-коде достаточно указать у элемента атрибут data-hint c текстом:

<span data-hint="Моя первая подсказка"></span>

Кастомизация

Если присутствует атрибут data-hint-no-icon, то подсказка будет показываться при наведении на блок, который содержит атрибут data-hint (без добавления иконки).

<div data-hint="Моя вторая подсказка" data-hint-no-icon>Я - блок</div>

Содержимое как HTML

Если присутствует атрибут data-hint-html, то текст из data-hint будет выводиться "как есть", без санитайзера, позволяя добавить, например, переносы строк.

Будьте внимательны, помните о безопасности!

<div data-hint="Моя подсказка<br>с переносом строки" data-hint-html>Я - блок</div>

Интерактивная подсказка

Если необходимо, чтобы подсказка не пропадала при наведении (например если в подсказке есть ссылка, на которую нужно нажать), можно добавить атрибут data-hint-interactivity.

<div data-hint="Текст подсказки. <a href='#'>Подробнее</a>" data-hint-html data-hint-interactivity>Блок с ссылкой</div>

Инициализация

В js-коде необходимо инициализировать подсказку. Будут созданы подсказки для всех дочерних элементов контейнера:

BX.UI.Hint.init(BX('container'));

Пример

<?
\Bitrix\Main\UI\Extension::load("ui.hint");
?>

<script type="text/javascript">
	BX.ready(function() {
		BX.UI.Hint.init(BX('my-container'));
	})
</script>

<div id="my-container">
	<div>
		Подсказка 1  
		<span data-hint="<?=Loc::getMessage('MY_HINT_1')?>"></span>
	</div>

	<div>
		Подсказка 2 
		<span data-hint="<?=Loc::getMessage('MY_HINT_2')?>"></span>
	</div>
</div>

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

При формировании верстки в js, можно получить элемент для вставки из текста:

containerElement.appendChild(
	BX.UI.Hint.createNode("Моя вторая подсказка.")
);

Пользовательские комментарии

Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.

Для этого нужно всего лишь авторизоваться на сайте

Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.

Виктор Третьяков 16.11.2024 10:02:47

Сообщение не промодерировано, возможны ошибки и неточности.

Использование ui.hint с VueJs

Код

<?php

Bitrix\Main\UI\Extension::load(['ui.vue3', 'ui.hint']);
?>

<sc ript>
BX.Vue3.BitrixVue.createApp({
    template: `
        <div>
            <p>
                Текст
                <span
                    class="ui-hint-icon"
                    @mouseenter="showHint"
                    @mouseleave="hideHint"
                ></span>
            </p>
        </div>
    `,

    methods: {
        showHint (event) {
            const hintMessage = 'Поясняющий текст';
            BX.UI.Hint.show.call(BX.UI.Hint, event.target, hintMessage, false);
        },

        hideHint (event) {
            BX.UI.Hint.hide.call(BX.UI.Hint, event.target);
        },
    },
}).mount('#app');
</sc ript>

0 Максим Безводинских 11.07.2024 17:50:01 Сообщение не промодерировано, возможны ошибки и неточности.
Еще есть атрибут data-hint-center который центрирует попап по отношению к целевому hint <span data-hint-center data-hint-no-icon data-hint="Моя первая подсказка">Здесь подсказка</span>

Vadim Kushnir 01.07.2024 12:49:49

Сообщение не промодерировано, возможны ошибки и неточности.

Код

/**
 * @param node {Node} Нода к которомой привязываем подсказку
 * @param hintHtml {string} Html подсказки
 * @param msToShow {number?} Время жизни подсказки
 * @param center {boolean?} Центрировать ли подсказку?
 */
function showNodeHint(node, hintHtml, msToShow, center)
{
   if(!node)
      return;
   
   if(typeof node._hintInstance === 'undefined')
      node._hintInstance = BX.UI.Hint.createInstance();
   
   if(typeof node._hintTimer !== 'undefined')
      clearTimeout(node._hintTimer);
   
   node._hintInstance.show(node, hintHtml, center);
   
   node._hintTimer = setTimeout(function()
   {
      node._hintInstance.hide(node);
   }, msToShow || 3000);
}

Если хотим отображать подсказку динамически. При желании изменять названия классов (ui-hint-*), в BX.UI.Hint.createInstance можно передавать параметры для кастомизации.

Валерий Чебан 09.07.2023 02:37:52

Сообщение не промодерировано, возможны ошибки и неточности.

Еще есть атрибут data-hint-no-icon отключающий вставку иконки, тем самым можно реализовать подсказку со своей картинки:

Код

<!--noindex--><a href="/personal/cart/" rel="nofollow" data-hint-html data-hint-no-icon data-hint="<?=htmlspecialcharsbx($title)?>">
      <img src="<?=SITE_TEMPLATE_PATH?>/images/top-bar/cart-icon.svg" alt="cart" title="Корзина (<?=$quantity?>)">
</a><!--/noindex-->

Евгений Наумов 03.11.2022 12:18:44

Сообщение не промодерировано, возможны ошибки и неточности.

По умолчанию хинты не выводятся как html. Чтобы выводился как html, нужно добавть аттрибут data-hint-html

Код
<span data-hint-html data-hint="Моя первая <b>подсказка</b>"></span>

Наверх