Tooltip

Use it as a directive. Set tooltip text and placement.

Default

Show nothing if text for tooltip is not provided.

    
  <button luxTooltip>Tooltip</button>
  

    
  <button luxTooltip content="Top" placement="top">Top</button>
  

      
  <button luxTooltip content="Bottom" placement="bottom">Bottom</button>
  

    
  <button luxTooltip content="Left" placement="left">Left</button>
  

    
  <button luxTooltip content="Right" placement="right">Right</button>
  

Tooltip from Component

    
  import { Component } from '@angular/core';
  @Component({
      template: `
        <span class="lux-tooltip" style="transition: opacity 200ms">Top Component</span>
      `
  })
  export class TooltipComponent {
      constructor()  { }
  }
  

    
  getComponentTooltip(): TooltipComponent {
    return TooltipComponent;
  }
  

    
  <button luxTooltip [content]="getComponentTooltip()" placement="top">Top Component</button>
  

Tooltip from TemplateRef

    
  <ng-template #contentTop>
    <span class="lux-tooltip" style="transition: opacity 200ms">Top TemplateRef</span>
  </ng-template>
  <button luxTooltip [content]="contentTop" placement="top">Top TemplateRef</button>
  

    
  <ng-template #contentBottom>
    <span class="lux-tooltip" style="transition: opacity 200ms">Bottom TemplateRef</span>
  </ng-template>
  <button luxTooltip [content]="contentBottom" placement="bottom">Bottom TemplateRef</button>
  

    
  <ng-template #contentLeft>
    <span class="lux-tooltip" style="transition: opacity 200ms">Left TemplateRef</span>
  </ng-template>
  <button luxTooltip [content]="contentLeft" placement="left">Left TemplateRef</button>
  

    
  <ng-template #contentRight>
    <span class="lux-tooltip" style="transition: opacity 200ms">Right TemplateRef</span>
  </ng-template>
  <button luxTooltip [content]="contentRight" placement="right">Right TemplateRef</button>