Ana içeriğe atla
Frutjam logo Frutjam
v2.2.2
Theme

Tooltip Component

CSS-only Tailwind CSS tooltip with top, bottom, left, and right placement. Color variants, no JavaScript required. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

Araç ipucu bileşenleri, kullanıcılar bir öğenin üzerine geldiğinde veya bir öğeye odaklandığında ek bilgiler görüntüler. Anlamsal HTML nitelikleri ve CSS ile oluşturulan araç ipuçları, arayüzü karmaşıklaştırmadan bağlama özel yardım sağlayarak kullanıcı deneyimini geliştirir. Frutjam araç ipucu sistemi, kusursuz bilgi keşfi için birden fazla konumu, özel içeriği ve akıcı animasyonları destekler.

Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.

Not: Araç ipuçları, dokunmatik/mobil cihazlarda bulunmayan :hover ve :focus öğelerini kullanır. Mobil öncelikli düzenler için, duyarlı değişken lg:tooltip'i kullanın, böylece araç ipucu yalnızca masaüstünde (büyük ekranlar ve üstü) etkinleştirilir. Daha küçük ekranlarda, popover veya modal gibi farklı bir açıklama modeli kullanmayı düşünün.

Sınıf Tip Tanım
tooltipTemelFareyle üzerine gelindiğinde/odaklandığında veri ipucu içeriğini gösteren sarmalayıcı
tooltip-contentDeğiştiriciAraç ipucu balonunun içindeki özel HTML içeriği
tooltip-topDeğiştiriciTetikleyicinin üstünde açılır (varsayılan)
tooltip-bottomDeğiştiriciTetikleyicinin altında açılır
tooltip-leftDeğiştiriciTetiğin solunda açılır
tooltip-rightDeğiştiriciTetiğin sağında açılır
tooltip-startDeğiştiriciMantıksal başlangıç ​​tarafına açılır
tooltip-endDeğiştiriciMantıksal son tarafa açılır
tooltip-primaryRenkBirincil tema renk balonu
tooltip-secondaryRenkİkincil tema renk balonu
tooltip-accentRenkVurgu teması renk balonu
tooltip-neutralRenkNötr tema renk balonu
tooltip-infoRenkBilgi anlamsal renk balonu
tooltip-successRenkBaşarı anlamsal renk balonu
tooltip-warningRenkUyarı anlamsal renk balonu
tooltip-errorRenkHata anlamsal renk balonu

İpucu

1
2
3
<div class="tooltip" data-tip="Tooltip">
   <button class="btn">Hover me</button>
</div>

1
2
3
<div className="tooltip" data-tip="Tooltip">
   <button className="btn">Hover me</button>
</div>

Özel Araç İpucu İçeriği

❤️
Like
html 
1
2
3
4
5
6
7
<div class="tooltip tooltip-end">
    <div class="tooltip-content">
        <div class="text-xl">❤️</div>
        <div>Like</div>
    </div>
    <button class="btn">Hover me</button>
</div>

Simgeli Araç İpucu

html 
1
2
3
4
5
6
<div class="tooltip" data-tip="Menu">
    <button class="btn btn-sm">
        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h16"/><path d="M4 12h16"/><path d="M4 19h16"/></svg>
        <span class="sr-only">Menu</span>
    </button>
</div>

İpucunu Açmaya Zorla

html 
1
2
3
<div class="tooltip tooltip-open" data-tip="hello">
  <button class="btn">Force open</button>
</div>

Araç İpucu Konumlandırma Seçenekleri

En İyi Yerleşim

html 
1
2
3
<div class="tooltip tooltip-top tooltip-open" data-tip="Tooltip top">
    <button class="btn">Top position</button>
</div>

Doğru Yerleştirme

html 
1
2
3
<div class="tooltip tooltip-right tooltip-open" data-tip="Tooltip right">
    <button class="btn">Right position</button>
</div>

Yerleşimi Sonlandır

html 
1
2
3
<div class="tooltip tooltip-end tooltip-open" data-tip="Tooltip end">
    <button class="btn">End position</button>
