From cd032f3e8542a2c30dbc66191b2995194431cbc7 Mon Sep 17 00:00:00 2001
From: igor_przybysz <i.przybysz@mdbootstrap.com>
Date: Fri, 30 Jun 2023 12:29:29 +0200
Subject: [PATCH 1/3] Add autoinits for tooltips & popover

---
 .../standard/components/popover/a-ss.html     |  3 ++
 .../docs/standard/components/popover/a.html   | 39 ++++++++++++++++++
 .../standard/components/popover/index-js.html | 11 -----
 .../standard/components/popover/index.html    | 13 ++++--
 .../standard/components/tooltip/a-ss.html     |  3 ++
 .../docs/standard/components/tooltip/a.html   | 41 +++++++++++++++++++
 .../standard/components/tooltip/index.html    | 25 ++++++++---
 .../partials/footer/footer-scripts.html       | 10 -----
 src/js/autoinit/autoinitCallbacks.js          | 21 ++++++++++
 src/js/autoinit/index.js                      | 14 +++++++
 10 files changed, 149 insertions(+), 31 deletions(-)
 delete mode 100644 site/content/docs/standard/components/popover/index-js.html

diff --git a/site/content/docs/standard/components/popover/a-ss.html b/site/content/docs/standard/components/popover/a-ss.html
index b51813ad0..3a1053ecf 100644
--- a/site/content/docs/standard/components/popover/a-ss.html
+++ b/site/content/docs/standard/components/popover/a-ss.html
@@ -2,6 +2,9 @@
 ---
 
 <li class="mb-1 pl-[9px] text-[0.85rem]" data-te-spy-active>
+  <a href="#api-section-import">Import</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
   <a href="#api-section-usage">Usage</a>
 </li>
 <li class="mb-1 pl-[9px] text-[0.85rem]">
diff --git a/site/content/docs/standard/components/popover/a.html b/site/content/docs/standard/components/popover/a.html
index b889b8479..009e9ad5d 100644
--- a/site/content/docs/standard/components/popover/a.html
+++ b/site/content/docs/standard/components/popover/a.html
@@ -3,6 +3,45 @@
 
 <!-- Section: Docs content-->
 <section>
+  <!--Section: Import-->
+  <section id="api-section-import">
+    <!--Title-->
+    <h2
+      class="mb-5 mt-0 text-3xl font-semibold leading-normal text-gray-800 dark:text-gray-200"
+      id="import"
+      data-te-spy-item>
+      Import
+    </h2>
+
+    <p>
+      Importing components depends on how your application works. If you intend
+      to use the Tailwind Elements <code>ES</code> format, you must first import
+      the component and then initialize it with the <code>initTE</code> method.
+      If you are going to use the <code>UMD</code> format, just import the
+      <code>tw-elements</code> package.
+    </p>
+
+    <!--Section: Code-->
+    {{< twsnippet/no-demo id="api-example41" >}}
+    <section class="!visible hidden" data-te-collapse-item id="api-example41">
+      <div class="pt-4">
+        {{< twsnippet/wrapper "javascript,umd" >}}
+        <!-- prettier-ignore -->
+        {{< twsnippet/code active=true lang="js" >}}
+        import { Popover, initTE } from "tw-elements";
+        initTE({ Popover });
+        {{< /twsnippet/code >}}
+        <!-- prettier-ignore -->
+        {{< twsnippet/code lang="js" >}}
+        import "tw-elements";
+        {{< /twsnippet/code >}}
+        {{< /twsnippet/wrapper >}}
+      </div>
+    </section>
+    <!--Section: Code-->
+  </section>
+  <!--Section: Import-->
+
   <!-- Section: Usage-->
   <section id="api-section-usage">
     <!-- Title -->
diff --git a/site/content/docs/standard/components/popover/index-js.html b/site/content/docs/standard/components/popover/index-js.html
deleted file mode 100644
index 9abf50d39..000000000
--- a/site/content/docs/standard/components/popover/index-js.html
+++ /dev/null
@@ -1,11 +0,0 @@
----
----
-
-<script type="module">
-  var popoverTriggerList = [].slice.call(
-    document.querySelectorAll('[data-te-toggle="popover"]')
-  );
-  var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
-    return new te.Popover(popoverTriggerEl);
-  });
-</script>
diff --git a/site/content/docs/standard/components/popover/index.html b/site/content/docs/standard/components/popover/index.html
index 8ba288715..d3d9cde20 100644
--- a/site/content/docs/standard/components/popover/index.html
+++ b/site/content/docs/standard/components/popover/index.html
@@ -12,6 +12,7 @@
 menu:
   components:
     name: "Popover"
