Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

wired-tooltip

v1.0.0arrow_drop_down
v1.0.0
v0.9.2
STATUS
Passing
DOWNLOADS
10
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
6 months ago
SIZE
12 KB
Tooltip with text that appears on hover over an element.
1 contributor
Use wired-tooltip in your project ?
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
React
Vue
Angular
Add dependency... help_outline
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';
revert changes
reload
toggle layout
maximize
modifieddraft
chevron_left
chevron_right

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 © Preet Shihn