</div>

Alt Yerleştirme

html 
1
2
3
<div class="tooltip tooltip-bottom tooltip-open" data-tip="Tooltip bottom">
    <button class="btn">Bottom position</button>
</div>

Sol Yerleştirme

html 
1
2
3
<div class="tooltip tooltip-left tooltip-open" data-tip="Tooltip left">
    <button class="btn">Left position</button>
</div>

Yerleşimi Başlat

html 
1
2
3
<div class="tooltip tooltip-start tooltip-open" data-tip="Tooltip start">
    <button class="btn">Start position</button>
</div>

Araç İpucu Renk Çeşitleri

Ana Renk

html 
1
2
3
<div class="tooltip tooltip-primary tooltip-open" data-tip="Primary">
  <button class="btn btn-xs">Primary color</button>
</div>

İkincil Renk

html 
1
2
3
<div class="tooltip tooltip-secondary tooltip-open" data-tip="Secondary">
  <button class="btn btn-xs">Secondary color</button>
</div>

Vurgu Rengi

html 
1
2
3
<div class="tooltip tooltip-accent tooltip-open" data-tip="Accent">
  <button class="btn btn-xs">Accent color</button>
</div>

Bilgi Rengi

html 
1
2
3
<div class="tooltip tooltip-info tooltip-open" data-tip="Info">
  <button class="btn btn-xs">Info color</button>
</div>

Başarı Rengi

html 
1
2
3
<div class="tooltip tooltip-success tooltip-open" data-tip="Success">
  <button class="btn btn-xs">Success color</button>
</div>

Uyarı Rengi

html 
1
2
3
<div class="tooltip tooltip-warning tooltip-open" data-tip="Warning">
  <button class="btn btn-xs">Warning color</button>
</div>

Hata Rengi

html 
1
2
3
<div class="tooltip tooltip-error tooltip-open" data-tip="Error">
  <button class="btn btn-xs">Error color</button>
</div>

Nötr Renk

html 
1
2
3
<div class="tooltip tooltip-neutral tooltip-open" data-tip="Neutral">
  <button class="btn btn-xs">Neutral color</button>
</div>

Duyarlı Araç İpuçları

lg:tooltip ile yalnızca büyük ekranlarda göster

html 
1
2
3
<div class="lg:tooltip" data-tip="Hey there!">
  <button class="btn">Hover me</button>
</div>

JS ve Tepki Yardımcısı

Bir araç ipucunu programlı olarak göstermek veya gizlemek için frutjam/js'den createTooltip'i veya frutjam/react'tan useTooltip'i kullanın; rehberli turlar veya tetiklenen yardım metni için kullanışlıdır.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<div class="flex gap-2 mb-4">
  <button class="btn btn-sm" id="tip-show">Show</button>
  <button class="btn btn-sm" id="tip-hide">Hide</button>
  <button class="btn btn-sm" id="tip-toggle">Toggle</button>
</div>
<div class="tooltip" data-tip="Programmatic tooltip" id="js-tooltip">
  <button class="btn">Target</button>
</div>
<script type="module">
  import { createTooltip } from 'frutjam/js'
  const tip = createTooltip(document.getElementById('js-tooltip'))
  document.getElementById('tip-show').onclick = () => tip.show()
  document.getElementById('tip-hide').onclick = () => tip.hide()
  document.getElementById('tip-toggle').onclick = () => tip.toggle()
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import { useTooltip } from 'frutjam/react'

export default function TooltipDemo() {
  const tooltip = useTooltip()
  return (
    <>
      <div className="flex gap-2 mb-4">
        <button className="btn btn-sm" onClick={tooltip.show}>Show</button>
        <button className="btn btn-sm" onClick={tooltip.hide}>Hide</button>
        <button className="btn btn-sm" onClick={tooltip.toggle}>Toggle</button>
      </div>
      <div ref={tooltip.ref} className="tooltip" data-tip="Programmatic tooltip">
        <button className="btn">Target</button>
      </div>
    </>
  )
}