svelte-tooltip-action

    1.0.4 • Public • Published

    svelte-tooltip-action

    NPM version NPM downloads Svelte v3

    Simple beautiful tooltip in the form of Svelte 3 action

    example

    🍰 Features

    This is Svelte's action to create some small minimalistic tooltips.

    • Easy to use (an implementation through the Svelte action 💥)
    • Light size
    • Customizable 🔥

    Install

    npm i svelte-tooltip-action

    Usage

    <script>
      import tooltip from 'svelte-tooltip-action'
    
      ...
    
      const text = 'Some extra text here (advice)'
      const style = 'left: 0; bottom: -24px;'
    </script>
    
    <div use:tooltip={{ text: text, style: style }}>
      Your awesome content here (for example, buttons)
    </div>

    API

    Parameters

    Name Type Default Description
    text string empty string Tooltip's text
    style string empty string Your custom CSS

    You can use style parameter to customize position of your tooltip instance with CSS left: ..., top: ..., right: ..., bottom: .... Sometimes it's useful to combine several rules together. For example, if you want horizontally center tooltip use: left: 50%; width: $tooltip-width; margin-left: $tooltip-width / 2.

    Why my overlap not working?

    • Check CSS position: relative on your <div /> (on <div /> with use:tooltip)
    • Also do not put CSS overflow: hidden on parent HTML tags (in case of your tooltip will go over parents)
    • Please note that not all components can be overlaid with a tooltip because the target Svelte property is used under the hood:
    new Tooltip({
      target: node,
      props: { text, style },
    })

    This property has some limitations. For example you cannot use it on <img/>, but you can wrap the image, so the tooltip will work:

    <div use:tooltip={{text: 'Hi', style: 'left: 0; bottom: 0;'}}>
      <img src='...' alt='...'/>
    </div>
    • Check CSS z-index

    License

    MIT © Denis Stasyev

    Install

    npm i svelte-tooltip-action

    DownloadsWeekly Downloads

    104

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    30 kB

    Total Files

    4

    Last publish

    Collaborators

    • denisstasyev