Skip to content

Commit d24990c

Browse files
kmkrish001kmkrish001
authored
Merge pull request #3833 from syncfusion-content/ES-935084-TT
934883: Test and resolve issues in UG all sections - ASP core Tooltip control
2 parents 4f5e020 + d636faf commit d24990c

File tree

25 files changed

+324
-362
lines changed

25 files changed

+324
-362
lines changed

‎ej2-asp-core-mvc/code-snippet/tooltip/ajaxcontent/tagHelper

Lines changed: 24 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,31 @@
1-
<div id='container'>
2-
<h4 class="list-header">National Sports</h4>
3-
<!-- Tooltip element rendering for AjaxContent loading -->
4-
<ejs-tooltip id="Tooltip" content="Loading..." beforeRender="onBeforeRender" target="#countrylist [title]" showTipPointer="true" position="RightCenter">
5-
<e-content-template>
6-
<!-- ListView element -->
7-
<ejs-listview id="countrylist" dataSource="ViewBag.data" enable="true">
8-
<e-listview-fieldsettings text="text" tooltip="id"></e-listview-fieldsettings>
9-
</ejs-listview>
10-
</e-content-template>
11-
</ejs-tooltip>
12-
</div>
1+
2+
<div id='container'>
3+
<h4 class="list-header">National Sports</h4>
4+
<!-- Tooltip element rendering for AjaxContent loading -->
5+
<ejs-tooltip id="Tooltip" content="Loading..." beforeRender="onBeforeRender" target="#countrylist [title]" showTipPointer="true" position="RightCenter">
6+
<e-content-template>
7+
<!-- ListView element -->
8+
<ejs-listview id="countrylist" dataSource="ViewBag.data" enable="true">
9+
<e-listview-fieldsettings text="text" tooltip="id"></e-listview-fieldsettings>
10+
</ejs-listview>
11+
</e-content-template>
12+
</ejs-tooltip>
13+
</div>
1314

1415

