diff --git a/ej2-asp-core-mvc/code-snippet/tooltip/ajaxcontent/tagHelper b/ej2-asp-core-mvc/code-snippet/tooltip/ajaxcontent/tagHelper
index 72b68f5151..252b812755 100644
--- a/ej2-asp-core-mvc/code-snippet/tooltip/ajaxcontent/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/tooltip/ajaxcontent/tagHelper
@@ -1,30 +1,31 @@
-     <div id='container'>
-        <h4 class="list-header">National Sports</h4>
-        <!-- Tooltip element rendering for AjaxContent loading -->
-        <ejs-tooltip id="Tooltip" content="Loading..." beforeRender="onBeforeRender" target="#countrylist [title]" showTipPointer="true" position="RightCenter">
-            <e-content-template>
-                <!-- ListView element -->
-                <ejs-listview id="countrylist" dataSource="ViewBag.data" enable="true">
-                    <e-listview-fieldsettings text="text" tooltip="id"></e-listview-fieldsettings>
-                </ejs-listview>
-            </e-content-template>
-        </ejs-tooltip>
-    </div>
+
+<div id='container'>
+    <h4 class="list-header">National Sports</h4>
+    <!-- Tooltip element rendering for AjaxContent loading -->
+    <ejs-tooltip id="Tooltip" content="Loading..." beforeRender="onBeforeRender" target="#countrylist [title]" showTipPointer="true" position="RightCenter">
+        <e-content-template>
+            <!-- ListView element -->
+            <ejs-listview id="countrylist" dataSource="ViewBag.data" enable="true">
+                <e-listview-fieldsettings text="text" tooltip="id"></e-listview-fieldsettings>
+            </ejs-listview>
+        </e-content-template>
+    </ejs-tooltip>
+</div>
 
 
 <script>
-        /**
-         * Process tooltip ajax content.
-         */
-  function onBeforeRender(args) {
-            var _this = this;
-            this.content = 'Loading...';
-            this.dataBind();
-            var fetchApi = new ej.base.Fetch("@Url.Content("~/Scripts/tooltip/tooltipdata.json")", 'GET');
-            fetchApi.send().then(function (result) {
+    /**
+     * Process tooltip ajax content.
+     */
+    function onBeforeRender(args) {
+        var _this = this;
+        this.content = 'Loading...';
+        this.dataBind();
+        var fetchApi = new ej.base.Fetch("@Url.Content("~/script/tooltip/tooltipdata.json")", 'GET');
+        fetchApi.send().then(function (result) {
             for (var i = 0; i < result.length; i++) {
                 if (result[i].Id === args.target.getAttribute('data-content')) {
-                    _this.content = "<div class='contentWrap'><span class=" + result[i].Class + "></span><div class='def'>" + result[i].Sports + "</div></div>";
+                    _this.content = "<div class='contentWrap'><div class='def'>" + result[i].Sports + "</div></div>";
                 }
             }
             _this.dataBind();
@@ -34,51 +35,8 @@
         });
     }
 </script>
-<link href="~/css/tooltip/icons.css" rel="stylesheet" />
 <style>
 
-    .e-bigger [class^="sports-icon-"],
-    .e-bigger [class*=" sports-icon-"] {
-        font-size: 18px;
-    }
-
-    [class^="sports-icon-"],
-    [class*=" sports-icon-"] {
-        font-family: 'sportsicons';
-        speak: none;
-        font-size: 16px;
-        font-style: normal;
-        font-weight: normal;
-        font-variant: normal;
-        text-transform: none;
-        padding-right: 6px;
-        vertical-align: middle;
-    }
-
-    .sports-icon-cricket:before {
-        content: "\e703";
-    }
-
-    .sports-icon-archery:before {
-        content: "\e705";
-    }
-
-    .sports-icon-table-tennis:before {
-        content: "\e702";
-    }
-
-    .sports-icon-baseball:before {
-        content: "\e706";
-    }
-
-    .sports-icon-hockey:before {
-        content: "\e701";
-    }
-
-    .sports-icon-shooting:before {
-        content: "\e700";
-    }
-
     .def {
         float: right;
     }
@@ -105,4 +63,4 @@
             text-align: left;
         }
     }
-</style>
+</style>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/tooltip/ajaxcontent/tooltipdata.json b/ej2-asp-core-mvc/code-snippet/tooltip/ajaxcontent/tooltipdata.json
new file mode 100644
index 0000000000..88a996d524
--- /dev/null
+++ b/ej2-asp-core-mvc/code-snippet/tooltip/ajaxcontent/tooltipdata.json
@@ -0,0 +1,44 @@
+[
+    {
+        "Id": "1",
+        "Country": "Australia",
+        "Sports": "Cricket",
+        "Class": "sports-icon-cricket"
+    },
+    {
+        "Id": "2",
+        "Country": "Bhutan",
+        "Sports": "Archery",
+        "Class": "sports-icon-archery"
+    },
+    {
+        "Id": "3",
+        "Country": "China",
+        "Sports": "Table tennis",
+        "Class": "sports-icon-table-tennis"
+    },
+    {
+        "Id": "4",
+        "Country": "Cuba",
+        "Sports": "Baseball",
+        "Class": "sports-icon-baseball"
+    },
+    {
+        "Id": "5",
+        "Country": "India",
+        "Sports": "Hockey",
+        "Class": "sports-icon-hockey"
+    },
+    {
+        "Id": "6",
+        "Country": "Switzerland",
+        "Sports": "Shooting",
+        "Class": "sports-icon-shooting"
+    },
+    {
+        "Id": "7",
+        "Country": "United States",
+        "Sports": "Baseball",
+        "Class": "sports-icon-baseball"
+    }
+]
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/tooltip/animation-default/tagHelper b/ej2-asp-core-mvc/code-snippet/tooltip/animation-default/tagHelper
index 1c6a4a8ab1..f4e6d85c03 100644
--- a/ej2-asp-core-mvc/code-snippet/tooltip/animation-default/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/tooltip/animation-default/tagHelper
@@ -1,20 +1,16 @@
-   <ejs-tooltip id="tooltip" content= "Tooltip content"  animation="ViewBag.animation">
-        <e-content-template>
-            <div id="target">
-                Show tooltip
-            </div>
-        </e-content-template>
-    </ejs-tooltip>
+<ejs-tooltip id="tooltip" content="Tooltip content" animation="ViewBag.animation" position="TopCenter">
+    <e-content-template>
+        <ejs-button id="target" content="Show tooltip">            
+        </ejs-button>
+    </e-content-template>
+</ejs-tooltip>
 
 
 <style>
 
-    #target {
-        background-color: #ececec;
-        border: 1px solid #c8c8c8;
-        box-sizing: border-box;
-        margin: 50px auto;
-        padding: 10px;
-        width: 100px;
+    #tooltip {
+        position: absolute;
+        left: calc( 50% - 60px);
+        top: 38%;
     }
