Skip to content

AzA-95/Tooltip

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

    <div data-tooltip data-offset="10" data-pos="right" data-event="click" data-modclass="Модификатор класса" data-text="Text"></div>

По умолчанию:
modClass: ''
offset: 5
close: true
position: 'top'

Можно создать отдельный экземпляр тултипа

    var tooltip = new Tooltip('tooltip');   // например, 'tooltip' - название класса тултипа
    tooltip.init(element, {                 // инициализация, element - тег, по координатам которого выведем тултип
        modClass: '',                       // класс модификатор, если нужно изменить внешний вид
        offset: 5,                          // смещение относительно элемента
        close: true,                        // кнопка закрытия по умолчанию выводится
        position: 'top'                     // по умолчанию выводится сверху
    });
    tooltip.html('text');                   // текст, который надо вывести
    tooltip.show();                         // принудительно показываем на странице тултип
    tooltip.update();                       // обновляем координаты, если вдруг вставили новый текст
    tooltip.close();                        // закрываем тултип

Пример кода на четвертой кнопке

    var tooltip = new Tooltip('tooltip');
tooltip
    .init(document.querySelector('[data-tooltip2]'), {
        modClass: 'tooltip_mod4',
        position: 'right',
        offset: 10,
        close: true
    })
    .html('Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem')
    .show();

setTimeout(function () {

    tooltip
        .html('Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem')
        .updatePosition();

}, 2000);

setTimeout(function () {

    tooltip.close();

    setTimeout(function() {

        tooltip.show();

    }, 2000);

}, 4000);

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • CSS 67.2%
  • HTML 17.3%
  • JavaScript 15.5%