<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).

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>

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:

| Version match | Result | | ------------------ | -------- | | 1.2.3 | match | | 1.2.3-pre | match | | 1.2.3+build | match | | 1.2.3-pre+build | match | | v1.2.3-pre+build | match | | 1.2 | no match |

You can see more details here