-</style>
+</style>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/tooltip/animation-openclose/tagHelper b/ej2-asp-core-mvc/code-snippet/tooltip/animation-openclose/tagHelper
index 16af3d520e..f59568b487 100644
--- a/ej2-asp-core-mvc/code-snippet/tooltip/animation-openclose/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/tooltip/animation-openclose/tagHelper
@@ -1,19 +1,16 @@
-    <ejs-tooltip id="tooltip" content="Tooltip content" opensOn="Custom" created="created">
-        <e-content-template>
-            <div id="target">
-                Show tooltip
-            </div>
-        </e-content-template>
-    </ejs-tooltip>
+
+<ejs-tooltip id="tooltip" content="Tooltip content" opensOn="Custom" created="created" position="TopCenter">
+    <e-content-template>
+        <ejs-button id="target" content="Show tooltip">
+        </ejs-button>
+    </e-content-template>
+</ejs-tooltip>
 
 <style>
-    #target {
-        background-color: #ececec;
-        border: 1px solid #c8c8c8;
-        box-sizing: border-box;
-        margin: 50px auto;
-        padding: 10px;
-        width: 100px;
+    #tooltip {
+        position: absolute;
+        left: calc( 50% - 60px);
+        top: 38%;
     }
 </style>
 <script>
@@ -29,4 +26,4 @@
             }
         });
     }
-</script>
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/tooltip/animation-transition/tagHelper b/ej2-asp-core-mvc/code-snippet/tooltip/animation-transition/tagHelper
index 4b74952876..9f1151ecaa 100644
--- a/ej2-asp-core-mvc/code-snippet/tooltip/animation-transition/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/tooltip/animation-transition/tagHelper
@@ -1,18 +1,19 @@
-     <ejs-tooltip id="tooltip" target=".circletool" beforeRender="onBeforeRender" afterClose="onAfterClose" closeDelay=1000 animation="ViewBag.animation">
-        <e-content-template>
-            <div>
-                <h3> Transition effect </h3>
-                <div id="box" class="e-prevent-select">
-                    <div class="circletool" style="top:18%;left:5%" title="This is Turtle !!!"></div>
-                    <div class="circletool" style="top:30%;left:30%" title="This is Snake !!!"></div>
-                    <div class="circletool" style="top:80%;left:80%" title="This is Croc !!!"></div>
-                    <div class="circletool" style="top:65%;left:50%" title="This is String Ray !!!"></div>
-                    <div class="circletool" style="top:75%;left:15%" title="This is Blob Fish !!!"></div>
-                    <div class="circletool" style="top:30%;left:70%" title="This is Mammoth !!!"></div>
-                </div>
+
+<ejs-tooltip id="tooltip" target=".circletool" beforeRender="onBeforeRender" afterClose="onAfterClose" closeDelay=1000 animation="ViewBag.animation" position="TopCenter">
+    <e-content-template>
+        <div>
+            <h3> Transition effect </h3>
+            <div id="box" class="e-prevent-select">
+                <div class="circletool" style="top:18%;left:5%" title="This is Turtle !!!"></div>
+                <div class="circletool" style="top:30%;left:30%" title="This is Snake !!!"></div>
+                <div class="circletool" style="top:80%;left:80%" title="This is Croc !!!"></div>
+                <div class="circletool" style="top:65%;left:50%" title="This is String Ray !!!"></div>
+                <div class="circletool" style="top:75%;left:15%" title="This is Blob Fish !!!"></div>
+                <div class="circletool" style="top:30%;left:70%" title="This is Mammoth !!!"></div>
             </div>
