@unicef-polymer/etools-info-tooltip NPM

\<etools-info-tooltip>

Tooltip element associated with form elements (or any other element), an icon is used to trigger tooltip open.

Check demo for more details (npm i, polymer serve).

paper-input tooltip paper-input-tooltip important warning text element important warning tooltip text element tooltip

Usage

<etools-info-tooltip theme="light">
  <paper-input slot="field" label="Form input" placeholder="Enter text here..."></paper-input>
  <span slot="message">Tooltip message for this input</span>
</etools-info-tooltip>

<etools-info-tooltip icon="report-problem" important-warning>
  <paper-input slot="field" label="Form input" placeholder="Enter text here..."></paper-input>
  <span slot="message">Tooltip message for this input</span>
</etools-info-tooltip>

<etools-info-tooltip theme="light">
  <span slot="field">This is just a simple text.</span>
  <span slot="message">Tooltip message for this text</span>
</etools-info-tooltip>

<etools-info-tooltip icon="report" important-warning>
  <span slot="field">This is just a simple text.</span>
  <span slot="message">Tooltip message <br />for this text</span>
</etools-info-tooltip>

Properties:

icon - String, default: info-outline, only default set of icons can be used
position - String, default: top
importantWarning - Boolean, default: false
theme - String, default: dark (only dark and light allowed)

You can use importantWarning property and icon property to make the field style look like a warning (using --error-color var) on the UI.

Styling

You can use paper-tooltip and element variables and mixins to change tooltip style.

Custom property	Description	Default
`--paper-tooltip-background`	Tooltip background	`#ffffff`
`--paper-tooltip-opacity`	Tooltip opacity	`1`
`--paper-tooltip-text-color`	Tooltip text color	`var(--primary-text-color, rgba(0, 0, 0, 0.87)`
`--paper-tooltip`	Tooltip mixin	`{}`
(Deprecated)`--etools-tooltip-trigger-icon`	Mixin applied to the icon that triggers tooltip open	`{}`
`--tooltip-box-style`	Mixin
`--light-tooltip-style`	Mixin

CSS Shadow Parts

Part	Description	Default
`eit-trigger-icon`	Styles applied to the icon that triggers tooltip open

Attributes:

icon-first attribute can be used to place the icon in front of the element
right-aligned attribute will align the content to the right

\<info-icon-tooltip>

Info icon element, on click will trigger tooltip open.

Usage

<info-icon-tooltip tooltipText="Tooltip message for info icon" position="top" offset="25"> </info-icon-tooltip>

info-icon tooltip

Properties:

tooltipText - String, default:
position - String, default: right
offset - Number, default: 14

Styling

You can use info-icon-tooltip and element variables and mixins to change tooltip style.

Custom property	Description	Default
`---iit-font-size`	Tooltip font size	`14px`
`--iit-margin`	Icon margin	`0`
`--iit-icon-size`	Icon size (width and height)	`24px`

CSS Shadow Parts

Part	Description	Default
`etools-iit-icon`	Styles applied to the icon that triggers tooltip open
`etools-iit-content`	Styles applied to the tooltip content

Install

$ npm i --save @unicef-polymer/etools-info-tooltip

Linting the code

Install local npm packages (run npm install) Then just run the linting task

$ npm run lint

Demo / Preview element locally

Install needed dependencies by running: $ npm install.

By default iron-component-page will look for a file called analysis.json. If the JSON descriptor file - analysis.json is not up-to-date, re-generate it using

polymer analyze > analysis.json

If the generated analysis.json is empty , try specifing the file or the entrypoint in polymer.json.

Make sure you have the Polymer CLI installed. Then run $ polymer serve to serve your element application locally.

Running Tests

TODO: improve and add more tests

$ polymer test

Circle CI

Package will be automatically published after tag push (git tag 1.2.3 , git push --tags). Tag name must correspond to SemVer (Semantic Versioning) rules. Examples: