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

Для интеграции Tooltipster с Angular необходимо сначала установить библиотеку через npm:

npm install tooltipster jquery

Tooltipster зависит от jQuery, поэтому его также нужно подключить в проекте. В Angular это делается через angular.json:

"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/tooltipster/dist/js/tooltipster.bundle.min.js"
],
"styles": [
  "node_modules/tooltipster/dist/css/tooltipster.bundle.min.css"
]

После этого библиотека и стили будут доступны в приложении.

Инициализация Tooltipster на компонентах

Angular использует компонентный подход, поэтому для корректной работы Tooltipster следует инициализировать его после того, как элемент появился в DOM. Это делается в методе ngAfterViewInit:

import { Component, AfterViewInit, ElementRef } from '@angular/core';
declare var $: any;

@Component({
  selector: 'app-tooltip-example',
  template: `
    <button class="tooltip" title="Пример подсказки">Наведи на меня</button>
  `
})
export class TooltipExampleComponent implements AfterViewInit {
  constructor(private el: ElementRef) {}

  ngAfterViewInit() {
    $(this.el.nativeElement).find('.tooltip').tooltipster({
      theme: 'tooltipster-default',
      delay: 200,
      animation: 'fade',
      interactive: true
    });
  }
}

Ключевые моменты:

  • Использование ElementRef гарантирует, что поиск элементов будет локальным для компонента.
  • Инициализация в ngAfterViewInit обязательна, так как элементы должны существовать в DOM.
  • Настройки Tooltipster (theme, delay, animation, interactive) можно конфигурировать для каждого компонента индивидуально.

Динамическое управление содержимым

Tooltipster позволяет менять контент подсказки динамически, что особенно полезно в Angular с реактивными данными:

ngAfterViewInit() {
  const $tooltip = $(this.el.nativeElement).find('.tooltip');

  $tooltip.tooltipster({
    content: 'Изначальный текст',
    interactive: true
  });

  setTimeout(() => {
    $tooltip.tooltipster('content', 'Обновленный текст подсказки');
  }, 3000);
}

Особенности:

  • Метод 'content' позволяет менять текст или HTML.
  • Можно использовать асинхронные данные, например, загруженные через HTTP-запрос.

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

При работе с динамическими списками важно инициализировать Tooltipster после рендеринга всех элементов:

@Component({
  selector: 'app-tooltip-list',
  template: `
    <ul>
      <li *ngFor="let item of items" class="tooltip" [title]="item.tooltip">
        {{ item.name }}
      </li>
    </ul>
  `
})
export class TooltipListComponent implements AfterViewInit {
  items = [
    { name: 'Элемент 1', tooltip: 'Подсказка 1' },
    { name: 'Элемент 2', tooltip: 'Подсказка 2' },
  ];

  constructor(private el: ElementRef) {}

  ngAfterViewInit() {
    $(this.el.nativeElement).find('.tooltip').tooltipster({
      theme: 'tooltipster-light',
      delay: 100
    });
  }
}

Важно: при добавлении новых элементов после инициализации нужно повторно инициализировать Tooltipster для новых узлов или использовать делегирование событий.

Привязка событий Angular к Tooltipster

Tooltipster поддерживает события, которые можно использовать для интеграции с Angular логикой:

$tooltip.tooltipster({
  functionBefore: (instance, helper) => {
    console.log('Перед показом подсказки', helper.origin);
  },
  functionReady: (instance, helper) => {
    console.log('Подсказка показана', helper.tooltip);
  },
  functionAfter: (instance, helper) => {
    console.log('Подсказка скрыта');
  }
});

Особенности использования:

  • helper.origin — DOM-элемент, к которому привязана подсказка.
  • События позволяют вызывать методы Angular-компонента через this или сервисы.

Создание глобального сервиса для Tooltipster

Чтобы избежать дублирования кода, можно создать Angular-сервис для управления Tooltipster:

import { Injectable } from '@angular/core';
declare var $: any;

@Injectable({ providedIn: 'root' })
export class TooltipService {
  initTooltip(element: HTMLElement, options: any = {}) {
    $(element).tooltipster({
      theme: 'tooltipster-shadow',
      delay: 200,
      ...options
    });
  }

  setContent(element: HTMLElement, content: string) {
    $(element).tooltipster('content', content);
  }

  destroy(element: HTMLElement) {
    $(element).tooltipster('destroy');
  }
}

Использование сервиса в компоненте:

constructor(private tooltipService: TooltipService, private el: ElementRef) {}

ngAfterViewInit() {
  const button = this.el.nativeElement.querySelector('.tooltip');
  this.tooltipService.initTooltip(button, { interactive: true });
}

Преимущества сервиса:

  • Централизованное управление настройками Tooltipster.
  • Легкая замена темы или поведения для всех подсказок в приложении.
  • Удобство тестирования и поддержки кода.

Настройка тем и стилей

Tooltipster позволяет создавать кастомные темы или расширять существующие. Пример подключения своей темы в Angular:

/* tooltip-custom.scss */
.tooltipster-custom {
  background: #333;
  color: #fff;
  border-radius: 6px;
  font-size: 14px;
  padding: 8px 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

Применение темы при инициализации:

$tooltip.tooltipster({
  theme: 'tooltipster-custom',
  animation: 'grow'
});

Интерактивные подсказки с Angular формами

Tooltipster поддерживает интерактивный контент, что полезно для форм:

template: `
  <input class="tooltip" title="<input type='text' placeholder='Введите имя' />" />
`

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

$('.tooltip').tooltipster({
  contentAsHTML: true,
  interactive: true
});

Особенности:

  • contentAsHTML: true позволяет вставлять HTML-контент.
  • interactive: true гарантирует, что подсказка не закроется при наведении на элементы внутри нее.

Tooltipster в Angular обеспечивает гибкую интеграцию через сервисы, локальные элементы и реактивный контент, позволяя создавать как простые текстовые подсказки, так и интерактивные, динамически обновляемые всплывающие окна.

Оглавление