Skip to content

Commit b498952

Browse files
Mohammad JavedMohammad Javed
Mohammad Javed
authored and
Mohammad Javed
committed
feat(tooltip): Added tooltip component
1 parent 3c74c6a commit b498952

File tree

7 files changed

+160
-1
lines changed

7 files changed

+160
-1
lines changed

‎projects/core/src/lib/tooltip.ts

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { computed, Directive, effect, input, TemplateRef } from "@angular/core";
2+
import { tv } from "tailwind-variants";
3+
import { injectTooltipTriggerState, NgpTooltip, NgpTooltipTrigger } from "ng-primitives/tooltip";
4+
5+
const tooltipVariants = tv({
6+
slots: {
7+
base: 'absolute bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[exit]:animate-out data-[exit]:fade-out-0 data-[exit]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--ngp-tooltip-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
8+
triggerVariant: ''
9+
}
10+
});
11+
12+
const { base, triggerVariant } = tooltipVariants();
13+
14+
@Directive({
15+
selector: '[uiTooltip]',
16+
exportAs: 'uiTooltip',
17+
host: {
18+
'[class]': 'computedClass()'
19+
},
20+
hostDirectives: [NgpTooltip],
21+
})
22+
export class UiTooltip {
23+
inputClass = input<string>('', { alias: 'class' });
24+
computedClass = computed(() => base({ class: this.inputClass() }));
25+
}
26+
27+
@Directive({
28+
selector: '[uiTooltipTrigger]',
29+
exportAs: 'uiTooltipTrigger',
30+
hostDirectives: [{
31+
directive: NgpTooltipTrigger,
32+
inputs: ['ngpTooltipTriggerDisabled: uiTooltipTriggerDisabled, ngpTooltipTriggerPlacement: uiTooltipTriggerPlacement, ngpTooltipTriggerOffset: uiTooltipTriggerOffset, ngpTooltipTriggerShowDelay: uiTooltipTriggerShowDelay, ngpTooltipTriggerHideDelay: uiTooltipTriggerHideDelay, ngpTooltipTriggerFlip: uiTooltipTriggerFlip, ngpTooltipTriggerContainer: uiTooltipTriggerContainer, ngpTooltipTriggerContext: uiTooltipTriggerContext'],
33+
}],
34+
})
35+
export class UiTooltipTrigger {
36+
inputClass = input<string>('', { alias: 'class' });
37+
computedClass = computed(() => triggerVariant({ class: this.inputClass() }));
38+
private readonly state = injectTooltipTriggerState();
39+
readonly trigger = input.required<TemplateRef<any>>({
40+
alias: 'uiTooltipTrigger',
41+
});
42+
constructor() {
43+
effect(() => this.state().tooltip.set(this.trigger()));
44+
}
45+
}

‎projects/core/src/public-api.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,5 @@ export * from './lib/accordion';
66
export * from './lib/tabs';
77
export * from './lib/badge';
88
export * from './lib/dialog';
9-
export * from './lib/popover';
9+
export * from './lib/popover';
10+
export * from './lib/tooltip';

‎projects/docs/src/app/components.routes.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,10 @@ export const routes: Routes = [
3333
path: 'popover',
3434
loadComponent: () => import('./pages/docs/components/popover/popover.component').then(c => c.PopoverComponent)
3535
},
36+
{
37+
path: 'tooltip',
38+
loadComponent: () => import('./pages/docs/components/tooltip/tooltip.component').then(c => c.TooltipComponent)
39+
},
3640
{
3741
path: 'tabs',
3842
loadComponent: () => import('./pages/docs/components/tabs/tabs.component').then(c => c.TabsComponent)

‎projects/docs/src/app/components/sidenav/sidenav.component.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export class SidenavComponent {
3838
{ name: 'Dialog', path: 'dialog' },
3939
{ name: 'Dropdown Menu', path: 'dropdown-menu' },
4040
{ name: 'Popver', path: 'popover' },
41+
{ name: 'Tooltip', path: 'tooltip' },
4142
]
4243
}
4344
];

