Phoenix LiveView hook that shows a datum's fields under the pointer (spec/10 §12).

TooltipHook needs no round trip: the server writes each datum's fields onto the element that draws it — Visualize.IR.Element.datum/2, or a mark's tooltip node (spec/14 §5.7) — and the hook reads them from the element under the pointer (D-75). A data-tooltip-template on the element or an ancestor formats the text with {field} placeholders; without one the tooltip lists field: value per line. A click pushes the fields to the LiveView only when a data-tooltip-event names the event.

In a sync group (spec/10 §4.3, §12.4) the hook publishes the pointer's x in domain units on the group's bus, and shows the datum element nearest to another member's hover.

Usage

<svg id="chart" phx-hook="TooltipHook">
  <g class="mark mark-circle" data-tooltip-template="{t}: {v}" data-tooltip-event="point_click">
    <circle cx="10" cy="20" r="3" data-datum="t v" data-datum-t="1" data-datum-v="4"/>
  </g>
</svg>

def handle_event("point_click", %{"t" => t, "v" => v}, socket) do
  {:noreply, assign(socket, picked: {t, v})}
end

Configuration

Data attributes on the hook element:

• data-tooltip-class - class of the tooltip element the hook creates (default: "vis-tooltip")

Data attributes on the elements, written by the server (spec/10 §12.2):

• data-datum - the field names, space-separated, in order
• data-datum-<field> - the value of each field, _ in the name as -
• data-tooltip-template - the text with {field} placeholders; the nearest wins
• data-tooltip-event - the event a click pushes; absent, nothing is pushed