solid-js-tooltip
v1.0.1TypeScript
<p> <img width="100%" src="https://assets.solidjs.com/banner?type=solid-js-tooltip&background=tiles&project=%20" alt="solid-js-tooltip"> </p>
76/weekUpdated 2 years agoMITUnpacked: 179.0 KB
Published by funny-family
npm install solid-js-tooltip
solid-js-tooltip
Quick start
$3
``bash`
npm i solid-js-tooltipor
yarn solid-js-tooltipor
pnpm add solid-js-tooltip
$3
---
$3
`ts
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 {}
}
}
`
$3
`tsx
import { tooltip, Tooltip } from 'solid-js-tooltip';
...
tooltips: [
{
element: (
What...
),
position: 'top-center',
},
],
}}
tabIndex={0}
>
This is bla, bla, bla and bla...
`
tsx
import { tooltip, Tooltip } from 'solid-js-tooltip';...
tooltips: [
{
element: (
What...
),
position: 'top-center',
},
{
element: (
is ... this...
),
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.
`tsx
import { tooltip, Tooltip } from 'solid-js-tooltip';...
use:tooltip={{
tooltips: [
{
element: (
Hey! I am describing something...
),
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.
`tsx
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 (
${props?.class || ''} tooltip}>
...
)
};
...
import { tooltip } from 'solid-js-tooltip';
import { Tooltip } from './custom-tooltip-component-from-somewhere';
tooltips: [
{
element: (
Hey! I am describing something...
),
displayOnHover: false,
},
],
onFocusin: (event) => {
console.log('"focusin" event:"', event);
},
}}
tabIndex={0}
>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, suscipit?
`$3
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: ' |$3
| 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`. |