solid-js-tooltip
v1.0.1
Published
<p> <img width="100%" src="https://assets.solidjs.com/banner?type=solid-js-tooltip&background=tiles&project=%20" alt="solid-js-tooltip"> </p>
Downloads
27
Maintainers
Readme
solid-js-tooltip
Quick start
Installation:
npm i solid-js-tooltip
# or
yarn solid-js-tooltip
# or
pnpm add solid-js-tooltip
Demo here!
Setup:
import { type TooltipDirective, tooltip } from 'solid-js-tooltip';
import 'solid-js-tooltip/styles.css';
// https://github.com/solidjs/solid/discussions/845
tooltip;
declare module 'solid-js' {
namespace JSX {
interface Directives extends TooltipDirective {}
}
}
Examples:
import { tooltip, Tooltip } from 'solid-js-tooltip';
...
<p
use:tooltip={{
tooltips: [
{
element: (
<Tooltip class="tooltip">
What...
</Tooltip>
),
position: 'top-center',
},
],
}}
tabIndex={0}
>
This is bla, bla, bla and bla...
</p>
import { tooltip, Tooltip } from 'solid-js-tooltip';
...
<p
use:tooltip={{
tooltips: [
{
element: (
<Tooltip class="tooltip">
What...
</Tooltip>
),
position: 'top-center',
},
{
element: (
<Tooltip class="tooltip">
is ... this...
</Tooltip>
),
position: 'right-center',
},
],
}}
tabIndex={0}
>
Etiam dictum eleifend justo, sit amet porttitor lectus ullamcorper eget. Morbi
aliquet, nibh non porta euismod, metus est tincidunt ex, id vehicula massa
metus id arcu. Nunc quis tincidunt metus, eu dapibus ligula.
</p>
import { tooltip, Tooltip } from 'solid-js-tooltip';
...
<p
class="highlight-text"
use:tooltip={{
tooltips: [
{
element: (
<Tooltip class="tooltip">
Hey! I am describing something...
</Tooltip>
),
displayOnHover: false,
},
],
onFocusin: (event) => {
console.log('"focusin" event:"', event);
},
}}
tabIndex={0}
>
Maecenas blandit arcu eget rutrum sodales. Vestibulum tempor mi nec metus
elementum fermentum. Aenean a gravida justo, nec pharetra massa.
</p>
import { type TooltipComponent, Tooltip as BaseTooltip } from 'solid-js-tooltip';
import 'styles.css';
// You can use "Tooltip" component as base for your custom tooltip.
export const Tooltip: TooltipComponent = (props) => {
return (
<BaseTooltip {...props} class={`${props?.class || ''} tooltip`}>
<div>
<div>
...
</div>
</div>
</BaseTooltip>
)
};
...
import { tooltip } from 'solid-js-tooltip';
import { Tooltip } from './custom-tooltip-component-from-somewhere';
<p
use:tooltip={{
tooltips: [
{
element: (
<Tooltip>
Hey! I am describing something...
</Tooltip>
),
displayOnHover: false,
},
],
onFocusin: (event) => {
console.log('"focusin" event:"', event);
},
}}
tabIndex={0}
>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, suscipit?
</p>
Component API:
Tooltip
component has the same attributes and events as HTMLDivElement
and serves as a base for your custom tooltip.
Default props:
| Prop name | Type | Description | Default value |
| ------------------------------ | --------- | --------------------------------------------------------------------------------------------------------- | -------------------- |
| class
| string
| read on MDN | 'solid-js-tooltip'
|
| role
| string
| read on MDN | 'tooltip'
|
| tabindex
| number
| read on MDN | -1
|
| inert
| boolean
| read on MDN | true
|
| aria-label
| string
| read on MDN | 'tooltip'
|
| aria-labelledby
| string
| read on MDN | 'tooltip'
|
| aria-hidden
| boolean
| read on MDN | true
|
| data-tooltip-sr-notification
| string
| Data attribute that notifies the screen reader user that this element has a tooltip. | '; Has tooltip: '
|
Directive API:
| Option name | Type | Description |
| -------------- | ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| tooltips
| object
| Array of options for each defined tooltip. |
| onMouseEnter
| function
or undefined
| Event that occurs when the mouse pointer enters an element. (reference) |
| onMouseLeave
| function
or undefined
| Event that occurs when the mouse pointer leaves an element. (reference) |
| onFocusIn
| function
or undefined
| Event that occurs when an element gets focus. (reference) |
| onFocusOut
| function
or undefined
| Event that occurs when an element loses focus. (reference) |
tooltips
option:
| Option name | Type | Description |
| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
| element
| object
| Element used as a tooltip. |
| position
| top-left-corner
or top-left
or top-center
or top-right
or top-right-corner
or right-top
or right-center
or right-bottom
or bottom-right-corner
or bottom-right
or bottom-center
or bottom-left
or bottom-left-corner
or left-bottom
or left-center
or left-top
| Tooltip position. By default it is top-left
position. |
| displayOnHover
| boolean
or undefined
| Controls whether a tooltip is displayed when hovering over an element. Bu default is is true
. |
| displayOnFocus
| boolean
or undefined
| Controls whether a tooltip is displayed when focusing over an element. Bu default is is true
. |