1516
<script>
16-
/**
17-
* Process tooltip ajax content.
18-
*/
19-
function onBeforeRender(args) {
20-
var _this = this;
21-
this.content = 'Loading...';
22-
this.dataBind();
23-
var fetchApi = new ej.base.Fetch("@Url.Content("~/Scripts/tooltip/tooltipdata.json")", 'GET');
24-
fetchApi.send().then(function (result) {
17+
/**
18+
* Process tooltip ajax content.
19+
*/
20+
function onBeforeRender(args) {
21+
var _this = this;
22+
this.content = 'Loading...';
23+
this.dataBind();
24+
var fetchApi = new ej.base.Fetch("@Url.Content("~/script/tooltip/tooltipdata.json")", 'GET');
25+
fetchApi.send().then(function (result) {
2526
for (var i = 0; i < result.length; i++) {
2627
if (result[i].Id === args.target.getAttribute('data-content')) {
27-
_this.content = "<div class='contentWrap'><span class=" + result[i].Class + "></span><div class='def'>" + result[i].Sports + "</div></div>";
28+
_this.content = "<div class='contentWrap'><div class='def'>" + result[i].Sports + "</div></div>";
2829
}
2930
}
3031
_this.dataBind();
@@ -34,51 +35,8 @@
3435
});
3536
}
3637
</script>
37-
<link href="~/css/tooltip/icons.css" rel="stylesheet" />
3838
<style>
3939

40-
.e-bigger [class^="sports-icon-"],
41-
.e-bigger [class*=" sports-icon-"] {
42-
font-size: 18px;
43-
}
44-
45-
[class^="sports-icon-"],
46-
[class*=" sports-icon-"] {
47-
font-family: 'sportsicons';
48-
speak: none;
49-
font-size: 16px;
50-
font-style: normal;
51-
font-weight: normal;
52-
font-variant: normal;
53-
text-transform: none;
54-
padding-right: 6px;
55-
vertical-align: middle;
56-
}
57-
58-
.sports-icon-cricket:before {
59-
content: "\e703";
60-
}
61-
62-
.sports-icon-archery:before {
63-
content: "\e705";
64-
}
65-
66-
.sports-icon-table-tennis:before {
67-
content: "\e702";
68-
}
69-
70-
.sports-icon-baseball:before {
71-
content: "\e706";
72-
}
73-
74-
.sports-icon-hockey:before {
75-
content: "\e701";
76-
}
77-
78-
.sports-icon-shooting:before {
79-
content: "\e700";
80-
}
81-
8240
.def {
8341
float: right;
8442
}
@@ -105,4 +63,4 @@
10563
text-align: left;
10664
}
10765
}
108-
</style>
66+
</style>

‎ej2-asp-core-mvc/code-snippet/tooltip/ajaxcontent/tooltipdata.json

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
[
2+
{
3+
"Id": "1",
4+
"Country": "Australia",
5+
"Sports": "Cricket",
6+
"Class": "sports-icon-cricket"
7+
},
8+
{
9+
"Id": "2",
10+
"Country": "Bhutan",
11+
"Sports": "Archery",
12+
"Class": "sports-icon-archery"
13+
},
14+
{
15+
"Id": "3",
16+
"Country": "China",
17+
"Sports": "Table tennis",
18+
"Class": "sports-icon-table-tennis"
19+
},
20+
{
21+
"Id": "4",
22+
"Country": "Cuba",
23+
"Sports": "Baseball",
24+
"Class": "sports-icon-baseball"
25+
},
26+
{
27+
"Id": "5",
28+
"Country": "India",
29+
"Sports": "Hockey",
30+
"Class": "sports-icon-hockey"
31+
},
32+
{
33+
"Id": "6",
34+
"Country": "Switzerland",
35+
"Sports": "Shooting",
36+
"Class": "sports-icon-shooting"
37+
},
38+
{
39+
"Id": "7",
40+
"Country": "United States",
41+
"Sports": "Baseball",
42+
"Class": "sports-icon-baseball"
43+
}
44+
]

‎ej2-asp-core-mvc/code-snippet/tooltip/animation-default/tagHelper

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,16 @@
1-
<ejs-tooltip id="tooltip" content= "Tooltip content" animation="ViewBag.animation">
2-
<e-content-template>
3-
<div id="target">
4-
Show tooltip
5-
</div>
6-
</e-content-template>
7-
</ejs-tooltip>
1+
<ejs-tooltip id="tooltip" content="Tooltip content" animation="ViewBag.animation" position="TopCenter">
2+
<e-content-template>
3+
<ejs-button id="target" content="Show tooltip">
4+
</ejs-button>
5+
</e-content-template>
6+
</ejs-tooltip>
87

98

109
<style>
1110

12-
#target {
13-
background-color: #ececec;
14-
border: 1px solid #c8c8c8;
15-
box-sizing: border-box;
16-
margin: 50px auto;
17-
padding: 10px;
18-
width: 100px;
11+
#tooltip {
12+
position: absolute;
13+
left: calc( 50% - 60px);
14+
top: 38%;
1915
}
20-
</style>
16+
</style>

‎ej2-asp-core-mvc/code-snippet/tooltip/animation-openclose/tagHelper

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,16 @@
1-
<ejs-tooltip id="tooltip" content="Tooltip content" opensOn="Custom" created="created">
2-
<e-content-template>
3-
<div id="target">
4-
Show tooltip
5-
</div>
6-
</e-content-template>
7-
</ejs-tooltip>
1+
2+
<ejs-tooltip id="tooltip" content="Tooltip content" opensOn="Custom" created="created" position="TopCenter">
3+
<e-content-template>
4+
<ejs-button id="target" content="Show tooltip">
5+
</ejs-button>
6+
</e-content-template>
7+
</ejs-tooltip>
88

99
<style>
10-
#target {
11-
background-color: #ececec;
12-
border: 1px solid #c8c8c8;
13-
box-sizing: border-box;
14-
margin: 50px auto;
15-
padding: 10px;
16-
width: 100px;
10+
#tooltip {
11+
position: absolute;
12+
left: calc( 50% - 60px);
13+
top: 38%;
1714
}
1815
</style>
1916
<script>
@@ -29,4 +26,4 @@
2926
}
3027
});
3128
}
32-
</script>
29+
</script>

