diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Popovers.cshtml b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Popovers.cshtml
index f9563a5c8b..7f43407831 100644
--- a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Popovers.cshtml
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Popovers.cshtml
@@ -1,7 +1,7 @@
 @page
 @model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.PopoversModel
 @{
-    ViewData["Title"] = "Badges";
+    ViewData["Title"] = "Popovers";
 }
 
 @section styles {
@@ -10,11 +10,25 @@
     </abp-style-bundle>
 }
 
+@section scripts {
+    <abp-script-bundle>
+        @*<abp-script src="/libs/highlight.js/lib/highlight.js" />
+            <abp-script src="/Pages/Components/highlightCode.js" />*@
+    </abp-script-bundle>
+}
+
+<link rel="stylesheet"
+      href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css">
+<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
+<script>hljs.initHighlightingOnLoad();</script>
+
+
 <h2>Popovers</h2>
 
 <p>Based on <a href="https://getbootstrap.com/docs/4.1/components/Popovers/" target="_blank"> Bootstrap Popovers</a>.</p>
 
-<h4># Popovers Examples</h4>
+
+<h4>Example</h4>
 
 <div class="demo-with-code">
     <div class="demo-area">
@@ -31,23 +45,41 @@
         <abp-button abp-popover-left="Hi, i'm popover content!" title="Popover Title" disabled="true">
             Disabled Popover
         </abp-button>
-
     </div>
     <div class="code-area">
-        <pre>
-&lt;abp-button abp-popover=&quot;Hi, i&#39;m popover content!&quot;&gt;
-   Popover Default
+        <abp-tabs>
+            <abp-tab title="Tag Helper" active="true">
+                <pre><code>
+&lt;abp-button abp-popover=&quot;Hi, i&apos;m popover content!&quot;&gt;
+       Popover Default
 &lt;/abp-button&gt;
-&lt;abp-button abp-popover-top=&quot;Hi, i&#39;m popover content!&quot; title=&quot;Popover Title&quot;&gt;
-   Popover With Title
+&lt;abp-button abp-popover-top=&quot;Hi, i&apos;m popover content!&quot; title=&quot;Popover Title&quot;&gt;
+       Popover With Title
 &lt;/abp-button&gt;
-&lt;abp-button abp-popover-right=&quot;Hi, i&#39;m popover content!&quot; title=&quot;Popover Title&quot; dismissible=&quot;true&quot;&gt;
-   Dismissible Popover
+&lt;abp-button abp-popover-right=&quot;Hi, i&apos;m popover content!&quot; title=&quot;Popover Title&quot; dismissible=&quot;true&quot;&gt;
+       Dismissible Popover
 &lt;/abp-button&gt;
-&lt;abp-button abp-popover-left=&quot;Hi, i&#39;m popover content!&quot; title=&quot;Popover Title&quot; disabled=&quot;true&quot;&gt;
-   Disabled Popover
+&lt;abp-button abp-popover-left=&quot;Hi, i&apos;m popover content!&quot; title=&quot;Popover Title&quot; disabled=&quot;true&quot;&gt;
+       Disabled Popover
 &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;popover&quot; data-placement=&quot;bottom&quot; data-content=&quot;Hi, i&apos;m popover content!&quot; data-original-title=&quot;&quot; title=&quot;&quot;&gt;
+      Popover Default
+&lt;/button&gt;
+&lt;button title=&quot;&quot; class=&quot;btn&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot; data-toggle=&quot;popover&quot; data-placement=&quot;top&quot; data-content=&quot;Hi, i&apos;m popover content!&quot; data-original-title=&quot;Popover Title&quot;&gt;
+      Popover With Title
+&lt;/button&gt;
+&lt;button title=&quot;&quot; class=&quot;btn&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot; data-toggle=&quot;popover&quot; data-placement=&quot;right&quot; data-content=&quot;Hi, i&apos;m popover content!&quot; data-trigger=&quot;focus&quot; data-original-title=&quot;Popover Title&quot;&gt;
+      Dismissible Popover
+&lt;/button&gt;
+&lt;span class=&quot;d-inline-block&quot; title=&quot;&quot; data-placement=&quot;left&quot; data-toggle=&quot;popover&quot; data-content=&quot;Hi, i&apos;m popover content!&quot; data-original-title=&quot;Popover Title&quot;&gt;&lt;button title=&quot;Popover Title&quot; class=&quot;btn&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot; style=&quot;pointer-events: none;&quot;&gt;
+      Disabled Popover
+&lt;/button&gt;&lt;/span&gt;
+</code></pre>
+            </abp-tab>
+        </abp-tabs>
     </div>
 </div>
-