<template>
  <layout-header></layout-header>
  <layout-sidebar></layout-sidebar>
  <div class="page-wrapper cardhead">
    <div class="content">
      <!-- Page Header -->
      <div class="page-header">
        <div class="row">
          <div class="col-sm-12">
            <h3 class="page-title">Tooltip</h3>
          </div>
        </div>
      </div>
      <!-- /Page Header -->

      <!-- start row -->
      <div class="row">
        <div class="col-xl-6">
          <div class="card">
            <div class="card-header">
              <h5 class="card-title">Tooltips on links</h5>
            </div>
            <div class="card-body">
              <p>Hover over the links below to see tooltips.</p>
              <p class="muted mb-0">
                Placeholder text to demonstrate some
                <a-tooltip title="Default tooltip" placement="top">
                  <a href="#" class="text-primary">inline links</a>
                </a-tooltip>
                with tooltips. This is now just filler, no killer. Content
                placed here just to mimic the presence of
                <a-tooltip title="Another tooltip" placement="top">
                  <a href="#" class="text-primary">real text</a>
                </a-tooltip>
                . And all that just to give you an idea of how tooltips would
                look when used in real-world situations. So hopefully you've now
                seen how

                <a-tooltip title="Another one here too" placement="top">
                  <a href="#" class="text-primary">these tooltips on links</a>
                </a-tooltip>
                can work in practice, once you use them on
                <a-tooltip title="The last tip!" placement="top">
                  <a href="#" class="text-primary">your own</a>
                </a-tooltip>
                site or project.
              </p>
            </div>
            <!-- end card body -->
          </div>
          <!-- end card -->

          <div class="card">
            <div class="card-header">
              <h5 class="card-title">Disabled Elements</h5>
            </div>
            <div class="card-body">
              <p class="text-muted">
                Elements with the <code>disabled</code> attribute aren’t
                interactive, meaning users cannot focus, hover, or click them to
                trigger a tooltip (or popover). As a workaround, you’ll want to
                trigger the tooltip from a wrapper <code>&lt;div&gt;</code> or
                <code>&lt;span&gt;</code>, ideally made keyboard-focusable using
                <code>tabindex="0"</code>, and override the
                <code>pointer-events</code> on the disabled element.
              </p>
              <div>
                <span class="d-inline-block" tabindex="0">
                  <button
                    class="btn btn-primary pe-none"
                    type="button"
                    disabled
                  >
                    Disabled button
                  </button>
                </span>
              </div>
            </div>
            <!-- end card body -->
          </div>
          <!-- end card -->

          <div class="card">
            <div class="card-header">
              <h5 class="card-title">Hover Elements</h5>
            </div>
            <div class="card-body">
              <p class="text-muted">
                Elements with the <code>disabled</code> attribute aren’t
                interactive, meaning users cannot focus, hover, or click them to
                trigger a tooltip (or popover). As a workaround, you’ll want to
                trigger the tooltip from a wrapper <code>&lt;div&gt;</code> or
                <code>&lt;span&gt;</code>, ideally made keyboard-focusable using
                <code>tabindex="0"</code>, and override the
                <code>pointer-events</code> on the disabled element.
              </p>
              <a-tooltip title="Hover Only, Not a Focus!" placement="top">
                <button class="btn btn-primary" type="button">Hover</button>
              </a-tooltip>
            </div>
            <!-- end card body -->
          </div>
          <!-- end card -->
        </div>
        <!-- end col -->

        <div class="col-xl-6">
          <div class="card">
            <div class="card-header">
              <h5 class="card-title">Directions</h5>
            </div>
            <div class="card-body">
              <p>
                Hover over the buttons below to see the four tooltips
                directions: top, right, bottom, and left.
              </p>
              <div class="d-flex flex-wrap gap-2">
                <a-tooltip title="Tooltip on top" placement="top">
                  <button type="button" class="btn btn-primary">
                    Tooltip on top
                  </button>
                </a-tooltip>
                <a-tooltip title="Tooltip on bottom" placement="bottom">
                  <button type="button" class="btn btn-primary">
                    Tooltip on bottom
                  </button>
                </a-tooltip>
                <a-tooltip title="Tooltip on left" placement="left">
                  <button type="button" class="btn btn-primary">
                    Tooltip on left
                  </button>
                </a-tooltip>
                <a-tooltip title="Tooltip on right" placement="right">
                  <button type="button" class="btn btn-primary">
                    Tooltip on right
                  </button>
                </a-tooltip>
              </div>
            </div>
            <!-- end card body -->
          </div>
          <!-- end card -->

          <div class="card">
            <div class="card-header">
              <h5 class="card-title">HTML Tags</h5>
            </div>
            <div class="card-body">
              <p class="text-muted">And with custom HTML added:</p>
              <a-tooltip placement="top">
                <template #title>
                  <em>Tooltip</em> <u>with</u> <b>HTML</b>
                </template>
                <button type="button" class="btn btn-secondary me-2">
                  Tooltip with HTML
                </button>
              </a-tooltip>
              <a-tooltip placement="right">
                <template #title>
                  <em>Tooltip</em> <u>with</u> <b>HTML</b>
                </template>
                <button
                  type="button"
                  class="btn btn-primary"
                  data-bs-toggle="tooltip"
                  data-bs-trigger="click"
                  data-bs-html="true"
                  data-bs-placement="bottom"
                  title=""
                  data-bs-original-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>"
                >
                  Click Me
                </button>
              </a-tooltip>
            </div>
            <!-- end card body -->
          </div>
          <!-- end card -->

          <div class="card">
            <div class="card-header">
              <h5 class="card-title">Color Tooltips</h5>
            </div>
            <div class="card-body">
              <p class="text-muted">
                We set a custom class with ex.
                <code>data-bs-custom-class="primary-tooltip"</code> to scope our
                background-color primary appearance and use it to override a
                local CSS variable.
              </p>
              <div class="d-flex flex-wrap gap-2">
                <a-tooltip
                  title="Primary Tooltip"
                  placement="top"
                  color="orange"
                >
                  <button
                    type="button"
                    class="btn btn-primary"
                    data-bs-toggle="tooltip"
                    data-bs-placement="top"
                    data-bs-custom-class="tooltip-primary"
                    data-bs-title="This top tooltip is themed via CSS variables."
                  >
                    Primary tooltip
                  </button>
                </a-tooltip>
                <a-tooltip title="Danger Tooltip" placement="top" color="red">
                  <button
                    type="button"
                    class="btn btn-danger"
                    data-bs-toggle="tooltip"
                    data-bs-placement="top"
                    data-bs-custom-class="tooltip-danger"
                    data-bs-title="This top tooltip is themed via CSS variables."
                  >
                    Danger tooltip
                  </button>
                </a-tooltip>
                <a-tooltip title="Info Tooltip" placement="top" color="blue">
                  <button
                    type="button"
                    class="btn btn-info"
                    data-bs-toggle="tooltip"
                    data-bs-placement="top"
                    data-bs-custom-class="tooltip-info"
                    data-bs-title="This top tooltip is themed via CSS variables."
                  >
                    Info tooltip
                  </button>
                </a-tooltip>
                <a-tooltip
                  title="Success Tooltip"
                  placement="top"
                  color="green"
                >
                  <button
                    type="button"
                    class="btn btn-success"
                    data-bs-toggle="tooltip"
                    data-bs-placement="top"
                    data-bs-custom-class="tooltip-success"
                    data-bs-title="This top tooltip is themed via CSS variables."
                  >
                    Success tooltip
                  </button>
                </a-tooltip>
                <a-tooltip
                  title="Secondary Tooltip"
                  placement="top"
                  color="darkblue"
                >
                  <button
                    type="button"
                    class="btn btn-secondary"
                    data-bs-toggle="tooltip"
                    data-bs-placement="top"
                    data-bs-custom-class="tooltip-secondary"
                    data-bs-title="This top tooltip is themed via CSS variables."
                  >
                    Secondary tooltip
                  </button>
                </a-tooltip>
                <a-tooltip
                  title="Warning Tooltip"
                  placement="top"
                  color="yellow"
                >
                  <button
                    type="button"
                    class="btn btn-warning"
                    data-bs-toggle="tooltip"
                    data-bs-placement="top"
                    data-bs-custom-class="tooltip-warning"
                    data-bs-title="This top tooltip is themed via CSS variables."
                  >
                    Warning tooltip
                  </button>
                </a-tooltip>
                <a-tooltip
                  title="Dark Tooltip"
                  placement="top"
                  color="darkblue"
                >
                  <button
                    type="button"
                    class="btn btn-dark"
                    data-bs-toggle="tooltip"
                    data-bs-placement="top"
                    data-bs-custom-class="tooltip-dark"
                    data-bs-title="This top tooltip is themed via CSS variables."
                  >
                    Dark tooltip
                  </button>
                </a-tooltip>
              </div>
            </div>
            <!-- end card body -->
          </div>
          <!-- end card -->
        </div>
        <!-- end col -->
      </div>
      <!-- end row -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
    };
  },
};
</script>
