Skip to content

Instantly share code, notes, and snippets.

@cdcarson

cdcarson/tooltip-demo-0.html

Last active August 19, 2017 20:20
Show Gist options
  • Save cdcarson/a093f7f69144b5380ac7be766f0bd7ef to your computer and use it in GitHub Desktop.
Save cdcarson/a093f7f69144b5380ac7be766f0bd7ef to your computer and use it in GitHub Desktop.
Download ZIP
Tooltip examples for nowzoo-angular-bootstrap-lite
Raw
tooltip-demo-0.html
<button class="btn btn-primary"
nzbTooltip
[nzbTooltipTitle]="quickstartTitle"
data-placement="auto">Quick Example (Hover)</button>
<ng-template #quickstartTitle>Tooltip Title</ng-template>
Raw
tooltip-demo-add-class.component.ts
import { Component, AfterViewInit, OnDestroy, ViewChild } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import 'rxjs/add/operator/filter';
declare const jQuery: any;
import { NzbTooltipDirective } from 'nowzoo-angular-bootstrap-lite';
@Component({
selector: 'app-tooltip-demo-add-class',
template: `
<p>
<button class="btn btn-primary"
nzbTooltip
#tooltipInstance="nzbTooltip"
[nzbTooltipTitle]="tooltipContent"
data-placement="auto">
Tooltip Demo (Hover)
</button>
<ng-template #tooltipContent>
This tooltip
<strong *ngIf="!dangerClassOn">does not have</strong>
<strong *ngIf="dangerClassOn">has</strong>
the extra .danger class.
</ng-template>
</p>
<p>
<button class="btn btn-secondary btn-sm" (click)="toggle()">
Toggle Class
</button>
<strong>On:</strong> {{dangerClassOn | json}}
</p>
`
})
export class TooltipDemoAddClassComponent implements AfterViewInit, OnDestroy {
@ViewChild('tooltipInstance') tooltipInstance: NzbTooltipDirective;
dangerClassOn: boolean = true;
private sub: Subscription;
toggle() {
// check to see that tip exists (it does not if the popover has not yet been opened)...
let tip = this.tooltipInstance.boostrapComponentData.tip || null;
this.dangerClassOn = ! this.dangerClassOn;
if (tip) {
jQuery(tip).toggleClass('danger', this.dangerClassOn);
}
}
ngAfterViewInit() {
// make sure we toggle the class at least once...
this.sub = this.tooltipInstance.events
.filter((event:Event) => 'inserted' === event.type)
.subscribe(() => {
jQuery(this.tooltipInstance.boostrapComponentData.tip)
.toggleClass('danger', this.dangerClassOn);
})
}
ngOnDestroy() {
this.sub.unsubscribe();
}
}
Raw
tooltip-demo-attributes.html
<button class="btn btn-primary"
nzbTooltip
title="Static tooltip title"
data-placement="auto">
Demo Tooltip (Hover)
</button>
Raw
tooltip-demo-disable.html
<button class="btn btn-primary"
nzbTooltip
#tooltipInstance="nzbTooltip"
title="Enable/Disable Demo"
data-placement="auto">
Tooltip Demo (Hover)
<span *ngIf="tooltipInstance.enabled"> - Enabled</span>
<span *ngIf="!tooltipInstance.enabled"> - Disabled</span>
</button>
<button class="btn btn-secondary btn-sm"
[disabled]="tooltipInstance.enabled"
(click)="tooltipInstance.enable()">enable()</button>
<button class="btn btn-secondary btn-sm"
[disabled]="!tooltipInstance.enabled"
(click)="tooltipInstance.disable()">disable()</button>
<button class="btn btn-secondary btn-sm"
(click)="tooltipInstance.toggleEnabled()">toggleEnabled()</button>
Raw
tooltip-demo-goes-away.component.ts
import { Component, AfterViewInit, ViewChild } from '@angular/core';
import { NzbTooltipDirective } from 'nowzoo-angular-bootstrap-lite';
@Component({
selector: 'app-tooltip-demo-hide-on-route-change',
template: `<p>
<button class="btn btn-primary"
nzbTooltip
#tooltipInstance="nzbTooltip"
title="Tooltip goes away nicely">
Tooltip Demo</button>
</p>
`
})
export class TooltipDemoHideOnRouteChangeComponent implements AfterViewInit {
@ViewChild('tooltipInstance') tooltipInstance: NzbTooltipDirective;
ngAfterViewInit() {
setTimeout(() => {
this.tooltipInstance.show();
})
}
}
Raw
tooltip-demo-instance.component.ts
import { Component, AfterViewInit, ViewChild, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { NzbTooltipDirective } from 'nowzoo-angular-bootstrap-lite';
@Component({
selector: 'app-tooltip-demo-get-instance',
template: `
<p>
<button class="btn btn-primary"
nzbTooltip
#tooltipInstance="nzbTooltip"
title="Tooltip Instance Demo"
data-placement="auto">
Tooltip Demo (Hover)
</button>
</p>
<p>
<strong>Status:</strong> {{tooltipInstance.status | async | json}}
</p>
<p><strong>Last 5 Events (Newest First):</strong></p>
<ol>
<li *ngFor="let e of last5Events">{{e.type}}.{{e.namespace}} at {{e.timeStamp | amDateFormat: 'H:mm:ss.SSSS'}}</li>
</ol>
`
})
export class TooltipDemoGetInstanceComponent implements AfterViewInit, OnDestroy {
@ViewChild('tooltipInstance') tooltipInstance: NzbTooltipDirective;
private sub: Subscription;
last5Events: Event[] = []
ngAfterViewInit() {
this.sub = this.tooltipInstance.events.subscribe((boostrapEvent: Event) => {
this.last5Events.unshift(boostrapEvent);
this.last5Events = this.last5Events.slice(0, 5)
})
}
ngOnDestroy() {
this.sub.unsubscribe();
}
}
Raw
tooltip-demo-manual.html
<button class="btn btn-primary"
nzbTooltip
#tooltipInstance="nzbTooltip"
title="Show/Hide/Toggle Example"
data-placement="top"
data-trigger="manual">
Tooltip Demo (Manual)
</button>
<button class="btn btn-secondary btn-sm"
[disabled]="tooltipInstance.shown"
(click)="tooltipInstance.show()">show()</button>
<button class="btn btn-secondary btn-sm"
[disabled]="tooltipInstance.hidden"
(click)="tooltipInstance.hide()">hide()</button>
<button class="btn btn-secondary btn-sm"
(click)="tooltipInstance.toggle()">toggle()</button>
Raw
tooltip-demo-placement.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-tooltip-demo-placement-func',
template: `<p>
<button class="btn btn-primary"
nzbTooltip
[nzbTooltipPlacement]="getPlacement"
title="This tooltip was placed by a function.">
Tooltip Demo (Hover)</button>
</p>
`
})
export class TooltipDemoPlacementFuncComponent {
getPlacement(tooltipEl, targetEl){
// do some fancy calculation here based on the small breakpoint...
if (window.innerWidth < 576){
return 'top';
} else {
return 'left';
}
}
}
Raw
tooltip-demo-templates.component.ts
import { Component, AfterViewInit, OnDestroy, ViewChild} from '@angular/core';
@Component({
selector: 'app-tooltip-demo-templates',
template: `
<!-- templates example -->
<p>
<button class="btn btn-primary"
nzbTooltip
[nzbTooltipTitle]="titleTemplate"
data-placement="auto"
#tooltipInstance="nzbTooltip">Demo Tooltip (Hover)</button>
</p>
<ng-template #titleTemplate >
<i class="fa fa-clock-o fa-spin"></i>
This popover has been open for
{{seconds}} second<span *ngIf="seconds!==1">s</span>!
</ng-template>
`
})
export class TooltipDemoTemplatesComponent implements AfterViewInit, OnDestroy {
@ViewChild('tooltipInstance') tooltipInstance: any;
interval: any = null;
seconds: number = 0;
constructor() { }
ngAfterViewInit() {
this.tooltipInstance.events.subscribe((nativeBsEvent: Event) => {
switch(nativeBsEvent.type){
case 'show':
this.seconds = 0;
this.interval = setInterval(() => {
this.seconds++;
}, 1000);
break;
case 'hidden':
clearInterval(this.interval);
this.interval = null;
break;
}
})
}
ngOnDestroy() {
if (this.interval){
clearInterval(this.interval);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment