Skip to content

Instantly share code, notes, and snippets.

@cdcarson

cdcarson/animation.ts

Last active August 14, 2017 22:04
Show Gist options
  • Save cdcarson/cdfb8d7fbb5eccc11e184fc41ce4de11 to your computer and use it in GitHub Desktop.
Save cdcarson/cdfb8d7fbb5eccc11e184fc41ce4de11 to your computer and use it in GitHub Desktop.
Download ZIP
Tooltip Examples
Raw
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 { }
Raw
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();
}
}
Raw
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>`;
}
Raw
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 { }
Raw
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 {}
Raw
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 {}
Raw
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 { }
Raw
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 { }
Raw
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>
Raw
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);
}
}
}
Raw
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 { }
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment