<app-breadcrumb [path]="routes.TOOLTIPS"></app-breadcrumb>

<div class="content-wrapper">
  <div class="cards-wrapper">
    <mat-card appearance="outlined" class="card">
      <mat-card-title>
        <p>Tooltip Example</p>
      </mat-card-title>

      <mat-card-content class="content">
        <button
          class="button"
          #tooltip="matTooltip"
          (click)="showTooltip()"
          mat-flat-button
          color="primary"
          [matTooltipDisabled]="!isShow"
          matTooltip="Info about the action"
          matTooltipClass="tooltip-blue"
        >tooltip on click</button>

        <button
          class="button"
          mat-flat-button
          color="warn"
          matTooltipPosition="above"
          matTooltip="Info about the action"
          matTooltipClass="tooltip-pink"
        >tooltip on hover</button>
      </mat-card-content>
    </mat-card>

    <mat-card appearance="outlined" class="card">
      <mat-card-title>
        <p>Popover Example</p>
      </mat-card-title>

      <mat-card-content>
        <div class="popover-wrapper">
          <button
            mat-flat-button
            color="default"
            matTooltip="The content of the Popover."
            matTooltipClass="tooltip-blue"
            matTooltipPosition="above"
          >open popover
          </button>

          <p class="card-text">Hover with a Popover.</p>
        </div>
      </mat-card-content>
    </mat-card>
  </div>

  <div class="cards-wrapper">
    <mat-card appearance="outlined" class="card">
      <mat-card-title>
        <p>Tooltip Directions</p>
      </mat-card-title>

      <mat-card-content class="content">
        <div class="tooltip-directions-content-wrapper">
          <button
            class="tooltip-button"
            mat-flat-button
            color="primary"
            matTooltipPosition="above"
            matTooltip="Info about the action"
          >tooltip on top</button>

          <button
            class="tooltip-button"
            mat-flat-button
            color="primary"
            matTooltipPosition="right"
            matTooltip="Info about the action"
          >tooltip on right</button>

          <button
            class="tooltip-button"
            mat-flat-button
            color="primary"
            matTooltipPosition="below"
            matTooltip="Info about the action"
          >tooltip on bottom</button>

          <button
            class="tooltip-button"
            mat-flat-button
            color="primary"
            matTooltipPosition="left"
            matTooltip="Info about the action"
          >tooltip on left</button>
        </div>
      </mat-card-content>
    </mat-card>

    <mat-card appearance="outlined" class="card">
      <mat-card-title>
        <p>Popover Directions</p>
      </mat-card-title>

      <mat-card-content>
        <div class="popovers-wrapper">
          <div class="popover-wrapper">
            <button
              mat-flat-button
              class="popover-button"
              color="default"
              matTooltip="The content of the Popover."
              matTooltipClass="tooltip-blue"
              matTooltipPosition="above"
            >popover on top
            </button>
          </div>

          <div class="popover-wrapper">
            <button
              mat-flat-button
              color="default"
              class="popover-button"
              matTooltip="The content of the Popover."
              matTooltipClass="tooltip-blue"
              matTooltipPosition="below"
            >popover on bottom
            </button>
          </div>

          <div class="popover-wrapper">
            <button
              mat-flat-button
              color="default"
              class="popover-button"
              matTooltip="The content of the Popover."
              matTooltipClass="tooltip-blue"
              matTooltipPosition="left"
            >popover on left
            </button>
          </div>

          <div class="popover-wrapper">
            <button
              mat-flat-button
              color="default"
              class="popover-button"
              matTooltip="The content of the Popover."
              matTooltipClass="tooltip-blue"
              matTooltipPosition="right"
            >popover on right
            </button>
          </div>
        </div>
      </mat-card-content>
    </mat-card>
  </div>
</div>
