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 on a datum of a mark whose tooltip names an event pushes one wire event, visualize_event, with the element's key — its frame, its mark's position and its row's ordinal — the drawing's data-tooltip-drawn token, the pointer and the modifiers (spec/10 §12.3, D-170), to the component data-tooltip-target names, else to the LiveView. Visualize.Components.Chart and a board's cell are those components: they resolve the click to the row drawn and send the page a Visualize.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}">
    <circle cx="10" cy="20" r="3" data-datum="t v" data-datum-t="1" data-datum-v="4"/>
  </g>
</svg>

A chart whose marks declare events is rendered through Visualize.Components.Chart, which mounts the hook itself.

Configuration

Data attributes on the hook element:

• data-tooltip-class - class of the tooltip element the hook creates (default: "vis-tooltip")
• data-tooltip-target - the phx-target a click's event goes to with pushEventTo; unset, it goes to the LiveView (D-161)
• data-tooltip-drawn - the holder's token for the drawing on screen, sent with a click (D-170)

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 declared event a click delivers; absent, nothing is pushed
• data-frame, data-mark - on a mark's group with an event: its frame and position
• data-row - on each datum element of such a mark: the row's ordinal in its rows