-        </e-content-template>
-    </ejs-tooltip>
+        </div>
+    </e-content-template>
+</ejs-tooltip>
 
 <style>
     #box {
@@ -46,4 +47,4 @@
         // restore the animation effects
         this.animation = { open: { effect: 'ZoomIn', duration: 500 }, close: { effect: 'ZoomOut', duration: 500 } };
     }
-</script>
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/tooltip/custom-mode/tagHelper b/ej2-asp-core-mvc/code-snippet/tooltip/custom-mode/tagHelper
index 7f2cea26bc..9e139bae3b 100644
--- a/ej2-asp-core-mvc/code-snippet/tooltip/custom-mode/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/tooltip/custom-mode/tagHelper
@@ -1,10 +1,11 @@
-     <ejs-tooltip id="box" content="Tooltip from custom mode"  OpensOn="Custom" created="created">
-        <e-content-template>
-            <div id="content">
-                Double-click to open Tooltip.
-            </div>
-        </e-content-template>
-    </ejs-tooltip>
+
+<ejs-tooltip id="box" content="Tooltip from custom mode" OpensOn="Custom" created="created" position="TopCenter">
+    <e-content-template>
+        <div id="content">
+            Double-click to open Tooltip.
+        </div>
+    </e-content-template>
+</ejs-tooltip>
 
 <style>
     #box {
@@ -27,4 +28,4 @@
             }
         });
     }
-</script>
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/tooltip/delay-mode/tagHelper b/ej2-asp-core-mvc/code-snippet/tooltip/delay-mode/tagHelper
index 4773dd7b11..e059f1032f 100644
--- a/ej2-asp-core-mvc/code-snippet/tooltip/delay-mode/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/tooltip/delay-mode/tagHelper
@@ -1,4 +1,4 @@
-<ejs-tooltip id="target" content="Tooltip content" openDelay="1000" closeDelay="1000">
+<ejs-tooltip id="target" content="Tooltip content" openDelay="1000" closeDelay="1000" position="TopCenter">
     <e-content-template>
         <div id="content">
             Show tooltip
diff --git a/ej2-asp-core-mvc/code-snippet/tooltip/dynamic-position/tagHelper b/ej2-asp-core-mvc/code-snippet/tooltip/dynamic-position/tagHelper
index 073ec86bf2..071625bbe2 100644
--- a/ej2-asp-core-mvc/code-snippet/tooltip/dynamic-position/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/tooltip/dynamic-position/tagHelper
@@ -1,4 +1,4 @@
-<ejs-tooltip id="targetContainer" content="Tooltip content" offsetX="-15" target="#demoSmart">
+<ejs-tooltip id="targetContainer" content="Drag me!" position="TopCenter" offsetX="-15" target="#demoSmart">
     <e-content-template>
         <div id="demoSmart"></div>
     </e-content-template>
@@ -58,4 +58,4 @@
         padding: 3px;
         margin-right: 20px;
     }
-</style>
+</style>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/tooltip/height-width/tagHelper b/ej2-asp-core-mvc/code-snippet/tooltip/height-width/tagHelper
index 28fd3529bd..bb03ff6dcb 100644
--- a/ej2-asp-core-mvc/code-snippet/tooltip/height-width/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/tooltip/height-width/tagHelper
@@ -1,4 +1,4 @@
-     <ejs-tooltip id="tooltip" height="40px" width="150px" content="Tooltip with specific width and height">
+     <ejs-tooltip id="tooltip" height="50px" width="150px" position="TopCenter" content="Tooltip with specific width and height" position="TopCenter">
         <e-content-template>
                 <span id='target'>Show Tooltip</span>
         </e-content-template>
diff --git a/ej2-asp-core-mvc/code-snippet/tooltip/open-custom/tagHelper b/ej2-asp-core-mvc/code-snippet/tooltip/open-custom/tagHelper
index d199f53958..e61bd9cf4a 100644
--- a/ej2-asp-core-mvc/code-snippet/tooltip/open-custom/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/tooltip/open-custom/tagHelper
@@ -1,12 +1,12 @@
 <div id='container'>
     <div id="showTooltip">
         <div id="first">
-            <ejs-tooltip id="tooltip01" opensOn="Hover" content="Tooltip from hover">
+            <ejs-tooltip id="tooltip01" position="TopCenter"  opensOn="Hover" content="Tooltip from hover">
                 <e-content-template>
                     <button class="blocks e-btn e-primary e-outline" id="tooltiphover">Hover me!(Default)</button>
                 </e-content-template>
             </ejs-tooltip>
-            <ejs-tooltip id="tooltip02" opensOn="Click" content="Tooltip from click">
+            <ejs-tooltip id="tooltip02" position="TopCenter" opensOn="Click" content="Tooltip from click">
                 <e-content-template>
                     <button class="blocks e-btn e-primary e-outline" id="tooltipclick">Click me!</button>
                 </e-content-template>
@@ -14,12 +14,12 @@
         </div>
         <br /><br />
         <div id="second">
-            <ejs-tooltip id="tooltip03"  opensOn="Click" isSticky="true" content="Click close icon to close me">
+            <ejs-tooltip id="tooltip03" position="TopCenter" opensOn="Click" isSticky="true" content="Click close icon to close me">
                 <e-content-template>
                     <button class="blocks e-btn e-primary e-outline" id="Mode">Sticky Mode</button>
                 </e-content-template>
             </ejs-tooltip>
