Всплывающая подсказка

overbox
sm
md
lg
xl

Модальное окно в виде всплывающей подсказки

Активация

Событие активирующее содержимое подсказки, параметр action для JS и атрибут sf-action для HTML

Активая с помощью JavaScript

Наведение Клик 
// Hover
new SF.Overbox(
	'.js-sf-overbox--hover',
	{
		src : '#js-sf-overbox--js',
	}
)
//Click
new SF.Overbox(
	'.js-sf-overbox--click',
	{
		src : '#js-sf-overbox--js',
		action : 'click'
	}
)

Активация с помощью attributes атрибутов HTML

Наведение Клик 
<!-- Hover -->
<a href="javascript:void(0)" class="m-right-1" sf-overbox sf-src="#js-sf-overbox">
	Наведение
</a>
<!-- Click -->
<a href="javascript:void(0)" class="m-right-1" sf-overbox sf-action="click" sf-src="#js-sf-overbox">
	Клик
</a>
<div id="js-sf-overbox" style="display:none">
	Содержимое. Содержимое.
	Содержимое. Содержимое.
	Содержимое
</div>

Позиционирование

Расположение подсказки, подпарамет position параметра tooltip для JS и атрибут sf-tooltip для HTML

Позиционирование с помощью JavaScript

Авто Сверху Справа Снизу Слева 
// Auto
new SF.Overbox(
	'.js-sf-overbox--auto',
	{
		src : '#js-sf-overbox--position-js',
		action : 'click'
	}
);
// Top
new SF.Overbox(
	'.js-sf-overbox--top',
	{
		src : '#js-sf-overbox--position-js',
		action : 'click',
		tooltip : {
			active : true,
			position : 'top'
		}
	}
);
// Right
new SF.Overbox(
	'.js-sf-overbox--right',
	{
		src : '#js-sf-overbox--position-js',
		action : 'click',
		tooltip : {
			active : true,
			position : 'right'
		}
	}
);
// Bottom
new SF.Overbox(
	'.js-sf-overbox--bottom',
	{
		src : '#js-sf-overbox--position-js',
		action : 'click',
		tooltip : {
			active : true,
			position : 'bottom'
		}
	}
);
// Left
new SF.Overbox(
	'.js-sf-overbox--left',
	{
		src : '#js-sf-overbox--position-js',
		action : 'click',
		tooltip : {
			active : true,
			position : 'left'
		}
	}
);

Позиционирование с помощью HTML

Авто Сверху Справа Снизу Слева 
<a href="javascript:void(0)" class="m-right-1" sf-overbox sf-action="click" sf-src="#js-sf-overbox">
	Авто
</a>
<a href="javascript:void(0)" class="m-right-1" sf-overbox="top" sf-action="click" sf-src="#js-sf-overbox--position" sf-close>
	Сверху
</a>
<a href="javascript:void(0)" class="m-right-1" sf-overbox="right" sf-action="click" sf-src="#js-sf-overbox--position" sf-close>
	Справа
</a>
<a href="javascript:void(0)" class="m-right-1" sf-overbox="bottom" sf-action="click" sf-src="#js-sf-overbox--position" sf-close>
	Снизу
</a>
<a href="javascript:void(0)" class="" sf-overbox="left" sf-action="click" sf-src="#js-sf-overbox--position" sf-close>
	Слева
</a>
<div id="js-sf-overbox--position" style="display:none">
	Содержимое. Содержимое.
	Содержимое. Содержимое.
	Содержимое
</div>

Указатель

Указатель подсказки, подпарамет active параметра pointer для JS и атрибут sf-pointer для HTML

JavaScript

Без указателя С указателем 
// No pointer
new SF.Overbox(
	'.js-sf-overbox--pointer-no',
	{
		src : '#js-sf-overbox--pointer-js',
		action : 'click',
		pointer : {
			active : false,
		}
	}
);

// With pointer
new SF.Overbox(
	'.js-sf-overbox--pointer',
	{
		src : '#js-sf-overbox--pointer-js',
		action : 'click',
		pointer : {
			active : true,
		}
	}
);

HTML

Без указателя С указателем 
<!-- No pointer -->
<a href="javascript:void(0)" class="m-right-1" sf-overbox sf-action="click" sf-src="#js-sf-overbox--pointer-html" pointer="false">
	Без указателя
</a>
<!-- With pointer -->
<a href="javascript:void(0)" class="m-right-1" sf-overbox sf-action="click" sf-src="#js-sf-overbox--pointer-html" pointer="true">
	С указателем
</a>
<div id="js-sf-overbox--pointer-html" style="display:none">
	Содержимое с указателем.
	Содержимое с указателем.
	Содержимое с указателем.
	Содержимое с указателем.
	Содержимое с указателем
</div>

Кнопка "Закрыть"

Кнопка "Закрыть" подсказки, подпарамет active параметра close для JS и атрибут sf-close для HTML

JavaScript

Без кнопки "Закрыть" С кнопккой "Закрыть" 
// No button Close
new SF.Overbox(
	'.js-sf-overbox--close-no',
	{
		src : '#js-sf-overbox--close-js',
		action : 'click',
		close : {
			active : false,
		}
	}
);
// With button Close
new SF.Overbox(
	'.js-sf-overbox--close',
	{
		src : '#js-sf-overbox--close-js',
		action : 'click',
		close : {
			active : true,
		}
	}
);

HTML

Без кнопки "Закрыть" С кнопккой "Закрыть" 
<a href="javascript:void(0)" class="m-right-1" sf-overbox sf-action="click" sf-src="#js-sf-overbox--close-html">
	Без кнопки "Закрыть"
</a>
<a href="javascript:void(0)" class="m-right-1" sf-overbox sf-action="click" sf-src="#js-sf-overbox--close-html" pointer="false" sf-close>
	С кнопккой "Закрыть"
</a>
<div id="js-sf-overbox--close-html" style="display:none">
	Содержимое с кнопкой закрыть. Содержимое с кнопкой закрыть.
	Содержимое с кнопкой закрыть. Содержимое с кнопкой закрыть.
	Содержимое с кнопкой закрыть
</div>

Меню

JavaScript

Меню 
new SF.Overbox(
	'.js-sf-overbox--menu-js',
	{
		src : '#js-sf-overbox--menu-js-menu',
		action : 'click',
		close : {
			active : true,
		}
	}
);

HTML

Меню 
<a href="javascript:void(0)" class="m-right-1" sf-overbox="top" sf-modal-modifier="w-full bg-surface-0 radius-1/3" sf-action="click" sf-src="#js-sf-overbox--menu" sf-close>
	Меню
</a>

Адаптивность

Для установки адаптивности постраничной навигации, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к любому модификатору.

Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.

Изменить статью