Tooltips & Popovers - AK Design System

Kullanim Mantigi

Tooltip kisa ve etkilesimsiz ipuclari icindir. Popover ise yapili icerik, birden fazla satir veya aksiyon gerektiginde daha uygundur.

Tooltip Ne Zaman Uygun

Ikonlar icin kisa etiketler

Kontroller icin tek satirlik aciklamalar

Hover ve klavye odagi ipuclari

Popover Ne Zaman Uygun

Cok satirli aciklamalar

Baslik, footer ve gruplanmis icerik

Modal acmadan hizli aksiyonlar

Framework Sozlesmesi

Tooltip Siniflari

.ak-tooltip-trigger goreli konumlama baglamini olusturur.

.ak-tooltip-content kayan ipucu katmanidir.

.ak-tooltip-right, .ak-tooltip-bottom, .ak-tooltip-left yonu degistirir.

Yon sinifi verilmezse varsayilan konum ust taraftir.

<button type="button" class="ak-tooltip-trigger ak-btn">
  Kaydet
  <span class="ak-tooltip-content" role="tooltip">Taslagi kaydeder</span>
</button>

Popover Siniflari

.ak-popover-trigger konumlama baglamini olusturur.

.ak-popover-content kayan paneldir.

.ak-popover-header, .ak-popover-body, .ak-popover-footer icerigi yapilandirir.

.ak-popover-sm, .ak-popover-lg, .ak-popover-interactive davranisi genisletir.

<div tabindex="0" role="button"
  class="ak-popover-trigger ak-popover-right ak-btn ak-btn-outline">
  Daha Fazla
  <div class="ak-popover-content">
    <div class="ak-popover-header">Hizli Aksiyonlar</div>
    <div class="ak-popover-body">Yapili aciklama veya aksiyonlar.</div>
  </div>
</div>

Tooltip Konumlari

Dort yerlestirme sinifi da framework icinde hazir. Varsayilan tooltip tetikleyicinin ustunde acilir.

<button type="button" class="ak-tooltip-trigger ak-btn">...</button>
<button type="button" class="ak-tooltip-trigger ak-tooltip-right ak-btn ak-btn-outline">...</button>
<button type="button" class="ak-tooltip-trigger ak-tooltip-bottom ak-btn ak-btn-secondary">...</button>
<button type="button" class="ak-tooltip-trigger ak-tooltip-left ak-btn ak-btn-ghost">...</button>

Tooltip Kaliplari

Ikon Aksiyonlari

Gorunur etiketin gereksiz kalabalik yarattigi ikon butonlari icin onerilir.

<button type="button" class="ak-tooltip-trigger ak-btn ak-btn-square" aria-label="Ogeyi duzenle">
  <i data-lucide="pencil" class="ak-w-4 ak-h-4"></i>
  <span class="ak-tooltip-content" role="tooltip">Ogeyi duzenle</span>
</button>

Satir Ici Yardim

Bir alan yalnizca tek ve kisa bir aciklama istiyorsa, tum yardim paneli yerine bunu kullanin.

API Token

Bu token gizli tutulmalidir.

<div class="ak-flex ak-items-center ak-gap-3">
  <input type="text" class="ak-input">
  <button type="button" class="ak-tooltip-trigger ak-btn ak-btn-square ak-btn-ghost">
    <i data-lucide="info" class="ak-w-4 ak-h-4"></i>
    <span class="ak-tooltip-content" role="tooltip">Sunucu ile sunucu arasindaki isteklerde kullanilir</span>
  </button>
</div>

Popovers

Konumlar & Boyutlar

Icerik hiyerarsi, birden fazla satir veya daha belirgin bir kap gerektiriyorsa popover tercih edin.

Varsayilan Popover

Ust Konum

Basit tooltipten daha zengin ama hala hafif kalan yapili aciklamalar icin uygundur.

Kucuk Sag

Kompakt durum mesaji.

Buyuk Alt

Yayin Kontrol Listesi

Popover, tooltipten daha yogun icerik tasiyabilir ve yine de modal kadar agir hissettirmez.

<div tabindex="0" role="button" class="ak-popover-trigger ak-popover-bottom ak-popover-lg ak-btn ak-btn-secondary">
  Buyuk Alt
  <div class="ak-popover-content">
    <div class="ak-popover-header">Yayin Kontrol Listesi</div>
    <div class="ak-popover-body">Popover icerigi birden fazla satira yayilabilir.</div>
  </div>
</div>

Etkilesimli Popover

Yalnizca kayan panelin icinde tiklanabilir kontroller varsa .ak-popover-interactive kullanin.

Hizli Aksiyonlar

Takim Erisimi

Editor davet edin, inceleme baglantisi kopyalayin veya gorunurlugu degistirin; ekrandan ayrilmaniz gerekmez.

<div tabindex="0" role="button"
  class="ak-popover-trigger ak-popover-interactive ak-popover-right ak-btn ak-btn-outline">
  Hizli Aksiyonlar
  <div class="ak-popover-content">
    <div class="ak-popover-header">Takim Erisimi</div>
    <div class="ak-popover-body">Editor davet edin veya inceleme baglantisini kopyalayin.</div>
    <div class="ak-popover-footer">
      <button type="button" class="ak-btn ak-btn-sm ak-btn-ghost">Sonra</button>
      <button type="button" class="ak-btn ak-btn-sm ak-btn-primary">Davet Et</button>
    </div>
  </div>
</div>