Tooltip

<button
  flxTooltip="Tooltip on top"
  tooltipPosition="top">
  Top
</button>

<button
  flxTooltip="Tooltip on bottom"
  tooltipPosition="bottom">
  Bottom
</button>

<button
  flxTooltip="Tooltip on left"
  tooltipPosition="left">
  Left
</button>

<button
  flxTooltip="Tooltip on right"
  tooltipPosition="right">
  Right
</button>

<button
  flxTooltip="Auto-positioned tooltip"
  tooltipPosition="auto">
  Auto
</button>

<!-- No delay -->
<button
  flxTooltip="Appears immediately"
  [tooltipDelay]="0">
  No delay
</button>

<!-- Short delay -->
<button
  flxTooltip="Appears after 200ms"
  [tooltipDelay]="200">
  Short delay
</button>

<!-- Long delay -->
<button
  flxTooltip="Appears after 1 second"
  [tooltipDelay]="1000">
  Long delay
</button>

<button
  [flxTooltip]="getTooltip()"
  [tooltipDisabled]="!showTooltip">
  Conditional tooltip
</button>

<button
  [flxTooltip]="isValid ? 'Submit form' : 'Please fix errors'"
  [disabled]="!isValid">
  Submit
</button>

export class ConditionalTooltip {
  showTooltip = true;
  isValid = false;

  getTooltip(): string {
    return this.showTooltip ? 'Helpful information' : '';
  }
}

<flx-input
  label="Password"
  type="password"
  [(ngModel)]="password">
  <flx-icon
    name="info"
    flxTooltip="Password must be at least 8 characters"
    slot="suffix">
  </flx-icon>
</flx-input>

<flx-input
  label="Email"
  type="email"
  [(ngModel)]="email">
  <flx-icon
    name="help-circle"
    flxTooltip="We'll never share your email"
    slot="suffix">
  </flx-icon>
</flx-input>

<div class="toolbar">
  <button
    class="icon-button"
    flxTooltip="Edit"
    tooltipPosition="bottom">
    <flx-icon name="edit"></flx-icon>
  </button>

  <button
    class="icon-button"
    flxTooltip="Delete"
    tooltipPosition="bottom">
    <flx-icon name="trash"></flx-icon>
  </button>

  <button
    class="icon-button"
    flxTooltip="Share"
    tooltipPosition="bottom">
    <flx-icon name="share"></flx-icon>
  </button>
</div>

<div
  class="truncated"
  [flxTooltip]="fullText"
  [tooltipDisabled]="!isTruncated">
  {{ displayText }}
</div>

export class TruncatedText {
  fullText = 'This is a very long text that will be truncated...';
  
  get displayText(): string {
    return this.fullText.length > 50
      ? this.fullText.substring(0, 50) + '...'
      : this.fullText;
  }

  get isTruncated(): boolean {
    return this.fullText.length > 50;
  }
}

<flx-icon
  name="question-circle"
  flxTooltip="Click for help"
  [tooltipShowOnClick]="true">
</flx-icon>