-            <ejs-tooltip id="tooltip06"  opensOn="Click" openDelay=1000 closeDelay=1000 content="Opens and closes Tooltip with delay of <i>1000 milliseconds</i>">
+            <ejs-tooltip id="tooltip06" position="TopCenter" opensOn="Click" openDelay=1000 closeDelay=1000 content="Opens and closes Tooltip with delay of <i>1000 milliseconds</i>">
                 <e-content-template>
                     <button class="blocks e-btn e-primary e-outline" id="openMode">Tooltip with delay</button>
                 </e-content-template>
@@ -27,13 +27,13 @@
         </div>
         <br /><br />
         <div id="third">
-            <ejs-tooltip id="customTooltip" opensOn="Custom" content="Tooltip from custom mode">
+            <ejs-tooltip id="customTooltip" position="TopCenter" opensOn="Custom" content="Tooltip from custom mode">
                 <e-content-template>
                     <button class="blocks e-btn e-primary e-outline" id="tooltipcustom">Double click on me!</button>
                 </e-content-template>
             </ejs-tooltip>
 
-            <ejs-tooltip id="tooltip05"  opensOn="Hover" content="Tooltip from focus">
+            <ejs-tooltip id="tooltip05" opensOn="Hover" position="TopCenter" content="Tooltip from focus">
                 <e-content-template>
                     <div id="textbox" class="e-float-input blocks">
                         <input id="focus" type="text" placeholder="Focus and blur" />
diff --git a/ej2-asp-core-mvc/code-snippet/tooltip/open-mode/tagHelper b/ej2-asp-core-mvc/code-snippet/tooltip/open-mode/tagHelper
index e65da04661..646bb83853 100644
--- a/ej2-asp-core-mvc/code-snippet/tooltip/open-mode/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/tooltip/open-mode/tagHelper
@@ -1,25 +1,25 @@
-         <ejs-tooltip id="tooltiphover" content=@ViewBag.hover OpensOn="Hover">
-            <e-content-template>
-                <div class="blocks"><span>Hover Me !(Default)</span></div>
-            </e-content-template>
-        </ejs-tooltip>
-        <ejs-tooltip id="tooltipclick" content=@ViewBag.click OpensOn="Click">
-            <e-content-template>
-                <div class="blocks"><span>Click Me !</span></div>
-            </e-content-template>
-        </ejs-tooltip>
-        <ejs-tooltip id="tooltipfocus" content=@ViewBag.focus OpensOn="Focus" target=".e-info">
-            <e-content-template>
-                <div class="blocks"><span><input class="e-info" type="text" placeholder="Focus and blur" /></span></div>
-            </e-content-template>
-        </ejs-tooltip>
-        <ejs-tooltip id="tooltipcustom" content=@ViewBag.custom OpensOn="Custom">
-            <e-content-template>
-                <div class="blocks">
-                    <input id="tooltipopen" value="Click to open tooltip manually" type="button"/>
-                </div>
-            </e-content-template>
-        </ejs-tooltip>
+<ejs-tooltip id="tooltiphover" content=@ViewBag.hover OpensOn="Hover" position="TopCenter">
+    <e-content-template>
+        <div class="blocks"><span>Hover Me !(Default)</span></div>
+    </e-content-template>
+</ejs-tooltip>
+<ejs-tooltip id="tooltipclick" content=@ViewBag.click OpensOn="Click" position="TopCenter">
+    <e-content-template>
+        <div class="blocks"><span>Click Me !</span></div>
+    </e-content-template>
+</ejs-tooltip>
+<ejs-tooltip id="tooltipfocus" content=@ViewBag.focus OpensOn="Focus" target=".e-info" position="TopCenter">
+    <e-content-template>
+        <div class="blocks"><span><input class="e-info" type="text" placeholder="Focus and blur" /></span></div>
+    </e-content-template>
+</ejs-tooltip>
+<ejs-tooltip id="tooltipcustom" content=@ViewBag.custom OpensOn="Custom" position="TopCenter">
+    <e-content-template>
+        <div class="blocks">
+            <input id="tooltipopen" value="Click to open tooltip manually" type="button" />
+        </div>
+    </e-content-template>
+</ejs-tooltip>
 
 <style>
     #tooltiphover {
@@ -27,29 +27,35 @@
         box-sizing: border-box;
         display: inline-block;
     }
+
     #tooltipclick {
         width: 200px;
         box-sizing: border-box;
         display: inline-block;
     }
+
     #tooltipfocus {
         width: 200px;
         box-sizing: border-box;
         display: inline-block;
         line-height: 17px;
     }
+
     #tooltipcustom {
         width: 200px;
         box-sizing: border-box;
         display: inline-block;
     }
+
     #tooltipfocus .blocks span {
         line-height: 17px;
     }
+
     #tooltipcustom .blocks #tooltipopen {
         line-height: 17px;
     }