+autoinits: "Popover"
 ---
 
 <!-- Section: Basic example -->
@@ -66,11 +67,12 @@
       {{< twsnippet/code lang="js" >}}
       // Initialization for ES Users
       import {
+        Popover,
         Ripple,
         initTE,
       } from "tw-elements";
       
-      initTE({ Ripple });
+      initTE({ Popover, Ripple });
       {{< /twsnippet/code >}}
       {{< /twsnippet/wrapper >}}
     </div>
@@ -460,11 +462,12 @@
       {{< twsnippet/code lang="js" >}}
       // Initialization for ES Users
       import {
+        Popover,
         Ripple,
         initTE,
       } from "tw-elements";
       
-      initTE({ Ripple });
+      initTE({ Popover, Ripple });
       {{< /twsnippet/code >}}
       {{< /twsnippet/wrapper >}}
     </div>
@@ -528,11 +531,12 @@
       {{< twsnippet/code lang="js" >}}
       // Initialization for ES Users
       import {
+        Popover,
         Ripple,
         initTE,
       } from "tw-elements";
       
-      initTE({ Ripple });
+      initTE({ Popover, Ripple });
       {{< /twsnippet/code >}}
       {{< /twsnippet/wrapper >}}
     </div>
@@ -598,11 +602,12 @@
       {{< twsnippet/code lang="js" >}}
       // Initialization for ES Users
       import {
+        Popover,
         Ripple,
         initTE,
       } from "tw-elements";
       
-      initTE({ Ripple });
+      initTE({ Popover, Ripple });
       {{< /twsnippet/code >}}
       {{< /twsnippet/wrapper >}}
     </div>
diff --git a/site/content/docs/standard/components/tooltip/a-ss.html b/site/content/docs/standard/components/tooltip/a-ss.html
index b51813ad0..3a1053ecf 100644
--- a/site/content/docs/standard/components/tooltip/a-ss.html
+++ b/site/content/docs/standard/components/tooltip/a-ss.html
@@ -2,6 +2,9 @@
 ---
 
 <li class="mb-1 pl-[9px] text-[0.85rem]" data-te-spy-active>
+  <a href="#api-section-import">Import</a>
+</li>
+<li class="mb-1 pl-[9px] text-[0.85rem]">
   <a href="#api-section-usage">Usage</a>
 </li>
 <li class="mb-1 pl-[9px] text-[0.85rem]">
diff --git a/site/content/docs/standard/components/tooltip/a.html b/site/content/docs/standard/components/tooltip/a.html
index b5d19fcee..4ea612669 100644
--- a/site/content/docs/standard/components/tooltip/a.html
+++ b/site/content/docs/standard/components/tooltip/a.html
@@ -3,6 +3,47 @@
 
 <!-- Section: Docs content-->
 <section>
+  <!--Section: Import-->
+  <section id="api-section-import">
+    <!--Title-->
+    <h2
+      class="mb-5 mt-0 text-3xl font-semibold leading-normal text-gray-800 dark:text-gray-200"
+      id="import"
+      data-te-spy-item>
+      Import
+    </h2>
+
+    <p>
+      Importing components depends on how your application works. If you intend
+      to use the Tailwind Elements <code>ES</code> format, you must first import
+      the component and then initialize it with the <code>initTE</code> method.
+      If you are going to use the <code>UMD</code> format, just import the
+      <code>tw-elements</code> package.
+    </p>
+
+    <!--Section: Code-->
+    {{< twsnippet/no-demo id="api-example41" >}}
+    <section class="!visible hidden" data-te-collapse-item id="api-example41">
+      <div class="pt-4">
+        {{< twsnippet/wrapper "javascript,umd" >}}
+        <!-- prettier-ignore -->
+        {{< twsnippet/code active=true lang="js" >}}
+        import { Tooltip, initTE } from "tw-elements";
+        initTE({ Tooltip });
+        {{< /twsnippet/code >}}
+        <!-- prettier-ignore -->
+        {{< twsnippet/code lang="js" >}}
+        import "tw-elements";
+        {{< /twsnippet/code >}}
+        {{< /twsnippet/wrapper >}}
+      </div>
+    </section>
+    <!--Section: Code-->
+  </section>
+  <!--Section: Import-->
+
+  <hr class="mb-5 dark:border-gray-600" />
+
   <!-- Section: Usage-->
   <section id="api-section-usage">
     <!-- Title -->
