Skip to content

funny-family/solid-js-tooltip

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

solid-js-tooltip

solid-js-tooltip

pnpm

Tooltip position explain.

Quick start

Installation:

npm i solid-js-tooltip
# or
yarn solid-js-tooltip
# or
pnpm add solid-js-tooltip

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.