kalidea/kaligraphi

<h1>Tooltip</h1>

<div class="example" [class.reverse]="hasReverse">
  <article>
    <kal-button
      [kalTheme]="themes"
      kalTooltip="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam minima neque pariatur placeat similique. "
    >Button with string tooltip</kal-button>

    <kal-button [kalTheme]="themes" kalTooltip>
      <ng-template kalTooltipContent>
        <h2>Lorem ipsum dolor sit amet</h2>
        <ul>
          <li>consectetur adipisicing elit. </li>
          <li>Ipsam minima neque pariatur placeat similique.</li>
        </ul>
      </ng-template>
      Button with html tooltip
    </kal-button>
  </article>
</div>


<div class="configurator">
  <kal-form-field>
    <kal-select label="themes" [multiple]="true" [(ngModel)]="themes">
      <kal-option value="">default</kal-option>
      <kal-option value="primary">primary</kal-option>
      <kal-option value="reverse">reverse</kal-option>
    </kal-select>
  </kal-form-field>

</div>