Nauseating Pumpkin Mush

    wired-tooltip
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    wired tooltip

    wired-tooltip

    Tooltip with text that appears on hover over an element. It will be centered to an anchor element specified in the 'for' attribute, or, if that doesn't exist, centered to the parent node containing it.

    For demo and view the complete set of wired-elememts: wiredjs.com

    Learn about web components here.

    Usage

    Add wired-tooltip to your project:

    npm i wired-tooltip
    

    Import wired-tooltip definition into your HTML page:

    <script type="module" src="wired-tooltip/wired-tooltip.js"></script>

    Or into your module script:

    import { WiredTooltip } from "wired-tooltip"

    Use it in your web page:

    <div>
      <div class="inline">
        <button>Click me!</button>
        <wired-tooltip text="Below"></wired-tooltip>
      </div>
      <button id="btn">Click me!</button>
      <wired-tooltip position="top" for="btn" text="Above"></wired-tooltip>
    </div>

    Properties

    for - Id of the element the tooltip is for. Optional.

    position - String value: left/right/top/bottom. Default is bottom.

    text - Text in the tooltip.

    Custom CSS Variables

    --wired-tooltip-border-color Border color of the tooltip. Default is currentColor.

    --wired-tooltip-background Background color of the tooltip.

    License

    MIT License (c) Preet Shihn

    Install

    npm i wired-tooltip

    DownloadsWeekly Downloads

    2

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    26.5 kB

    Total Files

    8

    Last publish

    Collaborators

    • shihn