Tooltip - React

Tooltip

ReactVueJS + CSS

Struktur HTML

Copy

<div class="ina-tooltip ina-tooltip--placement-top">
  <button type="button">Hover me</button>
  <div class="ina-tooltip__content">
    <div class="ina-tooltip__bubble">Penjelasan tooltip</div>
  </div>
</div>

Contoh Penggunaan

Contoh 1 - Tooltip Sederhana

Preview Code

Hover me

Penjelasan tooltip

Long text

Tooltip dengan teks yang lebih panjang didalamnya

Copy

<div
  style="width: 100%; display: flex; align-items: center; justify-content: center; gap: 16px; flex-direction: column;"
>
  <div class="ina-tooltip ina-tooltip--placement-top">
    <button
      type="button"
      class="ina-tooltip__trigger ina-button ina-button--secondary ina-button--sm"
    >
      <span>Hover me</span>
    </button>
    <div class="ina-tooltip__content ina-tooltip__content--show-arrow">
      <div class="ina-tooltip__bubble">
        <span>Penjelasan tooltip</span>
      </div>
    </div>
  </div>

  <div class="ina-tooltip ina-tooltip--placement-top">
    <button
      type="button"
      class="ina-tooltip__trigger ina-button ina-button--secondary ina-button--sm"
    >
      <span>Long text</span>
    </button>
    <div class="ina-tooltip__content ina-tooltip__content--show-arrow">
      <div class="ina-tooltip__bubble">
        <span>Tooltip dengan teks yang lebih panjang didalamnya</span>
      </div>
    </div>
  </div>
</div>

Contoh 2 - Tooltip dengan Media

Preview Code

Hover untuk melihat tooltip media

Penjelasan tooltip

Tooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand the meaning, function or alt-text of an element.

Copy

<div style="width: 100%; display: flex; align-items: center; justify-content: center;">
  <div class="ina-tooltip ina-tooltip--placement-top">
    <button
      type="button"
      class="ina-tooltip__trigger ina-button ina-button--secondary ina-button--sm"
    >
      <span>Hover untuk melihat tooltip media</span>
    </button>
    <div class="ina-tooltip__content ina-tooltip__content--show-arrow ina-tooltip--variant-media">
      <div class="ina-tooltip__card ina-tooltip__card--media">
        <div class="ina-tooltip__image">
          <img src={contohMediaImage} width="320" height="200" alt="Tooltip media" />
        </div>
        <div class="ina-tooltip__content-section">
          <p class="ina-tooltip__title">Penjelasan tooltip</p>
          <p class="ina-tooltip__description">
            Tooltips are used to describe or identify an element. In most scenarios, tooltips help
            the user understand the meaning, function or alt-text of an element.
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

Contoh 3 - Tooltip dengan Variasi Posisi

Preview Code

Top

Penjelasan tooltip

Bottom

Penjelasan tooltip

Left

Penjelasan tooltip

Right

Penjelasan tooltip

Copy

<div
  style="width: 100%; display: flex; align-items: center; justify-content: center; gap: 16px; flex-direction: column;"
>
  <!-- Tooltip Top -->
  <div class="ina-tooltip ina-tooltip--placement-top">
    <button
      type="button"
      class="ina-tooltip__trigger ina-button ina-button--secondary ina-button--sm"
    >
      <span>Top</span>
    </button>
    <div class="ina-tooltip__content ina-tooltip__content--show-arrow">
      <div class="ina-tooltip__bubble">
        <span>Penjelasan tooltip</span>
      </div>
    </div>
  </div>

  <!-- Tooltip Bottom -->
  <div class="ina-tooltip ina-tooltip--placement-bottom">
    <button
      type="button"
      class="ina-tooltip__trigger ina-button ina-button--secondary ina-button--sm"
    >
      <span>Bottom</span>
    </button>
    <div class="ina-tooltip__content ina-tooltip__content--show-arrow">
      <div class="ina-tooltip__bubble">
        <span>Penjelasan tooltip</span>
      </div>
    </div>
  </div>

  <!-- Tooltip Left -->
  <div class="ina-tooltip ina-tooltip--placement-left">
    <button
      type="button"
      class="ina-tooltip__trigger ina-button ina-button--secondary ina-button--sm"
    >
      <span>Left</span>
    </button>
    <div class="ina-tooltip__content ina-tooltip__content--show-arrow">
      <div class="ina-tooltip__bubble">
        <span>Penjelasan tooltip</span>
      </div>
    </div>
  </div>

  <!-- Tooltip Right -->
  <div class="ina-tooltip ina-tooltip--placement-right">
    <button
      type="button"
      class="ina-tooltip__trigger ina-button ina-button--secondary ina-button--sm"
    >
      <span>Right</span>
    </button>
    <div class="ina-tooltip__content ina-tooltip__content--show-arrow">
      <div class="ina-tooltip__bubble">
        <span>Penjelasan tooltip</span>
      </div>
    </div>
  </div>
</div>

Di halaman ini

• Struktur HTML
• Contoh Penggunaan