‎ej2-asp-core-mvc/code-snippet/tooltip/animation-transition/tagHelper

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
1-
<ejs-tooltip id="tooltip" target=".circletool" beforeRender="onBeforeRender" afterClose="onAfterClose" closeDelay=1000 animation="ViewBag.animation">
2-
<e-content-template>
3-
<div>
4-
<h3> Transition effect </h3>
5-
<div id="box" class="e-prevent-select">
6-
<div class="circletool" style="top:18%;left:5%" title="This is Turtle !!!"></div>
7-
<div class="circletool" style="top:30%;left:30%" title="This is Snake !!!"></div>
8-
<div class="circletool" style="top:80%;left:80%" title="This is Croc !!!"></div>
9-
<div class="circletool" style="top:65%;left:50%" title="This is String Ray !!!"></div>
10-
<div class="circletool" style="top:75%;left:15%" title="This is Blob Fish !!!"></div>
11-
<div class="circletool" style="top:30%;left:70%" title="This is Mammoth !!!"></div>
12-
</div>
1+
2+
<ejs-tooltip id="tooltip" target=".circletool" beforeRender="onBeforeRender" afterClose="onAfterClose" closeDelay=1000 animation="ViewBag.animation" position="TopCenter">
3+
<e-content-template>
4+
<div>
5+
<h3> Transition effect </h3>
6+
<div id="box" class="e-prevent-select">
7+
<div class="circletool" style="top:18%;left:5%" title="This is Turtle !!!"></div>
8+
<div class="circletool" style="top:30%;left:30%" title="This is Snake !!!"></div>
9+
<div class="circletool" style="top:80%;left:80%" title="This is Croc !!!"></div>
10+
<div class="circletool" style="top:65%;left:50%" title="This is String Ray !!!"></div>
11+
<div class="circletool" style="top:75%;left:15%" title="This is Blob Fish !!!"></div>
12+
<div class="circletool" style="top:30%;left:70%" title="This is Mammoth !!!"></div>
1313
</div>
14-
</e-content-template>
15-
</ejs-tooltip>
14+
</div>
15+
</e-content-template>
16+
</ejs-tooltip>
1617

1718
<style>
1819
#box {
@@ -46,4 +47,4 @@
4647
// restore the animation effects
4748
this.animation = { open: { effect: 'ZoomIn', duration: 500 }, close: { effect: 'ZoomOut', duration: 500 } };
4849
}
49-
</script>
50+
</script>

‎ej2-asp-core-mvc/code-snippet/tooltip/custom-mode/tagHelper

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
<ejs-tooltip id="box" content="Tooltip from custom mode" OpensOn="Custom" created="created">
2-
<e-content-template>
3-
<div id="content">
4-
Double-click to open Tooltip.
5-
</div>
6-
</e-content-template>
7-
</ejs-tooltip>
1+
2+
<ejs-tooltip id="box" content="Tooltip from custom mode" OpensOn="Custom" created="created" position="TopCenter">
3+
<e-content-template>
4+
<div id="content">
5+
Double-click to open Tooltip.
6+
</div>
7+
</e-content-template>
8+
</ejs-tooltip>
89

910
<style>
1011
#box {
@@ -27,4 +28,4 @@
2728
}
2829
});
2930
}
30-
</script>
31+
</script>

‎ej2-asp-core-mvc/code-snippet/tooltip/delay-mode/tagHelper

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<ejs-tooltip id="target" content="Tooltip content" openDelay="1000" closeDelay="1000">
1+
<ejs-tooltip id="target" content="Tooltip content" openDelay="1000" closeDelay="1000" position="TopCenter">
22
<e-content-template>
33
<div id="content">
44
Show tooltip