diff --git a/site/content/docs/standard/components/tooltip/index.html b/site/content/docs/standard/components/tooltip/index.html
index c130426a8..b56bd2dbc 100644
--- a/site/content/docs/standard/components/tooltip/index.html
+++ b/site/content/docs/standard/components/tooltip/index.html
@@ -12,6 +12,7 @@
 menu:
   components:
     name: "Tooltip"
+autoinits: "Tooltip"
 ---
 
 <!-- Section: Basic example -->
@@ -65,8 +66,13 @@
       {{< /twsnippet/code >}}
       <!-- prettier-ignore -->
       {{< twsnippet/code lang="js" >}}
-      const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-te-toggle="tooltip"]'));
-      tooltipTriggerList.map((tooltipTriggerEl) => new te.Tooltip(tooltipTriggerEl));
+      // Initialization for ES Users
+      import {
+        Tooltip,
+        initTE,
+      } from "tw-elements";
+
+      initTE({ Tooltip });
       {{< /twsnippet/code >}}
       {{< /twsnippet/wrapper >}}
     </div>
@@ -453,10 +459,11 @@
       // Initialization for ES Users
       import {
         Ripple,
+        Tooltip,
         initTE,
       } from "tw-elements";
       
-      initTE({ Ripple });
+      initTE({ Ripple, Tooltip });
       {{< /twsnippet/code >}}
       {{< /twsnippet/wrapper >}}
     </div>
@@ -513,10 +520,11 @@
       // Initialization for ES Users
       import {
         Ripple,
+        Tooltip,
         initTE,
       } from "tw-elements";
       
-      initTE({ Ripple });
+      initTE({ Ripple, Tooltip });
       {{< /twsnippet/code >}}
       {{< /twsnippet/wrapper >}}
     </div>
@@ -574,8 +582,13 @@
       {{< /twsnippet/code >}}
       <!-- prettier-ignore -->
       {{< twsnippet/code lang="js" >}}
-      const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-te-toggle="tooltip"]'));
-      tooltipTriggerList.map((tooltipTriggerEl) => new te.Tooltip(tooltipTriggerEl));
+      // Initialization for ES Users
+      import {
+        Tooltip,
+        initTE,
+      } from "tw-elements";
+      
+      initTE({ Tooltip })
       {{< /twsnippet/code >}}
       {{< /twsnippet/wrapper >}}
     </div>
diff --git a/site/layouts/partials/footer/footer-scripts.html b/site/layouts/partials/footer/footer-scripts.html
index 3eab0c8ab..dcd16caa4 100644
--- a/site/layouts/partials/footer/footer-scripts.html
+++ b/site/layouts/partials/footer/footer-scripts.html
@@ -566,13 +566,3 @@
   }
 </script>
 <!-- umd toggler -->
-
-<script type="module">
-  const tooltipTriggerList = [].slice.call(
-    document.querySelectorAll('[data-te-toggle="tooltip"]')
-  );
-
-  const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
-    return new te.Tooltip(tooltipTriggerEl);
-  });
-</script>
diff --git a/src/js/autoinit/autoinitCallbacks.js b/src/js/autoinit/autoinitCallbacks.js
index 32e38ca56..17a31aca9 100644
--- a/src/js/autoinit/autoinitCallbacks.js
+++ b/src/js/autoinit/autoinitCallbacks.js
@@ -163,6 +163,25 @@ const collapseCallback = (component, initSelector) => {
   );
 };
 
