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

Kit Digital de la Universidad San Sebastián

<div class="p-80 d-flex flex-column gap-32 align-items-start">
  <i
    class="uss-icon ri-information-line ri-xl uss-alert-message__icon"
    data-uss-tooltip-content="Lorem ipsum dolor sit amet"
  ></i>
  <button
    data-uss-tooltip-content="Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa,"
    data-uss-tooltip-delay="100"
    data-uss-tooltip-placement="left-start"
    class="uss-btn uss-btn--primary"
  >
    Boton con tooltip
  </button>

  <button data-uss-tooltip-content-element-id="tooltip_id_1" class="uss-btn uss-btn--primary">
    Boton con tooltip
  </button>

  <div data-uss-tooltip-content-id="tooltip_id_1">
    <span class="uss-tooltip__title">Título</span>
    <span>Bajada</span>
  </div>

  <button
    data-uss-tooltip-content-element-id="tooltip_id_2"
    data-uss-tooltip-auto-placement="true"
    class="uss-btn uss-btn--primary"
  >
    Boton con tooltip
  </button>

  <div data-uss-tooltip-content-id="tooltip_id_2">
    <h4>Título 2</h4>
    <strong>Bajada 2</strong>
  </div>

  <script>
    // every button had an alert on click
    document.querySelectorAll('button').forEach((button) => {
      button.addEventListener('click', () => {
        console.log('clicked');
      });
    });
  </script>
</div>