‎ej2-asp-core-mvc/code-snippet/tooltip/dynamic-position/tagHelper

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<ejs-tooltip id="targetContainer" content="Tooltip content" offsetX="-15" target="#demoSmart">
1+
<ejs-tooltip id="targetContainer" content="Drag me!" position="TopCenter" offsetX="-15" target="#demoSmart">
22
<e-content-template>
33
<div id="demoSmart"></div>
44
</e-content-template>
@@ -58,4 +58,4 @@
5858
padding: 3px;
5959
margin-right: 20px;
6060
}
61-
</style>
61+
</style>

‎ej2-asp-core-mvc/code-snippet/tooltip/height-width/tagHelper

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<ejs-tooltip id="tooltip" height="40px" width="150px" content="Tooltip with specific width and height">
1+
<ejs-tooltip id="tooltip" height="50px" width="150px" position="TopCenter" content="Tooltip with specific width and height" position="TopCenter">
22
<e-content-template>
33
<span id='target'>Show Tooltip</span>
44
</e-content-template>

‎ej2-asp-core-mvc/code-snippet/tooltip/open-custom/tagHelper

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,39 @@
11
<div id='container'>
22
<div id="showTooltip">
33
<div id="first">
4-
<ejs-tooltip id="tooltip01" opensOn="Hover" content="Tooltip from hover">
4+
<ejs-tooltip id="tooltip01" position="TopCenter" opensOn="Hover" content="Tooltip from hover">
55
<e-content-template>
66
<button class="blocks e-btn e-primary e-outline" id="tooltiphover">Hover me!(Default)</button>
77
</e-content-template>
88
</ejs-tooltip>
9-
<ejs-tooltip id="tooltip02" opensOn="Click" content="Tooltip from click">
9+
<ejs-tooltip id="tooltip02" position="TopCenter" opensOn="Click" content="Tooltip from click">
1010
<e-content-template>
1111
<button class="blocks e-btn e-primary e-outline" id="tooltipclick">Click me!</button>
1212
</e-content-template>
1313
</ejs-tooltip>
1414
</div>
1515
<br /><br />
1616
<div id="second">
17-
<ejs-tooltip id="tooltip03" opensOn="Click" isSticky="true" content="Click close icon to close me">
17+
<ejs-tooltip id="tooltip03" position="TopCenter" opensOn="Click" isSticky="true" content="Click close icon to close me">
1818
<e-content-template>
1919
<button class="blocks e-btn e-primary e-outline" id="Mode">Sticky Mode</button>
2020
</e-content-template>
2121
</ejs-tooltip>
22-
<ejs-tooltip id="tooltip06" opensOn="Click" openDelay=1000 closeDelay=1000 content="Opens and closes Tooltip with delay of <i>1000 milliseconds</i>">
22+
<ejs-tooltip id="tooltip06" position="TopCenter" opensOn="Click" openDelay=1000 closeDelay=1000 content="Opens and closes Tooltip with delay of <i>1000 milliseconds</i>">
2323
<e-content-template>
2424
<button class="blocks e-btn e-primary e-outline" id="openMode">Tooltip with delay</button>
2525
</e-content-template>
2626
</ejs-tooltip>
2727
</div>
2828
<br /><br />
2929
<div id="third">
30-
<ejs-tooltip id="customTooltip" opensOn="Custom" content="Tooltip from custom mode">
30+
<ejs-tooltip id="customTooltip" position="TopCenter" opensOn="Custom" content="Tooltip from custom mode">
3131
<e-content-template>
3232
<button class="blocks e-btn e-primary e-outline" id="tooltipcustom">Double click on me!</button>
3333
</e-content-template>
3434
</ejs-tooltip>
3535

36-
<ejs-tooltip id="tooltip05" opensOn="Hover" content="Tooltip from focus">
36+
<ejs-tooltip id="tooltip05" opensOn="Hover" position="TopCenter" content="Tooltip from focus">
3737
<e-content-template>
3838
<div id="textbox" class="e-float-input blocks">
3939
<input id="focus" type="text" placeholder="Focus and blur" />

0 commit comments

Comments
 (0)