Çözüldü Tippy.js background-color problemi

21ebu · 2 Haziran 2023

Merhaba, Tippy.js ile tooltip kullanıyorum. CSS'te background-color veya background yaptığımda arka planı değişiyor ama sadece şu küçük kısım kalıyor bir türlü anlamadım bilgisi olan var mı?

Projeye CDN olarakta ekledim npm i tippy.js ile de ekledim.

kaan.w · 4 Haziran 2023

Dökümanlarında nasıl tema oluşturup kullanacağınız, soldaki okun rengini değiştireceğiniz vs. yazıyor. SVG ok için fill, CSS ok için ayrı ayrı border color vermeniz gerektiği belirtilmiş.

Themes

The complete tooltip, popover, dropdown, and menu solution for the web

atomiks.github.io

21ebu · 4 Haziran 2023

kaan.w dedi:
Dökümanlarında nasıl tema oluşturup kullanacağınız, soldaki okun rengini değiştireceğiniz vs. yazıyor. SVG ok için fill, CSS ok için ayrı ayrı border color vermeniz gerektiği belirtilmiş.

Themes

The complete tooltip, popover, dropdown, and menu solution for the web

atomiks.github.io

Teşekkür ederim.

Konuyu daha sonra okuyup anlamayan arkadaşlar için şöyle söyleyeyim:

CSS:

.tippy-box[data-theme~='tippy'][data-placement^='top'] > .tippy-arrow::before {

  border-top-color: #77af8d;

}

.tippy-box[data-theme~='tippy'][data-placement^='bottom'] > .tippy-arrow::before {

  border-bottom-color: #77af8d;

}

.tippy-box[data-theme~='tippy'][data-placement^='left'] > .tippy-arrow::before {

  border-left-color: #77af8d;

}

.tippy-box[data-theme~='tippy'][data-placement^='right'] > .tippy-arrow::before {

  border-right-color: #77af8d;

}

Bu kodlarda 'tippy' yazan yer sizin temanız olacak. Ben varsayılan olarak tüm tooltiplerde kullanmak için tippy'nin kendisini seçtim. data-placement ise sağ, sol, yukarı ve aşağı olarak seçmenizi sağlıyor. .tippy-arrow::before ise o rengini değiştirmek istediğimiz okları seçiyor. Border color ise bildiğiniz border.

Çözüldü Tippy.js background-color problemi

Ayrıntılı düzenleme

21ebu

Hectopat

kaan.w

Themes

kaan.w

Megapat

Themes

21ebu

Hectopat

Themes

Benzer konular

Bu konuyu görüntüleyen kullanıcılar

Technopat Haberler

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz