Directive for displaying simple tooltips on components given a title
attribute.
A Solid component. See https://www.solidjs.com/
import tooltip from 'solid-tooltip'
export default function YourComponent() {
return (
<div use:tooltip="top" title="the title!">
hover me!
</div>
)
}
import tooltip from 'solid-tooltip'
export default function YourComponent() {
return <div use:tooltip={[() => signal()]}>hover me!</div>
}
import tooltip from 'solid-tooltip'
export default function YourComponent() {
return <div use:tooltip={['bottom', () => signal()]}>hover me!</div>
}
npm install solid-tooltip
Appends one div container to the body. Whenever your mouse moves over the component that has the title attribute, it updates the content of the attached div with the title
, show it, and position it in the desired place. When the mouse moves out, click, or the tab lose focus, the tooltip is hidden.
Customizing the tooltip is as simple as writing a wrapper. Lets say you want a tooltip that displays multiple lines.
//fancy-tooltip.js
import { createSignal } from 'solid-js'
import tooltip from 'solid-tooltip'
// create a signal to read/set the tooltip content
const [content, setContent] = createSignal()
// create the custom div that we will reuse on every tooltip
const container = (
<div
style={`
background:orange;
color:black;
border:1px solid white;
white-space: pre-wrap;
font-size:.8rem;
padding:6px;
margin:3px;
`}
>
{content()}
</div>
)
export default function myMultipleLinesTooltip(related, at) {
return tooltip(related, at, (tooltip, position) => {
setContent(
tooltip
.split('\n')
.map(s => s.trim())
.join('\n')
.trim(),
)
return container
})
}
// other-file.js
import myMultipleLinesTooltip from './fancy-tooltip.js'
export default function YourComponent() {
return (
<div use:myMultipleLinesTooltip="bottom" title="fancy\ntitle!">
hover me!
</div>
)
}
The argument of the directive its just the position.
value |
---|
bottom |
bottom-left |
bottom-left-overlap |
bottom-right |
bottom-right-overlap |
top (the default) |
top-left |
top-left-overlap |
top-right |
top-right-overlap |
left |
right |