Skip to content

Commit 70c3971

Browse files
qianmoQqianmoQ
authored
Merge pull request #5 from qianmoQ/1.0.0-SNAPSHOT
[Component] Add component for tooltips
2 parents 1305100 + f202e70 commit 70c3971

File tree

5 files changed

+156
-0
lines changed

5 files changed

+156
-0
lines changed

‎src/renderer/app/layout/layout.routing.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,10 @@ const LAYOUT_ROUTES: Routes = [
2828
{
2929
path: 'clipboard',
3030
loadChildren: () => import('../pages/component/clipboard/clipboard.module').then(m => m.ComponentClipboardModule)
31+
},
32+
{
33+
path: 'tooltips',
34+
loadChildren: () => import('../pages/component/tooltips/tooltips.module').then(m => m.TooltipsComponentModule)
3135
}
3236
]
3337
}

‎src/renderer/app/layout/navigation/navigation.component.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@
1616
<li routerLinkActive="navigation__active">
1717
<a [routerLink]="['/component/clipboard']">Clipboard</a>
1818
</li>
19+
<li routerLinkActive="navigation__active">
20+
<a [routerLink]="['/component/tooltips']">Tooltips</a>
21+
</li>
1922
</ul>
2023
</li>
2124
</ul>

‎src/renderer/app/pages/component/tooltips/tooltips.component.html‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
<section class="content--row">
2+
<header class="content__title">
3+
<h1>Tooltips</h1>
4+
<small>This template is built using <code>ngx-bootstrap/tooltip</code> and provides some usage examples</small>
5+
</header>
6+
<div class="card">
7+
<div class="card-body">
8+
<h4 class="card-title">Content nested tooltips</h4>
9+
<h6 class="card-subtitle">This is an example of content nesting tooltips</h6>
10+
I am a
11+
<a [routerLink]="['/component/tooltips']" tooltip="Tooltip">Tooltip</a> When the mouse moves over me, I pop it up.
12+
<br/>I'm the other one
13+
<a [routerLink]="['/component/tooltips']" tooltip="Another Tooltip">Tooltips(Mouse over to me)</a>
14+
</div>
15+
</div>
16+
<div class="card">
17+
<div class="card-body">
18+
<h4 class="card-title">Bearing tooltips</h4>
19+
<h6 class="card-subtitle">Here are examples of azimuth tooltips</h6>
20+
<div class="btn-demo">
21+
<button type="button" class="btn btn-primary" tooltip="On the left side of the display" placement="left">
22+
On the left side of the display
23+
</button>
24+
<button type="button" class="btn btn-primary" tooltip="At the top of the display" placement="top">
25+
At the top of the display
26+
</button>
27+
<button type="button" class="btn btn-primary" tooltip="At the bottom of the display" placement="bottom">
28+
At the bottom of the display
29+
</button>
30+
<button type="button" class="btn btn-primary" tooltip="On the right" placement="right">
31+
On the right
32+
</button>
33+
<button type="button" class="btn btn-primary" tooltip="Automatic position display" placement="auto">
34+
Automatic position display
35+
</button>
36+
</div>
37+
</div>
38+
</div>
39+
<div class="card">
40+
<div class="card-body">
41+
<h4 class="card-title">Mouse click displays tooltips</h4>
42+
<h6 class="card-subtitle">Here is an example of a mouse click displaying tooltips</h6>
43+
<div class="btn-demo">
44+
<button type="button" class="btn btn-primary" tooltip="Mouse click display" triggers="focus">
45+
Mouse click display
46+
</button>
47+
</div>
48+
</div>
49+
</div>
50+
<div class="card">
51+
<div class="card-body">
52+
<h4 class="card-title">The content delivered back end displays tooltips</h4>
53+
<h6 class="card-subtitle">Here is an example of a back-end delivered content display tooltips</h6>
54+
<div class="btn-demo">
55+
<button type="button" class="btn btn-primary" [tooltip]="content">
56+
Displays the content sent from the back end
57+
</button>
58+
</div>
59+
</div>
60+
</div>
61+
<div class="card">
62+
<div class="card-body">
63+
<h4 class="card-title">Display module contents tooltips</h4>
64+
<h6 class="card-subtitle">Here is an example tooltips for displaying the contents of a module</h6>
65+
<div class="btn-demo">
66+
<ng-template #tolTemplate>I'm a module : {{content}}</ng-template>
67+
<button type="button" class="btn btn-primary" [tooltip]="tolTemplate">
68+
Display module contents
69+
</button>
70+
</div>
71+
</div>
72+
</div>
73+
<div class="card">
74+
<div class="card-body">
75+
<h4 class="card-title">Overlays show tooltips</h4>
76+
<h6 class="card-subtitle">Here is an example of overwriting the display tooltips</h6>
77+
<div class="btn-demo">
78+
<div class="row" style="position: relative; overflow: hidden; padding-top: 10px;">
79+
<div class="col-xs-12 col-12">
80+
<button type="button" class="btn btn-danger" tooltip="The default tooltips">
81+
The default tooltips
82+
</button>
83+
<button type="button" class="btn btn-success" tooltip="Overlays show tooltips" container="body">
84+
Overlays show tooltips
85+
</button>
86+
</div>
87+
</div>
88+
</div>
89+
</div>
90+
</div>
91+
<div class="card">
92+
<div class="card-body">
93+
<h4 class="card-title">Control display tooltips</h4>
94+
<h6 class="card-subtitle">Here is an example of a controlled display of tooltips</h6>
95+
<div class="btn-demo">
96+
<p>
97+
<span tooltip="Control show me oh" triggers="" #pop="bs-tooltip">
98+
Control show me oh
99+
</span>
100+
</p>
101+
<button type="button" class="btn btn-success" (click)="pop.show()">
102+
Show
103+
</button>
104+
<button type="button" class="btn btn-warning" (click)="pop.hide()">
105+
Hidden
106+
</button>
107+
</div>
108+
</div>
109+
</div>
110+
</section>

‎src/renderer/app/pages/component/tooltips/tooltips.component.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Component, OnInit } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-component-tooltips',
5+
templateUrl: './tooltips.component.html'
6+
})
7+
export class TooltipsComponent implements OnInit {
8+
content: string = 'Displays the content sent from the back end';
9+
10+
constructor() {
11+
}
12+
13+
ngOnInit() {
14+
}
15+
}

‎src/renderer/app/pages/component/tooltips/tooltips.module.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { CommonModule } from '@angular/common';
2+
import { NgModule } from '@angular/core';
3+
import { RouterModule } from '@angular/router';
4+
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
5+
import { TooltipModule } from 'ngx-bootstrap/tooltip';
6+
import { TooltipsComponent } from './tooltips.component';
7+
8+
const TOOLTIPS_ROUTES = [
9+
{path: '', component: TooltipsComponent}
10+
];
11+
12+
@NgModule({
13+
declarations: [
14+
TooltipsComponent
15+
],
16+
imports: [
17+
CommonModule,
18+
BsDropdownModule.forRoot(),
19+
TooltipModule.forRoot(),
20+
RouterModule.forChild(TOOLTIPS_ROUTES)
21+
]
22+
})
23+
export class TooltipsComponentModule {
24+
}

0 commit comments

Comments
 (0)