Tooltip Examples

animation.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-tooltip-demo-animation',
  template: `<p>
    <button
      class="btn btn-primary"
      nzbTooltip
      title="I'm animated by default">
      Animated Tooltip</button>
  </p>
  <p>
    <button
      class="btn btn-primary"
      nzbTooltip
      data-animation="false"
      title="I'm not animated">
      Not Animated</button>
  </p>
  `
})
export class TooltipDemoAnimationComponent { }

container.ts

import { Component, AfterViewInit, ViewChild } from '@angular/core';

@Component({
  selector: 'app-tooltip-demo-container',
  template: `
  <!-- default: no  data-container -->
  <p>
    <button
      class="btn btn-primary"
      nzbTooltip
      data-placement="right"
      data-trigger="manual"
      #defaultTooltip="nzbTooltip"
      (click)="defaultTooltip.toggle()"
      title="Tooltip title.">
      Default</button>
      <br>
      <small>Attached to: {{defaultTooltipAttachedTo}}</small>
  </p>

  <!-- attached to p tag -->
  <p id="containerExampleParagraph">
    <button
      class="btn btn-primary"
      nzbTooltip
      data-container="#containerExampleParagraph"
      data-placement="right"
      data-trigger="manual"
      #attachedTooltip="nzbTooltip"
      (click)="attachedTooltip.toggle()"
      title="Tooltip title.">
      Attached to p tag</button>
      <br>
      <small>Attached to: {{attachedTooltipAttachedTo}}</small>
  </p>
  `
})
export class TooltipDemoContainerComponent implements AfterViewInit {
  @ViewChild('defaultTooltip') defaultTooltip;
  @ViewChild('attachedTooltip') attachedTooltip;

  defaultTooltipAttachedTo: string;
  attachedTooltipAttachedTo: string;
  constructor() { }

  ngAfterViewInit() {
    this.defaultTooltip.events.subscribe((event: Event) => {
      if (event.type === 'shown'){
        this.defaultTooltipAttachedTo = this.defaultTooltip.getPopupData().tip.parentNode.toString();

      }
    })
    this.attachedTooltip.events.subscribe((event: Event) => {
      if (event.type === 'shown'){
        this.attachedTooltipAttachedTo = this.attachedTooltip.getPopupData().tip.parentNode.toString();
      }
    })
    this.defaultTooltip.show();
    this.attachedTooltip.show();
  }

}

custom-template.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-tooltip-demo-custom-template',
  template: `
  <!-- custom template -->
  <p id="app-tooltip-demo-custom-template-ctr">
    <button
      class="btn btn-primary"
      nzbTooltip
      [attr.data-template]="template"
      title="Fancy style.">
      Custom Template</button>
  </p>
  `
})
export class TooltipDemoCustomTemplateComponent  {
  template = `<div class="tooltip tooltip-danger" role="tooltip">
                <div class="arrow"></div>
                <div class="tooltip-inner"></div>
              </div>`;
}

delay.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-tooltip-demo-delay',
  template: `
  <p>
    <button
      class="btn btn-primary"
      nzbTooltip
      data-delay="500"
      title="I'm delayed">
      Delayed 500ms</button>
  </p>
  `
})
export class TooltipDemoDelayComponent { }

fallback-placement.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-tooltip-demo-fallback-placement',
  template: `
  <p>
    <!-- flip (default) -->
    <button
      class="btn btn-primary"
      nzbTooltip
      title="Tooltip title.">
      Flip</button>
    <!-- clockwise -->
    <button
      class="btn btn-primary"
      nzbTooltip
      data-fallbackPlacement="clockwise"
      title="Tooltip title.">
      Clockwise</button>

      <!-- counterclockwise -->
      <button
        class="btn btn-primary"
        nzbTooltip
        data-fallbackPlacement="counterclockwise"
        title="Tooltip title.">
        Counterclockwise</button>
  </p>
  `,
  styles: []
})
export class TooltipDemoFallbackPlacementComponent {}

html.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-tooltip-demo-html',
  template: `
  <!-- html = false (default) -->
  <p>
    <button
      class="btn btn-primary"
      nzbTooltip
      title="<em>Woops</em>">
      Default: html = false</button>
  </p>
  <!-- html = true -->
  <p>
    <button
      class="btn btn-primary"
      nzbTooltip
      data-html="true"
      title="<em>Better</em>">
       html = true</button>
  </p>
  `,
  styles: []
})
export class TooltipDemoHtmlComponent  {}

