Skip to content

Commit f208b33

Browse files
author
pipeline
committed
bug(EJ2-2519): tooltip review comments addressed.
1 parent bc2c527 commit f208b33

23 files changed

+520
-14
lines changed

‎index.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,15 @@
3838
<ng-app class="e-view audjust-sb-header animate-sb-header"></ng-app>
3939
</div>
4040

41+
<script>
42+
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
43+
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
44+
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
45+
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
46+
47+
ga('create', 'UA-233131-15', 'auto');
48+
ga('send', 'pageview');
49+
</script>
4150
</body>
4251
<script src="dist/main.bundle.js"></script>
4352

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@
4545
"gulp-sass": "^3.1.0",
4646
"gulp-typescript": "^3.1.6",
4747
"requirejs": "^2.3.3",
48-
"typescript": "2.2.2",
48+
"typescript": "2.3.4",
4949
"browser-sync": "2.11.2",
5050
"webpack": "2.5.1"
5151
},

‎src/common/samplelist.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { calendarAppRoutes } from '../calendar/calendar.module';
88
import { chartAppRoutes } from '../chart/chart.module';
99
import { dialogAppRoutes } from '../dialog/dialog.module';
1010
import { textboxesAppRoutes } from '../textboxes/textboxes.module';
11+
import { tooltipAppRoutes } from '../tooltip/tooltip.module';
1112
export let samplesList: any = [
1213
{
1314
'name': 'Chart', 'category': 'Datavisualization', 'order': '01', 'path': 'chart', 'samples': chartAppRoutes
@@ -38,5 +39,8 @@ export let samplesList: any = [
3839
},
3940
{
4041
'name': 'Toolbar', 'category': 'Navigation', 'order': '05', 'path': 'toolbar', 'samples': toolbarAppRoutes
42+
},
43+
{
44+
'name': 'Tooltip', 'category': 'Layout', 'order': '04', 'path': 'tooltip', 'samples': tooltipAppRoutes
4145
}
4246
];

‎src/common/sb.router.ts

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,21 @@ import { NumericModule } from '../numerictextbox/numericTextBox.module';
1010
import { ChartSampleModule } from '../chart/chart.module';
1111
import { DialogSampleModule } from '../dialog/dialog.module';
1212
import { TextboxesModule } from '../textboxes/textboxes.module';
13+
import { TooltipSampleModule } from '../tooltip/tooltip.module';
1314

14-
const  appRoutes:  any  =  [
15-
{  path:  'chart',  loadChildren:  ChartSampleModule  },
16-
{  path:  'grid',  loadChildren:  GridSampleModule  },
17-
{  path:  'form-validator',  loadChildren:  FormValidatorModule  },
18-
{  path:  'Button',  loadChildren:  ButtonModule  },
19-
{  path:  'calendar',  loadChildren:  CalendarSampleModule  },
20-
{  path:  'numerictextbox',  loadChildren:  NumericModule  },
21-
{  path:  'listview',  loadChildren:  ListViewSampleModule  },
22-
{  path:  'dialog',  loadChildren:  DialogSampleModule  },
23-
{  path:  'textboxes',  loadChildren:  TextboxesModule  },
24-
{  path:  'toolbar',  loadChildren:  ToolbarSampleModule  },
25-
{  path:  '',  redirectTo:  'chart/line',  pathMatch:  'full'  }
15+
const appRoutes: any = [
16+
{ path: 'chart', loadChildren: ChartSampleModule },
17+
{ path: 'grid', loadChildren: GridSampleModule },
18+
{ path: 'form-validator', loadChildren: FormValidatorModule },
19+
{ path: 'Button', loadChildren: ButtonModule },
20+
{ path: 'calendar', loadChildren: CalendarSampleModule },
21+
{ path: 'numerictextbox', loadChildren: NumericModule },
22+
{ path: 'listview', loadChildren: ListViewSampleModule },
23+
{ path: 'dialog', loadChildren: DialogSampleModule },
24+
{ path: 'textboxes', loadChildren: TextboxesModule },
25+
{ path: 'toolbar', loadChildren: ToolbarSampleModule },
26+
{ path: 'tooltip', loadChildren: TooltipSampleModule },
27+
{ path: '', redirectTo: 'chart/line', pathMatch: 'full' }
2628
];
2729

2830
@NgModule({
@@ -37,6 +39,7 @@ const  appRoutes:  any  =  [
3739
TextboxesModule,
3840
DialogSampleModule,
3941
ToolbarSampleModule,
42+
TooltipSampleModule,
4043
RouterModule.forRoot(appRoutes)
4144
],
4245

‎src/dialog/modal.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="control-section" style="padding:10px;position:relative;">
2-
<div id="modalTarget" #targetModal class="col-md-9 control-section">
2+
<div id="modalTarget" #targetModal class="col-md-9 control-section" style="height:350px;">
33
<button ej-button id='modalbtn' #modalButton (click)="modalBtnClick()">Open</button>
44

55
<ej-dialog id="modalDialog" #modalDialog [isModal]='isModal' [header]='header' [target]='target' [width]='width' [buttons]='buttons' [animationSettings]='animationSettings' [content]='content' (open)="modalDlgOpen()" (close)="modalDlgClose()"

‎src/tooltip/ajaxcontent.component.ts

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { Component, ViewChild, ViewEncapsulation, Inject } from '@angular/core';
2+
import { TooltipComponent, TooltipEventArgs } from '@syncfusion/ej2-ng-popups';
3+
import { Http } from '@angular/http';
4+
/**
5+
* Tooltip Component
6+
*/
7+
@Component({
8+
selector: 'control-content',
9+
templateUrl: 'ajaxcontent.html',
10+
styleUrls: ['tooltip.component.css'],
11+
encapsulation: ViewEncapsulation.None
12+
})
13+
export class AjaxContentTooltipComponent {
14+
15+
public listViewData: { [key: string]: Object }[] = [
16+
{ id: 1, text: 'Australia' },
17+
{ id: 2, text: 'Bhutan' },
18+
{ id: 3, text: 'China' },
19+
{ id: 4, text: 'Cuba' },
20+
{ id: 5, text: 'India' },
21+
{ id: 6, text: 'Switzerland' },
22+
{ id: 7, text: 'United States' }
23+
];
24+
public fields: Object = { text: 'text', tooltip: 'id' };
25+
26+
@ViewChild('tooltip')
27+
public tooltipControl: TooltipComponent;
28+
29+
constructor( @Inject('sourceFiles') private sourceFiles: any, @Inject(Http) public http: Http) {
30+
sourceFiles.files = ['tooltip.component.css'];
31+
}
32+
33+
onBeforeRender(args: TooltipEventArgs) {
34+
this.tooltipControl.content = 'Loading...';
35+
this.tooltipControl.dataBind();
36+
this.http.get('./src/tooltip/tooltipdata.json')
37+
.map(res => res.json())
38+
.subscribe(
39+
(result: any) => {
40+
for (let i: number = 0; i < result.length; i++) {
41+
if (result[i].Id === args.target.getAttribute('data-content')) {
42+
/* tslint:disable */
43+
this.tooltipControl.content = "<div class='contentWrap'><img src='src/tooltip/images/"
44+
+ result[i].Sports + ".png' class='logo' /><div class='def'>" + result[i].Sports + "</div></div>";
45+
/* tslint:enable */
46+
}
47+
}
48+
this.tooltipControl.dataBind();
49+
},
50+
(err: Response) => {
51+
this.tooltipControl.content = err.statusText;
52+
this.tooltipControl.dataBind();
53+
});
54+
}
55+
}

‎src/tooltip/ajaxcontent.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<div class="control-section" style="padding-left:15px;">
2+
<h4 class="listheader">National Sports</h4>
3+
<ej-tooltip #tooltip id="Tooltip" style="display:block;" class="e-prevent-select" content='Loading...' target="#countrylist [title]" position='right center'
4+
(beforeRender)="onBeforeRender($event)">
5+
<ej-listview id='countrylist' [dataSource]='listViewData' [fields]='fields'></ej-listview>
6+
</ej-tooltip>
7+
</div>
8+
<div id="description">
9+
<p>This sample illustrates the way to load the content of a tooltip dynamically using AJAX request. Here, when the user
10+
hovers/tap on the country names, its respective data (national game of each country and its related game icon) will
11+
be retrieved dynamically and then assigned to the tooltip’s content.</p>
12+
<p>The AJAX request should be made within the <code>beforeRender</code> event of the tooltip, and on every success – the correspondingly
13+
retrieved data will be set to the <code>content</code> property of the tooltip.</p>
14+
<p>More information on loading dynamic tooltip content can be found in this
15+
<a href="http://ej2.syncfusion.com/angular/documentation/tooltip/content.html#dynamic-content-via-ajax" target="_blank"> documentation section</a>.
16+
</p>
17+
</div>

‎src/tooltip/default.component.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Component, ViewChild } from '@angular/core';
2+
import { TooltipComponent, Position } from '@syncfusion/ej2-ng-popups';
3+
4+
/**
5+
* Default Tooltip Component
6+
*/
7+
@Component({
8+
selector: 'control-content',
9+
templateUrl: 'default.html'
10+
})
11+
export class DefaultTooltipComponent {
12+
@ViewChild('tooltip')
13+
public control: TooltipComponent;
14+
onChange(value: string) {
15+
this.control.position = value as Position;
16+
}
17+
}

‎src/tooltip/default.html

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<div class="control-section">
2+
<div class="col-lg-8" style="min-height:inherit;">
3+
<ej-tooltip #tooltip content='Lets go green & Save Earth !!!' style="display:block;position:absolute;left:calc( 50% - 60px);top:45%;">
4+
<button ej-button>Show Tooltip</button>
5+
</ej-tooltip>
6+
</div>
7+
<div class="col-lg-4 property-section">
8+
<div class="property-panel-section">
9+
<div class="property-panel-header">Properties</div>
10+
<div class="property-panel-content">
11+
<table id="property" class="property-panel-table" title="Properties">
12+
<tbody>
13+
<tr>
14+
<td style="width: 30%">
15+
<div>Position</div>
16+
</td>
17+
<td style="width: 70%;padding-right: 10px">
18+
<div>
19+
<select id="positions" (change)="onChange($event.target.value)" class="form-control">
20+
<option value="top left">Top Left</option>
21+
<option value="top center" selected>Top Center</option>
22+
<option value="top right">Top Right</option>
23+
<option value="bottom left">Bottom Left</option>
24+
<option value="bottom center">Bottom Center</option>
25+
<option value="bottom right">Bottom Right</option>
26+
<option value="left top">Left Top</option>
27+
<option value="left center">Left Center</option>
28+
<option value="left bottom">Left Bottom</option>
29+
<option value="right top">Right Top</option>
30+
<option value="right center">Right Center</option>
31+
<option value="right bottom">Right Bottom</option>
32+
</select>
33+
</div>
34+
</td>
35+
</tr>
36+
</tbody>
37+
</table>
38+
</div>
39+
</div>
40+
</div>
41+
</div>
42+
<div id="description">
43+
<p>
44+
This sample illustrates a tooltip, that gets opened on hovering the target labelled “Hover Me”. The tooltip can be shown
45+
on 12 possible positions, by selecting the appropriate position values provided in the dropdown. The applicable tooltip
46+
positions are as follows,
47+
</p>
48+
<ul>
49+
<li><code>top left</code></li>
50+
<li><code>top center</code></li>
51+
<li><code>top right</code></li>
52+
<li><code>bottom left</code></li>
53+
<li><code>bottom center</code></li>
54+
<li><code>bottom right</code></li>
55+
<li><code>left top</code></li>
56+
<li><code>left center</code></li>
57+
<li><code>left bottom</code></li>
58+
<li><code>right top</code></li>
59+
<li><code>right center</code></li>
60+
<li><code>right bottom</code></li>
61+
</ul>
62+
<p>
63+
In case, if the tooltip needs to be opened on mobile devices, tap hold on the target labelled “Hover Me” instead of hovering
64+
and by default, it closes after 1.5 seconds on lift.
65+
</p>
66+
<p>
67+
More information on Tooltip instantiation can be found in this
68+
<a href="http://ej2.syncfusion.com/angular/documentation/tooltip/getting-started.html" target="_blank"> documentation section</a>.
69+
</p>
70+
</div>

‎src/tooltip/images/Archery.png

349 Bytes
Loading

0 commit comments

Comments
 (0)