Bootstrap ile Interactive UI Yap! (Tooltip, Toast, Popover)

Bootstrap 5 öğrenmeye devam ediyoruz 🚀 Bu videoda Tooltip, Popover ve Toast bileşenlerini kullanarak daha etkileşimli ve modern UI tasarımları oluşturmayı öğreniyoruz. 👉 Tooltip nedir ve nasıl çalışır? 👉 Hover ile bilgi gösterme sistemi 👉 Popover kullanımı ve popup bilgi kutuları 👉 Toast notification (bildirim sistemi) nasıl yapılır? 💻 Tooltip aktif etmek için kullanılan JavaScript kodu: tooltip script kodu: var tooltipTriggerList = [].slice.call( document.querySelectorAll('[data-bs-toggle="tooltip"]'), ); var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl); }); 💻 popover ı aktif etmek için kullanılan JavaScript kodu: var popoverTriggerList = [].slice.call( document.querySelectorAll('[data-bs-toggle="popover"]'), ); var popoverList = popoverTriggerList.map(function (popoverTriggerEl) { return new bootstrap.Popover(popoverTriggerEl); }); 💻 toast u aktif etmek için kullanılan JavaScript kodu: document.getElementById("toastbtn").onclick = function () { var toastElList = [].slice.call( document.querySelectorAll(".toast") ); var toastList = toastElList.map(function (toastEl) { return new bootstrap.Toast(toastEl); }); toastList.forEach(function(toast) { toast.show(); }); }; 🔔 DESTEK OL Daha fazla gerçek proje ve uygulamalı yazılım dersleri için 👉 kanala abone olabilir 👉 videoyu beğenerek destek olabilirsin 🚀 #bootstrap #bootstrap5 #tooltip #toast #popover #frontend #webtasarım