diff --git a/gallery/easel/route/view/weather/templates/weather.html b/gallery/easel/route/view/weather/templates/weather.html
index c2a515e..bc568d3 100644
--- a/gallery/easel/route/view/weather/templates/weather.html
+++ b/gallery/easel/route/view/weather/templates/weather.html
@@ -54,7 +54,7 @@
       </tr>
       <tr>
         {% for value in response.values %}
-        <td class="cloudness">
+        <td class="cloudness" data-bs-toggle="tooltip" data-bs-title="{{ value.sky }}">
           {% for icon in value.sky | cloudness_icon %}
           <div class="icon">{{icon}}</div>
           {% endfor %}
diff --git a/static/src/index.ts b/static/src/index.ts
index 2fc9f43..cd01b14 100644
--- a/static/src/index.ts
+++ b/static/src/index.ts
@@ -1,5 +1,10 @@
-import "./main.scss";
-import "bootstrap";
-import "./theme";
-import "./language";
+import * as bootstrap from "bootstrap";
 import "./components";
+import "./language";
+import "./main.scss";
+import "./theme";
+
+document.addEventListener("DOMContentLoaded", (event) => {
+  const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+  const tooltipList = [...tooltipTriggerList].map((tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl));
+});
diff --git a/static/src/lib/bootstrap.scss b/static/src/lib/bootstrap.scss
index 943d598..406e2a8 100644
--- a/static/src/lib/bootstrap.scss
+++ b/static/src/lib/bootstrap.scss
@@ -37,7 +37,7 @@
 //@import "bootstrap/scss/close";
 //@import "bootstrap/scss/toasts";
 //@import "bootstrap/scss/modal";
-//@import "bootstrap/scss/tooltip";
+@import "bootstrap/scss/tooltip";
 //@import "bootstrap/scss/popover";
 //@import "bootstrap/scss/carousel";
 //@import "bootstrap/scss/spinners";