Skip to content

Instantly share code, notes, and snippets.

@atomiks
Last active July 6, 2018 08:44
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save atomiks/47a8f4e7c0a3823282974eb2de80ebec to your computer and use it in GitHub Desktop.
Hyperapp Component for Tippy.js
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>
)
}
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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment