Tooltip improvements (#1874)

Allow the tooltip position (and arrow) to be configured, and change the
placement of the tooltip on the Device show page.

Author: joshk

assets/ui-rework/hooks/toolTip.js

@@ -1,28 +1,64 @@
-import { computePosition, offset, arrow } from "@floating-ui/dom"
+import { autoUpdate, computePosition, offset, arrow } from "@floating-ui/dom"
 
 export default {
   mounted() {
     this.updated()
   },
 
   updateTooltip() {
-    computePosition(this.el, this.content, {
-      placement: this.placement,
-      middleware: [offset(15), arrow({ element: this.arrow })]
-    }).then(({ x, y, middlewareData }) => {
-      Object.assign(this.content.style, {
-        top: `${y}px`,
-        left: `${x}px`
-      })
+    const arrowLen = this.arrow.offsetWidth
+
+    let placement = this.placement
 
-      if (middlewareData.arrow) {
-        const { x } = middlewareData.arrow
+    autoUpdate(this.el, this.content, () => {
+      const sideOffset = {
+        top: 15,
+        right: 10,
+        bottom: 15,
+        left: 10
+      }[this.placement]
 
-        Object.assign(this.arrow.style, {
+      computePosition(this.el, this.content, {
+        placement,
+        middleware: [offset(sideOffset), arrow({ element: this.arrow })]
+      }).then(({ x, y, middlewareData, placement }) => {
+        Object.assign(this.content.style, {
           left: `${x}px`,
-          top: `${-this.arrow.offsetHeight / 2}px`
+          top: `${y}px`
         })
-      }
+
+        const side = placement.split("-")[0]
+
+        const staticSide = {
+          top: "bottom",
+          right: "left",
+          bottom: "top",
+          left: "right"
+        }[side]
+
+        if (middlewareData.arrow) {
+          const { x, y } = middlewareData.arrow
+
+          const border = {
+            top: "0 1px 1px 0",
+            right: "0 0 1px 1px",
+            bottom: "1px 0 0 1px",
+            left: "1px 1px 0 0"
+          }[this.placement]
+
+          Object.assign(this.arrow.style, {
+            left: x != null ? `${x}px` : "",
+            top: y != null ? `${y}px` : "",
+            // Ensure the static side gets unset when
+            // flipping to other placements' axes.
+            right: "",
+            bottom: "",
+            [staticSide]: `${(-arrowLen - 1) / 2}px`,
+            transform: "rotate(45deg)",
+            "border-width": border
+          })
+        }
+      })
     })
   },
 

lib/nerves_hub_web/components/device_health/health_status.ex

@@ -1,23 +1,24 @@
 defmodule NervesHubWeb.Components.HealthStatus do
-  use NervesHubWeb, :live_component
+  use NervesHubWeb, :component
 
   attr(:device_id, :integer)
   attr(:health, :map, default: %{status: :unknown, status_reasons: nil})
+  attr(:tooltip_position, :string, default: "bottom")
 
   def render(assigns) do
     ~H"""
-    <div id={"health-tooltip-#{@device_id}"} phx-hook="ToolTip">
+    <div id={"health-tooltip-#{@device_id}"} phx-hook="ToolTip" data-placement={@tooltip_position}>
       <.icon name={icon_name(@health)} />
 
-      <div class="tooltip-content hidden w-max absolute top-0 left-0 text-xs px-2 py-1.5 rounded border border-[#3F3F46] bg-base-900 flex">
+      <div class="tooltip-content hidden w-max absolute top-0 left-0 z-40 text-xs px-2 py-1.5 rounded border border-[#3F3F46] bg-base-900 flex">
         <%= if @health && @health.status_reasons do %>
           <div :for={{status, reasons} <- @health.status_reasons}>
             {format_health_status_reason(status, reasons)}
           </div>
         <% else %>
           <div>{no_reasons(@health)}</div>
         <% end %>
-        <div class="tooltip-arrow absolute w-2 h-2 border-l border-t border-[#3F3F46] bg-base-900 origin-center rotate-45"></div>
+        <div class="tooltip-arrow absolute w-2 h-2 border-[#3F3F46] bg-base-900 origin-center rotate-45"></div>
       </div>
     </div>
     """

lib/nerves_hub_web/components/device_page/details.ex

@@ -94,7 +94,7 @@ defmodule NervesHubWeb.Components.DevicePage.Details do
           <div class="h-14 pl-4 pr-3 flex items-center justify-between">
             <div class="flex items-center gap-2">
               <div class="text-neutral-50 font-medium leading-6">Health</div>
-              <HealthStatus.render device_id={@device.id} health={@device.latest_health} />
+              <HealthStatus.render device_id={@device.id} health={@device.latest_health} tooltip_position="right" />
             </div>
             <div class="flex items-center gap-2">
               <div class="text-xs text-nerves-gray-500 tracking-wide">