<template>
  <div class="demo-page">
    <h4>TfTooltip</h4>

    <table class="demo-table">
      <tbody>
        <tr
          v-for="example in examples"
          :key="example.placement"
        >
          <td
            class="demo-label"
            v-text="`${example.action} ${example.placement} ${example.label || ''}`"
          />
          <td>
            <TfTooltip
              :options="{ placement: example.placement }"
              :show-close="example.showClose"
              :trigger="example.trigger"
            >
              WatchTower simplifies the submission <br>
              process by improving transparency, quality, <br>
              efficiency, and communication.<br>
              We give you extra time to focus on what<br>
              you'd rather be doing: Writing business.<br>
              Questions? Why not <TfCtaEmailSupport />?

              <TfButton
                slot="reference"
                type="primary"
                v-text="`${example.action} Me`"
              />
            </TfTooltip>
          </td>
        </tr>
        <tr>
          <td
            class="demo-label"
            v-text="'Click right w/ close'"
          />
          <td>
            <TfTooltip
              :options="{ placement: 'right' }"
              :show-close="showTooltip"
              trigger="clickToOpen"
              @hide="showTooltip = false"
            >
              <p>This is an example of the a tooltip that is only allowed to close on click of the "X" or by clicking on the "reference".</p>
              <p><strong>Requirements:</strong></p>
              <ul>
                <li>add `@click="showTooltip = !showTooltip" to the "reference"</li>
                <li>add `:show-close="showTooltip"` to the "TfTooltip"</li>
                <li>add `@hide="showTooltip = false"` to the "TfTooltip"</li>
              </ul>
              <TfButton
                slot="reference"
                type="primary"
                @click="showTooltip = !showTooltip"
                v-text="'Click Me'"
              />
            </TfTooltip>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  export default {
    name: 'Tooltips2',
    data: () => ({
      examples: [
        {
          action: 'Hover',
          placement: 'top',
        },
        {
          action: 'Click',
          placement: 'bottom',
          trigger: 'clickToOpen',
        },
        {
          action: 'Hover',
          placement: 'left',
        },
      ],
      showTooltip: false,
    }),
  };
</script>

<style scoped>
  .demo-table {
    margin-left: 300px;
  }

  ::v-deep.with-close .tf-popper.tf-tooltip {
    width: 400px;
    padding: 10px 30px 10px 10px;
    text-align: left;
  }
</style>
