Hyperapp Component for Tippy.js

HyperappTippy.jsx

import { h, app } from "hyperapp"
import tippy from "tippy.js"

export default (realProps, [reference]) => {
  const props = { ...realProps }

  if (props.html.constructor === Object && !props.target) {
    const container = document.createElement('div')
    app({}, {}, props.html, container)
    props.html = container
  }

  const update = element => {
    const content = element._tippy.popper.querySelector(".tippy-content")
    if (typeof props.html !== "string") {
      content.replaceChild(props.html, content.firstElementChild)
    } else {
      content[props.allowTitleHTML ? "innerHTML" : "textContent"] =
        props.title
    }
  }

  return (
    <reference.nodeName
      title={props.title}
      {...reference.attributes}
      oncreate={element => !element._tippy && tippy(element, props)}
      onupdate={element => element._tippy && setTimeout(update, 1, element)}
      ondestroy={element => element._tippy && element._tippy.destroy()}
    >
      {reference.children}
    </reference.nodeName>
  )
}

index.jsx

import { h, app } from "hyperapp"
import Tippy from "./HyperappTippy"

const state = {
  color: "pink"
}

const actions = {
  setColor: color => ({ color })
}

const view = (state, actions) => (
  <div class="app">
    <Tippy title="My title tooltip" duration={200} delay={50} arrow={true} animation="scale">
      <button>Button text</button>
    </Tippy>
    <Tippy html={<span style={{ color: state.color }}>My HTML stateful tooltip</span>}>
      <button onclick={() => actions.setColor("cyan")}>Button text</button>
    </Tippy>
  </div>
)

app(state, actions, view, document.body)