diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Tooltips.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Tooltips.cshtml
index fe0aeebae4..a5bc9f27db 100644
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Tooltips.cshtml
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Tooltips.cshtml
@@ -1,7 +1,7 @@
 @page
 @model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.TooltipsModel
 @{
-    ViewData["Title"] = "Badges";
+    ViewData["Title"] = "Tooltips";
 }
 
 @section styles {
@@ -14,46 +14,77 @@
 
 <p>Based on <a href="https://getbootstrap.com/docs/4.1/components/tooltips/" target="_blank"> Bootstrap Tooltips</a>.</p>
 
-<h4># Tooltips Examples</h4>
+<h4>Example</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
 
-        <abp-button abp-tooltip="Tooltip Default">
+        <abp-button abp-tooltip="Tooltip">
             Tooltip Default
         </abp-button>
-        <abp-button abp-tooltip-top="Tooltip on top">
+        <abp-button abp-tooltip-top="Tooltip">
             Tooltip on top
         </abp-button>
-        <abp-button abp-tooltip-right="Tooltip on right">
+        <abp-button abp-tooltip-right="Tooltip">
             Tooltip on right
         </abp-button>
-        <abp-button abp-tooltip-bottom="Tooltip on bottom">
+        <abp-button abp-tooltip-bottom="Tooltip">
             Tooltip on bottom
         </abp-button>
-        <abp-button abp-tooltip-left="Tooltip on left">
-            Tooltip on left
+        <abp-button disabled="true" abp-tooltip="Tooltip">
+            Disabled button Tooltip
         </abp-button>
-
     </div>
     <div class="code-area">
-        <pre>
-&lt;abp-button  abp-tooltip=&quot;Tooltip Default&quot;&gt;
-  Tooltip Default
+        <abp-tabs>
+            <abp-tab title="Tag Helper" active="true">
+                <pre><code>
+&lt;abp-button abp-tooltip=&quot;Tooltip&quot;&gt;
+      Tooltip Default
 &lt;/abp-button&gt;
-&lt;abp-button abp-tooltip-top=&quot;Tooltip on top&quot;&gt;
-   Tooltip on top
+
+&lt;abp-button abp-tooltip-top=&quot;Tooltip&quot;&gt;
+      Tooltip on top
 &lt;/abp-button&gt;
-&lt;abp-button abp-tooltip-right=&quot;Tooltip on right&quot;&gt;
-  Tooltip on right
+
+&lt;abp-button abp-tooltip-right=&quot;Tooltip&quot;&gt;
+      Tooltip on right
 &lt;/abp-button&gt;
-&lt;abp-button abp-tooltip-bottom=&quot;Tooltip on bottom&quot;&gt;
-  Tooltip on bottom
+
+&lt;abp-button abp-tooltip-bottom=&quot;Tooltip&quot;&gt;
+      Tooltip on bottom
 &lt;/abp-button&gt;
-&lt;abp-button abp-tooltip-left=&quot;Tooltip on left&quot;&gt;
-  Tooltip on left
+
+&lt;abp-button disabled=&quot;true&quot; abp-tooltip=&quot;Tooltip&quot;&gt;
+      Disabled button Tooltip
 &lt;/abp-button&gt;
-</pre>
+</code></pre>
+            </abp-tab>
+            <abp-tab title="Rendered">
+                <pre><code>
+&lt;button class=&quot;btn&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;top&quot; title=&quot;&quot; data-original-title=&quot;Tooltip&quot;&gt;
+    Tooltip Default
+&lt;/button&gt;
+
+&lt;button class=&quot;btn&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;top&quot; title=&quot;&quot; data-original-title=&quot;Tooltip&quot;&gt;
+    Tooltip on top
+&lt;/button&gt;
+
+&lt;button class=&quot;btn&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;right&quot; title=&quot;&quot; data-original-title=&quot;Tooltip&quot;&gt;
+     Tooltip on right
+&lt;/button&gt;
+
+&lt;button class=&quot;btn&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;bottom&quot; title=&quot;&quot; data-original-title=&quot;Tooltip&quot;&gt;
+    Tooltip on bottom
+&lt;/button&gt;
+
+&lt;span class=&quot;d-inline-block&quot; tabindex=&quot;0&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;top&quot; title=&quot;&quot; data-original-title=&quot;Tooltip&quot;&gt;
+    &lt;button class=&quot;btn&quot; disabled=&quot;disabled&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot; data-placement=&quot;top&quot; style=&quot;pointer-events: none;&quot;&gt;
+        Disabled button Tooltip
+    &lt;/button&gt;
+&lt;/span&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
-