-        .blocks {
+
+    .blocks {
         background-color: #ececec;
         border: 1px solid #c8c8c8;
         box-sizing: border-box;
@@ -64,12 +70,12 @@
 </style>
 
 <script>
-        document.getElementById('tooltipopen').addEventListener("click", function () {
-            var customTooltip = document.getElementById('tooltipcustom').ej2_instances[0];
-            if (this.getAttribute("data-tooltip-id")) {
-                customTooltip.close();
-            } else {
-                customTooltip.open(this);
-            }
-        });
-</script>
+    document.getElementById('tooltipopen').addEventListener("click", function () {
+        var customTooltip = document.getElementById('tooltipcustom').ej2_instances[0];
+        if (this.getAttribute("data-tooltip-id")) {
+            customTooltip.close();
+        } else {
+            customTooltip.open(this);
+        }
+    });
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/tooltip/scroll-mode/tagHelper b/ej2-asp-core-mvc/code-snippet/tooltip/scroll-mode/tagHelper
index 981da7ff15..6837c3fdaa 100644
--- a/ej2-asp-core-mvc/code-snippet/tooltip/scroll-mode/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/tooltip/scroll-mode/tagHelper
@@ -1,4 +1,4 @@
-      <ejs-tooltip id="tooltip" height="60px" width="300px" isSticky="true" target="#target" content="<div><b>Environmentally friendly</b> or environment-friendly, (also referred to as eco-friendly, nature-friendly, and green) are marketing and sustainability terms referring to goods and services, laws, guidelines and policies that inflict reduced, minimal, or no harm upon ecosystems or the environment.</div>">
+      <ejs-tooltip id="tooltip" height="60px" width="300px" isSticky="true" target="#target" content="<div><b>Environmentally friendly</b> or environment-friendly, (also referred to as eco-friendly, nature-friendly, and green) are marketing and sustainability terms referring to goods and services, laws, guidelines and policies that inflict reduced, minimal, or no harm upon ecosystems or the environment.</div>" position="TopCenter">
         <e-content-template>
             <div id='container'>
                 <p>
@@ -15,7 +15,7 @@
 <style>
     #tooltip {
         position: absolute;
-        left: calc( 50% - 60px);
+        left: calc( 20% - 60px);
         top: 38%;
     }
 </style>
diff --git a/ej2-asp-core-mvc/code-snippet/tooltip/sticky-mode/tagHelper b/ej2-asp-core-mvc/code-snippet/tooltip/sticky-mode/tagHelper
index d2cae0760d..633f2fdc97 100644
--- a/ej2-asp-core-mvc/code-snippet/tooltip/sticky-mode/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/tooltip/sticky-mode/tagHelper
@@ -1,4 +1,4 @@
-<ejs-tooltip id="target" content="Tooltip content" isSticky="true">
+<ejs-tooltip id="target" content="Tooltip content" isSticky="true" position="TopCenter">
     <e-content-template>
         <div id="content">
             Show tooltip
diff --git a/ej2-asp-core-mvc/code-snippet/tooltip/tip-pointer/tagHelper b/ej2-asp-core-mvc/code-snippet/tooltip/tip-pointer/tagHelper
index b03ddad852..72c897af79 100644
--- a/ej2-asp-core-mvc/code-snippet/tooltip/tip-pointer/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/tooltip/tip-pointer/tagHelper
@@ -1,34 +1,15 @@
-     <div class="control-section">
-     <ejs-tooltip id="tooltip" tipPointerPosition="Start" content="Tooltip content">
-        <e-content-template>
-            <div id='target'>
-                    <span>Show tooltip</span>
-            </div>
+<ejs-tooltip id="tooltip" position="TopCenter" content="Tooltip content" tipPointerPosition="Start">
+    <e-content-template>
+        <ejs-button id='target' content="Show tooltip"></ejs-button>
         </e-content-template>
-    </ejs-tooltip>
-    </div>
-
+</ejs-tooltip>
 
 <style>
-    #container {
-        visibility: hidden;
-    }
 
-    #loader {
-        color: #008cff;
-        height: 40px;
-        left: 45%;
+    #tooltip {
         position: absolute;
-        top: 45%;
-        width: 30%;
+        left: calc( 50% - 60px);
+        top: 38%;
     }
 
-    #target {
-        background-color: #ececec;
-        border: 1px solid #c8c8c8;
-        box-sizing: border-box;
-        margin: 50px auto;
-        padding: 20px;
-        width: 250px;
-    }
-</style>
+</style>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/tooltip/tooltip-disabed/tagHelper b/ej2-asp-core-mvc/code-snippet/tooltip/tooltip-disabed/tagHelper
index 699b8259f4..67fe88ba36 100644
--- a/ej2-asp-core-mvc/code-snippet/tooltip/tooltip-disabed/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/tooltip/tooltip-disabed/tagHelper
@@ -1,4 +1,5 @@
-<ejs-tooltip id="tooltip" content="Tooltip content">
+
+<ejs-tooltip id="tooltip" content="Tooltip content" position="TopCenter">
     <e-content-template>
         <div id="box" style="display: inline-block;">
             <input type="button" id="disabledbutton" disabled value="Disabled button" />
@@ -20,4 +21,4 @@
         pointer-events: none;
         color: graytext;
     }
-</style>
+</style>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/tooltip/tooltip-pointer/tagHelper b/ej2-asp-core-mvc/code-snippet/tooltip/tooltip-pointer/tagHelper
index fa795e19e4..ed39f13050 100644
--- a/ej2-asp-core-mvc/code-snippet/tooltip/tooltip-pointer/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/tooltip/tooltip-pointer/tagHelper
@@ -1,10 +1,10 @@
-     <ejs-tooltip id="tooltip" cssClass="customtip" content="Tooltip arrow customized">
-        <e-content-template>
-            <div id="target">
-                Show tooltip
-            </div>
-        </e-content-template>
-    </ejs-tooltip>
+<ejs-tooltip id="tooltip" cssClass="customtip" content="Tooltip arrow customized" position="TopCenter">
+    <e-content-template>
+        <div id="target">
+            Show tooltip
+        </div>
+    </e-content-template>
+</ejs-tooltip>
 
 <style>
     #target {
@@ -66,4 +66,4 @@
             border-left: 20px solid #616161;
             border-top: 6px solid transparent;
         }
-</style>
+</style>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/tooltip/tooltip-positions/tagHelper b/ej2-asp-core-mvc/code-snippet/tooltip/tooltip-positions/tagHelper
index af480db384..ea7081fe7e 100644
--- a/ej2-asp-core-mvc/code-snippet/tooltip/tooltip-positions/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/tooltip/tooltip-positions/tagHelper
@@ -1,77 +1,45 @@
-<ejs-tooltip id="Tooltip" position="TopCenter" content="Tooltip content">
-    <e-content-template>
-        <div id='container'> <div id="content" title="Tooltip content"> <span>Show tooltip</span> <select id="positions" class="form-control" onchange="onChange(this)"> <option value="TopLeft">Top Left</option> <option value="TopCenter" selected="">Top Center</option> <option value="TopRight">Top Right</option> <option value="BottomLeft">Bottom Left</option> <option value="BottomCenter">Bottom Center</option> <option value="BottomRight">Bottom Right</option> <option value="LeftTop">Left Top</option> <option value="LeftCenter">Left Center</option> <option value="LeftBottom">Left Bottom</option> <option value="RightTop">Right Top</option> <option value="RightCenter">Right Center</option> <option value="RightBottom">Right Bottom</option> </select></div> </div>
-    </e-content-template>
-</ejs-tooltip>
+@*  https://localhost:44322/Tooltip/TooltipPosition *@
+
+<div style='display: inline-flex;position:  relative;left:  50%;transform:  translateX(-50%);margin-top:  100px;'>
+    <div>
+        <ejs-tooltip id="tooltip" position="TopCenter" content="Tooltip content">
+            <e-content-template>
+                    <ejs-button id='target' content="Show tooltip"></ejs-button>
+            </e-content-template>
+        </ejs-tooltip>
+   </<div>
+    <div>
+        <select id="positions" class="form-control" onchange="onChange(this)"> 
+            <option value="TopLeft">Top Left</option> 
+            <option value="TopCenter" selected="">Top Center</option> 
+            <option value="TopRight">Top Right</option> 
+            <option value="BottomLeft">Bottom Left</option> 
+            <option value="BottomCenter">Bottom Center</option> 
+            <option value="BottomRight">Bottom Right</option> 
+            <option value="LeftTop">Left Top</option> 
+            <option value="LeftCenter">Left Center</option> 
+            <option value="LeftBottom">Left Bottom</option> 
+            <option value="RightTop">Right Top</option> 
+            <option value="RightCenter">Right Center</option> 
+            <option value="RightBottom">Right Bottom</option> 
+        </select>
+    </div> 
+</div>
+    
 
 <style>
-
-    #target {
-        background-color: #ececec;
-        border: 1px solid #c8c8c8;
-        box-sizing: border-box;
-        margin: 70px auto;
-        padding: 20px;
-        width: 200px;
-    }
-
-
-    /* csslint ignore:start */
-
-    .customtip.e-tooltip-wrap {
-        padding: 4px;
+    #tooltip {
+        padding: 5px;
+        margin-right: 20px;
     }
 
-        .customtip.e-tooltip-wrap .e-arrow-tip.e-tip-bottom {
-            height: 20px;
-            width: 12px;
-        }
-
-        .customtip.e-tooltip-wrap .e-arrow-tip.e-tip-top {
-            height: 20px;
-            width: 12px;
-        }
-
-        .customtip.e-tooltip-wrap .e-arrow-tip.e-tip-left {
-            height: 12px;
-            width: 20px;
-        }
-
-        .customtip.e-tooltip-wrap .e-arrow-tip.e-tip-right {
-            height: 12px;
-            width: 20px;
-        }
-
-        .customtip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-bottom {
-            border-left: 6px solid transparent;
-            border-right: 6px solid transparent;
-            border-top: 20px solid #616161;
-        }
-
-        .customtip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-top {
-            border-bottom: 20px solid #616161;
-            border-left: 6px solid transparent;
-            border-right: 6px solid transparent;
-        }
-
-        .customtip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-left {
-            border-bottom: 6px solid transparent;
-            border-right: 20px solid #616161;
-            border-top: 6px solid transparent;
-        }
-
-        .customtip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-right {
-            border-bottom: 6px solid transparent;
-            border-left: 20px solid #616161;
-            border-top: 6px solid transparent;
-        }
 </style>
 <script>
     var tooltip;
     window.onload = function () {
-        tooltip = document.getElementById('Tooltip').ej2_instances[0];
+        tooltip = document.getElementById('tooltip').ej2_instances[0];
     }
     function onChange(args) {
         tooltip.position = args.value;
     }