offset.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-tooltip-demo-offset',
  template: `
  <p>
    <button
      class="btn btn-primary"
      nzbTooltip
      data-offset="0px 10px"
      title="I'm offset">
      Offset by 10px</button>
  </p>
  `
})
export class TooltipDemoOffsetComponent { }

placement.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-tooltip-demo-placement',
  template: `
  <p>
    <!-- placement = 'top' (default) -->
    <button class="btn btn-primary"
      nzbTooltip
      title="Tooltip on top (default)">Top</button>
    <!-- placement = 'bottom' -->
    <button class="btn btn-primary"
        nzbTooltip
        data-placement="bottom"
        title="Tooltip on bottom">Bottom</button>
  </p>
  <p>
  <!-- placement = 'left' -->
    <button class="btn btn-primary"
      nzbTooltip
      data-placement="left"
      title="Tooltip on left">Left</button>
  <!-- placement = 'right' -->
    <button class="btn btn-primary"
      nzbTooltip
      data-placement="right"
      title="Tooltip on right">Right</button>
  </p>
  <p>
    <!-- placement = 'auto' -->
    <button
      class="btn btn-primary"
      nzbTooltip
      data-placement="auto"
      title="Automatic placement">Auto</button>
  </p>
  `
})
export class TooltipDemoPlacementComponent  { }

title-attribute.html

<!-- using the title attribute with default options -->
<button
  class="btn btn-primary"
  nzbTooltip
  title="This is the tooltip title from the title attribute.">
  Tooltip (title attr)
</button>

<!-- using the title attribute with some other options defined -->
<button
  class="btn btn-primary"
  [nzbTooltip]="{placement: 'left', html: true}"
  title="This is the tooltip title from the title attribute <strong>with other options</strong> defined.">
  Tooltip (title attr + options)
</button>

title.ts

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-tooltip-demo-title',
  template: `
  <!-- using title attr -->
  <p>
    <button
      class="btn btn-primary"
      nzbTooltip
      title="This is the tooltip title.">
      Tooltip (from title)</button>
  </p>
  <!-- using data-title -->
  <p>
    <button
      class="btn btn-primary"
      nzbTooltip
      data-title="This is the tooltip title defined in data-title">
      Tooltip (from data-title)</button>
  </p>
  <!-- using tooltipTitleTemplate -->
  <p>
    <button
      class="btn btn-primary"
      nzbTooltip
      [tooltipTitleTemplate]="myTooltip"
      title="this will be ignored"
      data-title="this too will be ignored">
      Tooltip (from Template)</button>
    <ng-template #myTooltip>
      This is from the template. Count: {{count}}
    </ng-template>
  </p>
  `,
  styles: []
})
export class TooltipDemoTitleComponent implements OnInit, OnDestroy {

  count: number = 0;
  interval: any = null;

  constructor() { }

  ngOnInit() {
    this.interval  = setInterval(() => {
      this.count++;
    }, 1000)
  }

  ngOnDestroy(){
    if (this.interval) {
      clearInterval(this.interval);
    }
  }

}

trigger.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-tooltip-demo-trigger',
  template: `
  <p>
    <!-- trigger = 'hover focus' (default) -->
    <button class="btn btn-primary"
      nzbTooltip
      title="Tooltip title">hover focus</button>
      <!-- trigger = 'click' -->
      <button class="btn btn-primary"
        nzbTooltip
        data-trigger="click"
        title="Tooltip title">click</button>
  </p>
  <p>
  <!-- trigger = 'manual' -->
  <button class="btn btn-primary"
    nzbTooltip
    data-trigger="manual"
    #manualTooltip="nzbTooltip"
    (mousedown)="manualTooltip.show()"
    (mouseup)="manualTooltip.hide()"
    (mouseout)="manualTooltip.hide()"
    title="Tooltip title">manual</button>
  </p>
  `
})
export class TooltipDemoTriggerComponent { }

usage.html

<!-- use a template with interpolation for the tooltip... -->
<button 
  nzbTooltip 
  [nzbTooltipTemplate]="myFancyTip">Tooltip</button>
<ng-template #myFancyTip>
  Hello {{name}}!
</ng-template>

<!-- or just use the title attribute... -->
<button nzbTooltip title="Tooltip Title">Tooltip</button>

<!-- use a Bootstrap's native data- attributes to set options... -->
<button 
  nzbTooltip 
  title="I'm not animated" 
  data-animation="false"
  data-position="auto">Tooltip</button>