Skip to content

Commit e33c698

Browse files
bastienmouliabastienmoulia
committed
feat: enhance tooltip functionality with new positions and custom styles
1 parent 062a26a commit e33c698

File tree

9 files changed

+123
-118
lines changed

9 files changed

+123
-118
lines changed

‎apps/demo/public/code/tooltip-custom.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.fancyTooltip {
2+
--ngxo-tooltip-background-color: #e85bc9;
3+
--ngxo-tooltip-text-color: #150db0;
4+
--ngxo-tooltip-offset: 0.1rem;
5+
--ngxo-tooltip-border-radius: 1rem;
6+
--ngxo-tooltip-border: none;
7+
--ngxo-tooltip-padding: 0.5rem 1rem;
8+
--ngxo-tooltip-margin: 0.5rem;
9+
--ngxo-tooltip-font: normal 1.5rem Comic Sans MS, sans-serif;
10+
--ngxo-tooltip-box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
11+
--ngxo-tooltip-transition: opacity 0.5s ease-in-out;
12+
}

‎apps/demo/public/code/tooltip-custom.html‎

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,6 @@
88
Dark mode tooltip
99
</button>
1010

11-
<button
12-
ngxoTooltip="My awesome tooltip"
13-
[ngxoTooltipStyle]="{
14-
'--ngxo-tooltip-background-color': '#e85bc9',
15-
'--ngxo-tooltip-text-color': '#150db0',
16-
'--ngxo-tooltip-offset': '0.1rem',
17-
'--ngxo-tooltip-border-radius': '1rem',
18-
'--ngxo-tooltip-border': 'none',
19-
'--ngxo-tooltip-padding': '0.5rem 1rem',
20-
'--ngxo-tooltip-font': 'normal 1.5rem Comic Sans MS, sans-serif',
21-
'--ngxo-tooltip-box-shadow': '0 0 1rem rgba(0, 0, 0, 0.5)',
22-
'--ngxo-tooltip-transition': 'opacity 0.5s ease-in-out'
23-
}"
24-
>
11+
<button ngxoTooltip="My awesome tooltip" ngxoTooltipClass="fancyTooltip">
2512
Fancy tooltip
2613
</button>

‎apps/demo/public/code/tooltip-position.html‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,10 @@
1-
TODO
1+
<button ngxoTooltip="My awesome tooltip" ngxoTooltipPosition="top">Top</button>
2+
<button ngxoTooltip="My awesome tooltip" ngxoTooltipPosition="bottom">
3+
Bottom
4+
</button>
5+
<button ngxoTooltip="My awesome tooltip" ngxoTooltipPosition="left">
6+
Left
7+
</button>
8+
<button ngxoTooltip="My awesome tooltip" ngxoTooltipPosition="right">
9+
Right
10+
</button>

‎apps/demo/src/app/demo-code/demo-code.component.html‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
11
<div>
22
<ng-content />
33
</div>
4-
<pre><code [highlightAuto]="codeRessource.value()!" lineNumbers></code></pre>
4+
@for (code of codeData(); track $index) {
5+
@if (code.loaded) {
6+
<pre><code [highlight]="code.content" [language]="code.extension" lineNumbers></code></pre>
7+
} @else {
8+
<p>Loading code...</p>
9+
}
10+
}

‎apps/demo/src/app/demo-code/demo-code.component.ts‎

Lines changed: 34 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
import { httpResource } from '@angular/common/http';
1+
import { HttpClient } from '@angular/common/http';
22
import {
33
ChangeDetectionStrategy,
44
Component,
5-
computed,
5+
effect,
6+
inject,
67
input,
8+
linkedSignal,
79
} from '@angular/core';
810
import { HighlightModule } from 'ngx-highlightjs';
911

@@ -15,6 +17,34 @@ import { HighlightModule } from 'ngx-highlightjs';
1517
changeDetection: ChangeDetectionStrategy.OnPush,
1618
})
1719
export class DemoCodeComponent {
18-
codeUrl = input.required<string>();
19-
codeRessource = httpResource.text<string>(() => this.codeUrl());
20+
#httpClient = inject(HttpClient);
21+
22+
codeUrls = input.required<string[]>();
23+
24+
codeData = linkedSignal(() => {
25+
return this.codeUrls().map((url) => {
26+
return {
27+
content: '',
28+
loaded: false,
29+
url: url,
30+
extension: url.split('.').pop() || '',
31+
};
32+
});
33+
});
34+
35+
constructor() {
36+
effect(() => {
37+
for (let i = 0; i < this.codeUrls().length; i++) {
38+
this.#httpClient
39+
.get(this.codeUrls()[i], { responseType: 'text' })
40+
.subscribe((data) => {
41+
this.codeData.update((current) => {
42+
current[i].content = data;
43+
current[i].loaded = true;
44+
return [...current];
45+
});
46+
});
47+
}
48+
});
49+
}
2050
}

‎apps/demo/src/app/tooltip-page/tooltip-page.html‎

Lines changed: 21 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ <h2>Basic Usage</h2>
3737
value. The tooltip will be displayed when the user hovers over the element.
3838
</p>
3939

40-
<app-demo-code [codeUrl]="'/code/tooltip-basic.html'">
40+
<app-demo-code [codeUrls]="['/code/tooltip-basic.html']">
4141
<button ngxoTooltip="My awesome tooltip">Hover me</button>
4242
</app-demo-code>
4343

@@ -50,16 +50,20 @@ <h2>Positioning</h2>
5050
position is <code>top</code>.
5151
</p>
5252