-</script>
+</script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/tooltip/tooltip-view/tagHelper b/ej2-asp-core-mvc/code-snippet/tooltip/tooltip-view/tagHelper
index 4ed85de370..7bdfbac9b8 100644
--- a/ej2-asp-core-mvc/code-snippet/tooltip/tooltip-view/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/tooltip/tooltip-view/tagHelper
@@ -1,96 +1,96 @@
-     <ejs-tooltip id="target" cssClass="customtooltip" content="Tooltip customized">
-        <e-content-template>
-            <div id="content" >
-                Show tooltip
-            </div>
-        </e-content-template>
-    </ejs-tooltip>
+<ejs-tooltip id="target" cssClass="customtooltip" content="Tooltip customized" position="TopCenter">
+    <e-content-template>
+        <div id="content">
+            Show tooltip
+        </div>
+    </e-content-template>
+</ejs-tooltip>
 
 <style>
-#target {
-    background-color: #ececec;
-    border: 1px solid #c8c8c8;
-    box-sizing: border-box;
-    margin: 70px auto;
-    padding: 20px;
-    width: 200px;
-}
-
-
-.customtooltip.e-tooltip-wrap .e-tip-content {
-    line-height: 20px;
-}
-
-.customtooltip.e-tooltip-wrap .e-arrow-tip.e-tip-bottom {
-    height: 12px;
-    left: 50%;
-    top: 100%;
-    width: 24px;
-}
-
-.customtooltip.e-tooltip-wrap .e-arrow-tip.e-tip-top {
-    height: 12px;
-    left: 50%;
-    top: -9px;
-    width: 24px;
-}
-
-.customtooltip.e-tooltip-wrap .e-arrow-tip.e-tip-left {
-    height: 24px;
-    left: -9px;
-    top: 48%;
-    width: 12px;
-}
-
-.customtooltip.e-tooltip-wrap .e-arrow-tip.e-tip-right {
-    height: 24px;
-    left: 100%;
-    top: 50%;
-    width: 12px;
-}
-
-.customtooltip.e-tooltip-wrap {
-    border-radius: 4px;
-    opacity: 1;
-}
-
-.customtooltip.e-tooltip-wrap.e-popup {
-    background-color: #fff;
-    border: 2px solid #000;
-}
-
-.customtooltip.e-tooltip-wrap .e-tip-content {
-    color: #000;
-    font-size: 12px;
-}
-
-.customtooltip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-bottom {
-    border-left: 12px solid transparent;
-    border-right: 14px solid transparent;
-    border-top: 12px solid #000;
-}
-
-.customtooltip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-top {
-    border-bottom: 12px solid #000;
-    border-left: 12px solid transparent;
-    border-right: 12px solid transparent;
-}
-
-.customtooltip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-left {
-    border-bottom: 12px solid transparent;
-    border-right: 12px solid #000;
-    border-top: 12px solid transparent;
-}
-
-.customtooltip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-right {
-    border-bottom: 12px solid transparent;
-    border-left: 12px solid #000;
-    border-top: 12px solid transparent;
-}
-
-.customtooltip.e-tooltip-wrap .e-arrow-tip-inner.e-tip-bottom {
-    color: #fff;
-    font-size: 25.9px;
-}
-
-</style>
+    #target {
+        background-color: #ececec;
+        border: 1px solid #c8c8c8;
+        box-sizing: border-box;
+        margin: 70px auto;
+        padding: 20px;
+        width: 200px;
+    }
+
+
+    .customtooltip.e-tooltip-wrap .e-tip-content {
+        line-height: 20px;
+    }
+
+    .customtooltip.e-tooltip-wrap .e-arrow-tip.e-tip-bottom {
+        height: 12px;
+        left: 50%;
+        top: 100%;
+        width: 24px;
+    }
+
+    .customtooltip.e-tooltip-wrap .e-arrow-tip.e-tip-top {
+        height: 12px;
+        left: 50%;
+        top: -9px;
+        width: 24px;
+    }
+
+    .customtooltip.e-tooltip-wrap .e-arrow-tip.e-tip-left {
+        height: 24px;
+        left: -9px;
+        top: 48%;
+        width: 12px;
+    }
+
+    .customtooltip.e-tooltip-wrap .e-arrow-tip.e-tip-right {
+        height: 24px;
+        left: 100%;
+        top: 50%;
+        width: 12px;
+    }
+
+    .customtooltip.e-tooltip-wrap {
+        border-radius: 4px;
+        opacity: 1;
+    }
+
+        .customtooltip.e-tooltip-wrap.e-popup {
+            background-color: #fff;
+            border: 2px solid #000;
+        }
+
+        .customtooltip.e-tooltip-wrap .e-tip-content {
+            color: #000;
+            font-size: 12px;
+        }
+
+        .customtooltip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-bottom {
+            border-left: 12px solid transparent;
+            border-right: 14px solid transparent;
+            border-top: 12px solid #000;
+        }
+
+        .customtooltip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-top {
+            border-bottom: 12px solid #000;
+            border-left: 12px solid transparent;
+            border-right: 12px solid transparent;
+        }
+
+        .customtooltip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-left {
+            border-bottom: 12px solid transparent;
+            border-right: 12px solid #000;
+            border-top: 12px solid transparent;
+        }
+
+        .customtooltip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-right {
+            border-bottom: 12px solid transparent;
+            border-left: 12px solid #000;
+            border-top: 12px solid transparent;
+        }
+
+        .customtooltip.e-tooltip-wrap .e-arrow-tip-inner.e-tip-bottom {
+            color: #fff;
+            font-size: 25.9px;
+        }
+
+</style>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/tooltip/content.md b/ej2-asp-core-mvc/tooltip/content.md
index 7aa50d0052..def18edc30 100644
--- a/ej2-asp-core-mvc/tooltip/content.md
+++ b/ej2-asp-core-mvc/tooltip/content.md
@@ -48,7 +48,7 @@ Output be like the below.
 
 ![ASP .NET Core - Tooltip - Content](./images/tooltip-content.png)
 
