ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
lion/packages/tooltip
History
CircleCI ca3f94f754 chore: release new versions 
- @lion/ajax@0.1.8
 - @lion/button@0.1.13
 - @lion/calendar@0.1.6
 - @lion/checkbox-group@0.1.12
 - @lion/checkbox@0.1.11
 - @lion/choice-input@0.1.11
 - @lion/core@0.1.6
 - @lion/field@0.1.11
 - @lion/fieldset@0.1.11
 - @lion/form-system@0.0.13
 - @lion/form@0.1.12
 - @lion/icon@0.1.6
 - @lion/input-amount@0.1.11
 - @lion/input-date@0.1.11
 - @lion/input-datepicker@0.1.3
 - @lion/input-email@0.1.11
 - @lion/input-iban@0.1.11
 - @lion/input@0.1.11
 - @lion/localize@0.3.2
 - @lion/overlays@0.2.2
 - @lion/popup@0.1.13
 - @lion/radio-group@0.1.12
 - @lion/radio@0.1.11
 - @lion/select@0.1.11
 - @lion/steps@0.1.6
 - @lion/textarea@0.1.11
 - @lion/tooltip@0.1.13
 - @lion/validate@0.2.2
2019-05-17 09:48:08 +00:00
..
src fix: update storybook/linting; adjust story labels, eslint ignores 2019-04-28 15:02:31 +02:00
stories fix: update storybook/linting; adjust story labels, eslint ignores 2019-04-28 15:02:31 +02:00
test fix: update storybook/linting; adjust story labels, eslint ignores 2019-04-28 15:02:31 +02:00
CHANGELOG.md chore: release new versions 2019-05-17 09:48:08 +00:00
index.js feat: release inital public lion version 2019-04-26 10:37:57 +02:00
lion-tooltip.js feat: release inital public lion version 2019-04-26 10:37:57 +02:00
package.json chore: release new versions 2019-05-17 09:48:08 +00:00
README.md feat: release inital public lion version 2019-04-26 10:37:57 +02:00

README.md

Tooltip

lion-tooltip is a component used for basic popups on hover. Its purpose is to show content appearing when the user hovers over an invoker element with the cursor or with the keyboard, or if th e invoker element is focused.

Features

  • Show content when hovering the invoker
  • Show content when the invoker is focused
  • Use the position property to position the content popup relative to the invoker

How to use

Installation

npm i --save @lion/popup

import '@lion/tooltip/lion-tooltip.js';

Example

<lion-tooltip>
  <div slot="content" class="tooltip">This is a popup<div>
  <a slot="invoker" href="https://www.ing.com/Newsroom/All-news/Uslion-AI-to-assess-credit-risk.htm">
    Popup on link
  </a>
</lion-tooltip>