53-
@for(position of positions; track $index) {
54-
<ngxo-tooltip [interestId]="'my-tooltip-' + position" [position]="position"
55-
>My awesome tooltip</ngxo-tooltip
56-
>
57-
<button [attr.interestfor]="'my-tooltip-' + position">{{ position }}</button>
58-
<button ngxoTooltip="My awesome tooltip {{ position }}">
59-
{{ position }}
60-
</button>
61-
62-
}
53+
<app-demo-code [codeUrls]="['/code/tooltip-position.html']">
54+
<button ngxoTooltip="My awesome tooltip" ngxoTooltipPosition="top">
55+
Top
56+
</button>
57+
<button ngxoTooltip="My awesome tooltip" ngxoTooltipPosition="bottom">
58+
Bottom
59+
</button>
60+
<button ngxoTooltip="My awesome tooltip" ngxoTooltipPosition="left">
61+
Left
62+
</button>
63+
<button ngxoTooltip="My awesome tooltip" ngxoTooltipPosition="right">
64+
Right
65+
</button>
66+
</app-demo-code>
6367

6468
<h2>Delay</h2>
6569
<p>
@@ -68,7 +72,7 @@ <h2>Delay</h2>
6872
specified in milliseconds.
6973
</p>
7074

71-
<app-demo-code [codeUrl]="'/code/tooltip-delay.html'">
75+
<app-demo-code [codeUrls]="['/code/tooltip-delay.html']">
7276
<button
7377
ngxoTooltip="My awesome tooltip"
7478
[ngxoTooltipShowDelay]="1000"
@@ -105,7 +109,9 @@ <h2>Custom Styles</h2>
105109
</tbody>
106110
</table>
107111

108-
<app-demo-code [codeUrl]="'/code/tooltip-custom.html'">
112+
<app-demo-code
113+
[codeUrls]="['/code/tooltip-custom.html', '/code/tooltip-custom.css']"
114+
>
109115
<button
110116
ngxoTooltip="My awesome tooltip"
111117
[ngxoTooltipStyle]="{
@@ -115,20 +121,8 @@ <h2>Custom Styles</h2>
115121
>
116122
Dark mode tooltip
117123
</button>
118-
<button
119-
ngxoTooltip="My awesome tooltip"
120-
[ngxoTooltipStyle]="{
121-
'--ngxo-tooltip-background-color': '#e85bc9',
122-
'--ngxo-tooltip-text-color': '#150db0',
123-
'--ngxo-tooltip-offset': '0.1rem',
124-
'--ngxo-tooltip-border-radius': '1rem',
125-
'--ngxo-tooltip-border': 'none',
126-
'--ngxo-tooltip-padding': '0.5rem 1rem',
127-
'--ngxo-tooltip-font': 'normal 1.5rem Comic Sans MS, sans-serif',
128-
'--ngxo-tooltip-box-shadow': '0 0 1rem rgba(0, 0, 0, 0.5)',
129-
'--ngxo-tooltip-transition': 'opacity 0.5s ease-in-out'
130-
}"
131-
>
124+
125+
<button ngxoTooltip="My awesome tooltip" ngxoTooltipClass="fancyTooltip">
132126
Fancy tooltip
133127
</button>
134128
</app-demo-code>

‎apps/demo/src/app/tooltip-page/tooltip-page.ts‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import { KeyValuePipe } from '@angular/common';
22
import { ChangeDetectionStrategy, Component } from '@angular/core';
33
import {
4-
NgxoTooltip,
54
NgxoTooltipPosition,
65
NGXO_TOOLTIP_CSS_VARIABLES,
7-
NgxoTooltipDirective,
6+
NgxoTooltip,
87
} from '@ngx-overlay/ngx-overlay';
98
import { HeaderComponent } from '../header/header.component';
109
import { SidenavComponent } from '../sidenav/sidenav.component';
@@ -14,7 +13,6 @@ import { DemoCodeComponent } from '../demo-code/demo-code.component';
1413
selector: 'app-tooltip-page',
1514
imports: [
1615
NgxoTooltip,
17-
NgxoTooltipDirective,
1816
KeyValuePipe,
1917
HeaderComponent,
2018
SidenavComponent,
@@ -25,6 +23,5 @@ import { DemoCodeComponent } from '../demo-code/demo-code.component';
2523
changeDetection: ChangeDetectionStrategy.OnPush,
2624
})
2725
export class TooltipPage {
28-
positions: NgxoTooltipPosition[] = ['top', 'bottom', 'left', 'right'];
2926
cssVariables = NGXO_TOOLTIP_CSS_VARIABLES;
3027
}

‎apps/demo/src/styles.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,15 @@ body {
55
margin: 0;
66
font-family: 'Segoe UI', Arial, sans-serif;
77
}
8+
9+
.fancyTooltip {
10+
--ngxo-tooltip-background-color: #e85bc9;
11+
--ngxo-tooltip-text-color: #150db0;
12+
--ngxo-tooltip-border-radius: 1rem;
13+
--ngxo-tooltip-border: none;
14+
--ngxo-tooltip-padding: 0.5rem 1rem;
15+
--ngxo-tooltip-margin: 0;
16+
--ngxo-tooltip-font: normal 1.5rem Comic Sans MS, sans-serif;
17+
--ngxo-tooltip-box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5);
18+
--ngxo-tooltip-transition: opacity 0.5s ease-in-out;
19+
}

0 commit comments

Comments
 (0)