‎projects/docs/src/app/pages/docs/components/tooltip/tooltip.component.html

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<p
2+
class="from-indigo-700 to-blue-500 mb-2 inline-block bg-gradient-to-r bg-clip-text text-sm font-medium text-transparent">
3+
Components
4+
</p>
5+
<h1 class="text-2xl font-semibold">Tooltip</h1>
6+
7+
<p class="mt-4 text-md text-muted-foreground">
8+
A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers
9+
over it.
10+
</p>
11+
12+
13+
<div class="mt-5">
14+
<docs-example [code]="TOOLTIP_CODES.DEFAULT">
15+
<button [uiTooltipTrigger]="tooltip" uiButton variant="outline">
16+
Tooltip
17+
</button>
18+
19+
<ng-template #tooltip>
20+
<div uiTooltip>
21+
<p>Add to library</p>
22+
</div>
23+
</ng-template>
24+
</docs-example>
25+
</div>
26+
27+
28+
<h2 class="text-xl font-semibold my-5 border-b border-border pb-3 mt-10" id="installation">Installation</h2>
29+
<docs-installation-guide [cliCode]="cliCode" [npmCode]="TOOLTIP_CODES.DEFAULT"></docs-installation-guide>
30+
31+
<h2 class="text-xl font-semibold my-5 border-b border-border pb-3 mt-10" id="usage">Usage</h2>
32+
33+
<docs-code-view [code]="importCode"></docs-code-view>
34+
<docs-code-view class="mt-5 block" [code]="usageCode" language="html"></docs-code-view>
35+
36+
<h2 class="text-xl font-semibold my-5 border-b border-border pb-3 mt-10" id="examples">Examples</h2>
37+
38+
<div class="mt-5">
39+
<h3 class="text-lg font-semibold mb-3" id="default">Default</h3>
40+
<docs-example [code]="TOOLTIP_CODES.DEFAULT">
41+
<button [uiTooltipTrigger]="tooltip" ngpTooltipTriggerPlacement="bottom" uiButton variant="outline">
42+
Tooltip
43+
</button>
44+
45+
<ng-template #tooltip>
46+
<div uiTooltip>
47+
<h3>Need Help?</h3>
48+
<p>
49+
Get quick tips and guidance on how to use this feature effectively.
50+
Check out our documentation for more details!
51+
</p>
52+
53+
<a target="_blank" href="https://www.youtube.com/watch?v=xvFZjo5PgG0">Learn More</a>
54+
</div>
55+
</ng-template>
56+
</docs-example>
57+
</div>

‎projects/docs/src/app/pages/docs/components/tooltip/tooltip.component.ts

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { Component } from '@angular/core';
2+
import { TooltipCodeConstants } from './tooltip.constants';
3+
import { ExampleComponent } from '../../../../components/example/example.component';
4+
import { CodeViewComponent } from '../../../../components/code-view/code-view.component';
5+
import { InstallationGuideComponent } from '../../../../components/installation-guide/installation-guide.component';
6+
import { UiButton, UiTooltip, UiTooltipTrigger } from '@angularui/core';
7+
8+
@Component({
9+
selector: 'docs-tooltip',
10+
imports: [ExampleComponent, CodeViewComponent, InstallationGuideComponent, UiTooltip, UiTooltipTrigger, UiButton],
11+
templateUrl: './tooltip.component.html'
12+
})
13+
export class TooltipComponent {
14+
15+
importCode = `import { UiButton, UiTooltip, UiTooltipTrigger } from '@angularui/core';`
16+
usageCode = `
17+
<button [uiTooltipTrigger]="tooltip" uiButton variant="outline">
18+
Tooltip
19+
</button>
20+
21+
<ng-template #tooltip>
22+
<div uiTooltip>
23+
<p>Add to library</p>
24+
</div>
25+
</ng-template>`;
26+
27+
cliCode = `ng g @angularui/core:component tooltip`;
28+
29+
TOOLTIP_CODES = TooltipCodeConstants;
30+
}

‎projects/docs/src/app/pages/docs/components/tooltip/tooltip.constants.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
export class TooltipCodeConstants {
2+
static readonly DEFAULT = `
3+
import { Component } from '@angular/core';
4+
import { UiButton, UiTooltip, UiTooltipTrigger } from '@angularui/core';
5+
6+
@Component({
7+
selector: 'tooltip-demo',
8+
imports: [UiButton, UiTooltip, UiTooltipTrigger],
9+
template: \` <button [uiTooltipTrigger]="tooltip" uiButton variant="outline">
10+
Tooltip
11+
</button>
12+
13+
<ng-template #tooltip>
14+
<div uiTooltip>
15+
<p>Add to library</p>
16+
</div>
17+
</ng-template> \`
18+
})
19+
export class TooltipComponent {}
20+
`;
21+
}

0 commit comments

Comments
 (0)