Components chevron_right Tooltip

GitHub

Basic Usage

 
<PaperButton @raised={{true}}>
  A button
  <PaperTooltip @position={{this.position}}>
    Hey! I'm a tooltip. Çup?
  </PaperTooltip>
</PaperButton>

<PaperButton @iconButton={{true}} @raised={{true}}>
  {{paper-icon "create"}}
  <PaperTooltip @position={{this.position}}>
    Create
  </PaperTooltip>
</PaperButton>

<PaperButton @fab={{true}} @raised={{true}} @accent={{true}}>
  {{paper-icon "delete"}}
  <PaperTooltip @position={{this.position}}>
    Delete
  </PaperTooltip>
</PaperButton>

<div>
  {{#paper-icon "info"}}
    <PaperTooltip @position={{this.position}}>
      Icon tooltip
    </PaperTooltip>
  {{/paper-icon}}
</div>

You can render tooltips using the paper-tooltip component. This component will attach to the immediate parent element and use it for positioning.

You can control the position of you tooltip using the position property which can be one of bottom (default), top, left or right. Try it:

info
Bottom
Top
Left
Right

Usage

Option Type Description
attachTo element or selector Existing element that the tooltip will use to position itself. Defaults to the immediate parent element of the tooltip.
parent element or selector Existing element where the tooltip will be rendered. Defaults to the global paper-wormhole.
position string Controls the position of the tooltip. Use one of bottom (default), top, left or right
zIndex number Controls the z-index of the tooltip. By default it is 100.