@ussebastian/kitdigital/docs/components/content/tooltip.html

Kit Digital de la Universidad San Sebastián

<section class="w-100">
  <div class="flex gap-80">
    <div class="flex flex-column gap-12">
      <span class="h6">Default tooltip</span>
      <span data-uss-tooltip data-uss-content="Default">
        <i class="uss-icon ri-question-line"></i>
      </span>
    </div>

    <div class="flex flex-column gap-12">
      <span class="h6">Delayed tooltip</span>
      <span
        data-uss-tooltip
        data-uss-content="delayed 500ms to open and 100ms to close"
        data-uss-delay="500, 100"
      >
        <i class="uss-icon ri-question-line"></i>
      </span>
    </div>

    <div class="flex flex-column gap-12">
      <span class="h6">Tooltip with inline HTML</span>
      <span
        data-uss-tooltip
        data-uss-placement="top-start"
        data-uss-content="<span style='color:tomato; font-weight:700; font-size:24px'>HTML with inline styles</span>"
      >
        <i class="uss-icon ri-question-line"></i>
      </span>
    </div>

    <div class="flex flex-column gap-12">
      <span class="h6">Tooltip target-id reference</span>
      <span data-uss-tooltip data-uss-content-target="1" data-uss-placement="bottom">
        <i class="uss-icon ri-question-line"></i
      ></span>
    </div>
  </div>

  <div data-uss-tooltip-content-id="1" class="uss-tooltip">
    <span class="uss-tooltip__content-title">Title content</span>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit.Lorem, ipsum dolor sit amet consectetur
    adipisicing elit.Lorem, ipsum dolor sit amet consectetur adipisicing elit.
  </div>
</section>