feat(easel): add sky details tooltip

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 %}

static/src/index.ts

@@ -1,5 +1,10 @@
-import "./main.scss";
+import * as bootstrap from "bootstrap";
-import "bootstrap";
-import "./theme";
-import "./language";
 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));
+});

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";