-## Dynamic content via Fetch
+## Load dynamic Tooltip content
 
 The Tooltip content can be dynamically loaded  by making use of the Fetch call. The Fetch request is usually made within the `beforeRender` event of the Tooltip, and then the Tooltip's `content` is assigned the value retrieved on it's success.
 
@@ -63,6 +63,9 @@ N> The Tooltip **target** property includes a unique identifier used to associat
 {% highlight c# tabtitle="AjaxContent.cs" %}
 {% include code-snippet/tooltip/ajaxcontent/ajaxcontent.cs %}
 {% endhighlight %}
+{% highlight c# tabtitle="tooltipdata.json" %}
+{% include code-snippet/tooltip/ajaxcontent/tooltipdata.json %}
+{% endhighlight %}
 {% endtabs %}
 
 {% elsif page.publishingplatform == "aspnet-mvc" %}
diff --git a/ej2-asp-core-mvc/tooltip/how-to/dynamic-tooltip-content-with-html-elements.md b/ej2-asp-core-mvc/tooltip/how-to/dynamic-tooltip-content-with-html-elements.md
index 3b739bf5ec..87f468498f 100644
--- a/ej2-asp-core-mvc/tooltip/how-to/dynamic-tooltip-content-with-html-elements.md
+++ b/ej2-asp-core-mvc/tooltip/how-to/dynamic-tooltip-content-with-html-elements.md
@@ -45,3 +45,6 @@ When using HTML elements as content to `Tooltip` make the content element `displ
 {% endtabs %}
 {% endif %}
 
+Output be like the below.
+
+![ASP .NET Core - Dynamic Tooltip content with HTML elements](./images/htmlElements.png)
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/tooltip/how-to/show-tooltip-on-disabled-elements-and-disable-tooltip.md b/ej2-asp-core-mvc/tooltip/how-to/show-tooltip-on-disabled-elements-and-disable-tooltip.md
index f0363177f1..8f434efbe1 100644
--- a/ej2-asp-core-mvc/tooltip/how-to/show-tooltip-on-disabled-elements-and-disable-tooltip.md
+++ b/ej2-asp-core-mvc/tooltip/how-to/show-tooltip-on-disabled-elements-and-disable-tooltip.md
@@ -1,6 +1,6 @@
 ---
 layout: post
-title: Show Tooltip On Disabled Elements And Disable Tooltip in ##Platform_Name## Tooltip Component
+title: Show Tooltips on disabled elements in ##Platform_Name## Tooltip Component  | Syncfusion
 description: Learn here all about Show Tooltip On Disabled Elements And Disable Tooltip in Syncfusion ##Platform_Name## Tooltip component of syncfusion and more.
 platform: ej2-asp-core-mvc
 control: Show Tooltip On Disabled Elements And Disable Tooltip
@@ -40,3 +40,6 @@ By default, Tooltips will not be displayed on disabled elements. However, it is
 {% endif %}
 
 
+Output be like the below.
+
+![ASP .NET Core - Tooltip on disabled elements](./images/disabled-elements.png)
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/tooltip/images/disabled-elements.png b/ej2-asp-core-mvc/tooltip/images/disabled-elements.png
new file mode 100644
index 0000000000..4b3dfa4d1f
Binary files /dev/null and b/ej2-asp-core-mvc/tooltip/images/disabled-elements.png differ
diff --git a/ej2-asp-core-mvc/tooltip/images/htmlElements.png b/ej2-asp-core-mvc/tooltip/images/htmlElements.png
new file mode 100644
index 0000000000..d7918ba36b
Binary files /dev/null and b/ej2-asp-core-mvc/tooltip/images/htmlElements.png differ
diff --git a/ej2-asp-core-mvc/tooltip/images/tip-pointer.png b/ej2-asp-core-mvc/tooltip/images/tip-pointer.png
index 02d33aec18..f79a1eae2f 100644
Binary files a/ej2-asp-core-mvc/tooltip/images/tip-pointer.png and b/ej2-asp-core-mvc/tooltip/images/tip-pointer.png differ
diff --git a/ej2-asp-core-mvc/tooltip/images/tooltip-position.png b/ej2-asp-core-mvc/tooltip/images/tooltip-position.png
index 7a2562e896..cec0c79025 100644
Binary files a/ej2-asp-core-mvc/tooltip/images/tooltip-position.png and b/ej2-asp-core-mvc/tooltip/images/tooltip-position.png differ