5.0.0-rc.2 • Published 2 years ago

@unicef-polymer/etools-info-tooltip v5.0.0-rc.2

Weekly downloads
32
License
Apache-2.0
Repository
github
Last release
2 years ago

\<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 propertyDescriptionDefault
--paper-tooltip-backgroundTooltip background#ffffff
--paper-tooltip-opacityTooltip opacity1
--paper-tooltip-text-colorTooltip text colorvar(--primary-text-color, rgba(0, 0, 0, 0.87)
--paper-tooltipTooltip mixin{}
(Deprecated)--etools-tooltip-trigger-iconMixin applied to the icon that triggers tooltip open{}
--tooltip-box-styleMixin
--light-tooltip-styleMixin

CSS Shadow Parts

PartDescriptionDefault
eit-trigger-iconStyles 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 propertyDescriptionDefault
---iit-font-sizeTooltip font size14px
--iit-marginIcon margin0
--iit-icon-sizeIcon size (width and height)24px

CSS Shadow Parts

PartDescriptionDefault
etools-iit-iconStyles applied to the icon that triggers tooltip open
etools-iit-contentStyles 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 matchResult
1.2.3match
1.2.3-prematch
1.2.3+buildmatch
1.2.3-pre+buildmatch
v1.2.3-pre+buildmatch
1.2no match

You can see more details here

5.0.0-rc.1

2 years ago

5.0.0-rc.2

2 years ago

4.1.10

2 years ago

4.1.11

2 years ago

4.1.9

2 years ago

4.1.8

2 years ago

4.1.7

3 years ago

4.1.6

3 years ago

4.1.5

3 years ago

4.1.4

3 years ago

4.1.3

3 years ago

4.1.3-rc.1

3 years ago

4.1.0-rc.1

4 years ago

4.1.0-rc.2

4 years ago

4.1.0-rc.3

4 years ago

4.1.0

4 years ago

4.1.2

4 years ago

4.1.1

4 years ago

3.2.0

4 years ago

4.0.0-rc.1

4 years ago

4.0.0-rc.3

4 years ago

4.0.0-rc.2

4 years ago

4.0.0-rc.4

4 years ago

3.2.0-rc.4

4 years ago

3.2.0-rc.3

4 years ago

3.2.0-rc.2

4 years ago

3.2.0-rc.1

4 years ago

3.1.0

4 years ago

3.0.1

5 years ago

3.0.0

6 years ago

3.0.0-rc.1

6 years ago