wired-tooltip

v1.0.0

v0.9.2

STATUS

Passing

DOWNLOADS

LICENSE

MIT

VISIBILITY

Public

PUBLISHED

2 years ago

SIZE

12 KB

Tooltip with text that appears on hover over an element.

Informational Components

1 contributor

Install wired-tooltip as a package?

Copied

npm i @bit/wiredjs.wired-elements.wired-tooltip

Set Bit as a scoped registryLearn more

npm config set '@bit:registry' https://node.bit.dev

Component Example

React

Vue

Angular

React Native

Add dependency...

Just

import

any of the 1 million components

and packages in Bit or NPM to the example.

import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';

modifieddraft

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.

wired-tooltip

wired-tooltip

Usage

Properties

Custom CSS Variables

License