+const tooltipsCallback = (component, initSelector) => {
+  const tooltipTriggerList = [].slice.call(
+    document.querySelectorAll(initSelector)
+  );
+  tooltipTriggerList.map(function (tooltipTriggerEl) {
+    return new component(tooltipTriggerEl);
+  });
+};
+
+const popoverCallback = (component, initSelector) => {
+  console.log("hello");
+  const popoverTriggerList = [].slice.call(
+    document.querySelectorAll(initSelector)
+  );
+  popoverTriggerList.map(function (popoverTriggerEl) {
+    return new component(popoverTriggerEl);
+  });
+};
+
 export {
   dropdownCallback,
   tabCallback,
@@ -171,4 +190,6 @@ export {
   modalCallback,
   rippleCallback,
   collapseCallback,
+  tooltipsCallback,
+  popoverCallback,
 };
diff --git a/src/js/autoinit/index.js b/src/js/autoinit/index.js
index 3d3d7f546..976ece491 100644
--- a/src/js/autoinit/index.js
+++ b/src/js/autoinit/index.js
@@ -8,6 +8,8 @@ import {
   modalCallback,
   rippleCallback,
   collapseCallback,
+  tooltipsCallback,
+  popoverCallback,
 } from "./autoinitCallbacks";
 
 import { chartsCallback } from "./chartsInit";
@@ -82,6 +84,12 @@ const defaultInitSelectors = {
     selector: "[data-te-toast-init]",
     isToggler: false,
   },
+  tooltip: {
+    name: "Tooltip",
+    selector: "[data-te-toggle='tooltip']",
+    isToggler: false,
+    callback: tooltipsCallback,
+  },
 
   // advancedInits
   chart: {
@@ -135,6 +143,12 @@ const defaultInitSelectors = {
     isToggler: true,
     callback: tabCallback,
   },
+  popover: {
+    name: "Popover",
+    selector: "[data-te-toggle='popover']",
+    isToggler: true,
+    callback: popoverCallback,
+  },
 };
 
 const getComponentData = (component) => {

From be7946357dde2f94ab6b7182fd3ff95b8d67f6a1 Mon Sep 17 00:00:00 2001
From: igor_przybysz <i.przybysz@mdbootstrap.com>
Date: Fri, 30 Jun 2023 12:30:11 +0200
Subject: [PATCH 2/3] Add autoinits for tooltips & popover

---
 src/js/autoinit/autoinitCallbacks.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/js/autoinit/autoinitCallbacks.js b/src/js/autoinit/autoinitCallbacks.js
index 17a31aca9..cb224b95f 100644
--- a/src/js/autoinit/autoinitCallbacks.js
+++ b/src/js/autoinit/autoinitCallbacks.js
@@ -173,7 +173,6 @@ const tooltipsCallback = (component, initSelector) => {
 };
 
 const popoverCallback = (component, initSelector) => {
-  console.log("hello");
   const popoverTriggerList = [].slice.call(
     document.querySelectorAll(initSelector)
   );

From 5a67bd1f47556ccff622f07b59e36490ce16011d Mon Sep 17 00:00:00 2001
From: igor_przybysz <i.przybysz@mdbootstrap.com>
Date: Mon, 3 Jul 2023 12:53:23 +0200
Subject: [PATCH 3/3] Add autoinits - demo sites

---
 demo/sites/components/popover.html | 25 ++++++++-----------------
 demo/sites/components/tooltip.html | 27 +++++++++------------------
 2 files changed, 17 insertions(+), 35 deletions(-)

diff --git a/demo/sites/components/popover.html b/demo/sites/components/popover.html
index 6ea10a835..7421e518d 100644
--- a/demo/sites/components/popover.html
+++ b/demo/sites/components/popover.html
@@ -59,7 +59,7 @@
 
       <button
         type="button"
-        class="rounded bg-primary px-6 pt-2.5 pb-2 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg"
+        class="rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg"
         data-te-toggle="popover"
         data-te-placement="top"
         data-te-content="Top popover">
@@ -67,7 +67,7 @@
       </button>
       <button
         type="button"
-        class="rounded bg-primary px-6 pt-2.5 pb-2 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg"
+        class="rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg"
         data-te-toggle="popover"
         data-te-placement="right"
         data-te-content="Right popover">
@@ -75,7 +75,7 @@
       </button>
       <button
         type="button"
-        class="rounded bg-primary px-6 pt-2.5 pb-2 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg"
+        class="rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg"
         data-te-toggle="popover"
         data-te-placement="bottom"
         data-te-content="Bottom popover">
@@ -83,7 +83,7 @@
       </button>
       <button
         type="button"
-        class="rounded bg-primary px-6 pt-2.5 pb-2 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg"
+        class="rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg"
         data-te-toggle="popover"
         data-te-placement="left"
         data-te-content="Left popover">
@@ -116,7 +116,7 @@
         data-te-trigger="hover focus"
         data-te-content="Disabled popover">
         <button
-          class="pointer-events-none rounded bg-primary px-6 pt-2.5 pb-2 text-xs font-medium uppercase leading-normal text-white opacity-60 shadow-md transition duration-150 ease-in-out focus:outline-none focus:ring-0"
+          class="pointer-events-none rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white opacity-60 shadow-md transition duration-150 ease-in-out focus:outline-none focus:ring-0"
           type="button"
           disabled>
           Disabled button
@@ -129,22 +129,13 @@
     </div>
     <!-- Theme switcher -->
     <script type="module" src="../../../src/js/theme.js"></script>
+    <!-- MDB -->
+    <script type="module" src="../../../src/js/index.umd.js"></script>
     <!-- PRISM -->
     <script type="module" src="../../dev/js/new-prism.js"></script>
     <!-- MDB SNIPPET -->
     <script type="module" src="../../dev/js/dist/mdbsnippet.min.js"></script>
     <!-- Custom scripts -->
-    <script type="module">
-      import * as te from "../../../src/js/index.umd.js";
-
-      document.addEventListener("DOMContentLoaded", () => {
-        var popoverTriggerList = [].slice.call(
-          document.querySelectorAll('[data-te-toggle="popover"]')
-        );
-        var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
-          return new te.Popover(popoverTriggerEl);
-        });
-      });
-    </script>
+    <script type="text/javascript"></script>
   </body>
 </html>
diff --git a/demo/sites/components/tooltip.html b/demo/sites/components/tooltip.html
index c40b2e4e6..8fc2283dc 100644
--- a/demo/sites/components/tooltip.html
+++ b/demo/sites/components/tooltip.html
@@ -60,7 +60,7 @@
 
       <button
         type="button"
-        class="rounded bg-primary px-6 pt-2.5 pb-2 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg"
+        class="rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg"
         data-te-toggle="tooltip"
         data-te-placement="top"
         title="Tooltip on top">
@@ -68,7 +68,7 @@
       </button>
       <button
         type="button"
-        class="rounded bg-primary px-6 pt-2.5 pb-2 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg"
+        class="rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg"
         data-te-toggle="tooltip"
         data-te-placement="right"
         title="Tooltip on right">
@@ -76,7 +76,7 @@
       </button>
       <button
         type="button"
-        class="rounded bg-primary px-6 pt-2.5 pb-2 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg"
+        class="rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg"
         data-te-toggle="tooltip"
         data-te-placement="bottom"
         title="Tooltip on bottom">
@@ -84,7 +84,7 @@
       </button>
       <button
         type="button"
-        class="rounded bg-primary px-6 pt-2.5 pb-2 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg"
+        class="rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg"
         data-te-toggle="tooltip"
         data-te-placement="left"
         title="Tooltip on left">
@@ -97,7 +97,7 @@
 
       <button
         type="button"
-        class="rounded bg-primary px-6 pt-2.5 pb-2 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg"
+        class="rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-700 hover:shadow-lg focus:bg-primary-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-primary-800 active:shadow-lg"
         data-te-toggle="tooltip"
         data-te-html="true"
         title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
@@ -114,7 +114,7 @@
         data-te-toggle="tooltip"
         title="Disabled tooltip">
         <button
-          class="pointer-events-none rounded bg-primary px-6 pt-2.5 pb-2 text-xs font-medium uppercase leading-normal text-white opacity-60 shadow-md transition duration-150 ease-in-out focus:outline-none focus:ring-0"
+          class="pointer-events-none rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white opacity-60 shadow-md transition duration-150 ease-in-out focus:outline-none focus:ring-0"
           type="button"
           disabled>
           Disabled button
@@ -128,22 +128,13 @@
       charset="utf-8"></script>
     <!-- Theme switcher -->
     <script type="module" src="../../../src/js/theme.js"></script>
+    <!-- MDB -->
+    <script type="module" src="../../../src/js/index.umd.js"></script>
     <!-- PRISM -->
     <script type="module" src="../../dev/js/new-prism.js"></script>
     <!-- MDB SNIPPET -->
     <script type="module" src="../../dev/js/dist/mdbsnippet.min.js"></script>
     <!-- Custom scripts -->
-    <script type="module">
-      import * as te from "../../../src/js/index.umd.js";
-
-      document.addEventListener("DOMContentLoaded", () => {
-        var tooltipTriggerList = [].slice.call(
-          document.querySelectorAll('[data-te-toggle="tooltip"]')
-        );
-        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
-          return new te.Tooltip(tooltipTriggerEl);
-        });
-      });
-    </script>
+    <script type="module"></script>
   </body>
 </html>