VIDEO JADI RESPONSIF & TOOLTIP

_{Ditulis Oleh: Alfians Increms April, 2021
Aplikasi: Perkebunan - Pertambangan - HTI - HPH Sistem Integrasi}

MENJADIKAN TAMPILAN VIDEO JADI RESPONSIF & TOOLTIPS

• Skrip Frame tampilan video responsif
• Skrip Tombol dengan Tooltips
• Macam-Macam Navbar

Skrip Frame tampilan video responsif

Skrip Frame tampilan video responsif

Pembahasan ini tentang menampilkan video di halaman Web agar menjadi responsif saat dibuka pada layar yang berukuran berbeda-beda seperti pada layar Handphone android, Ada beberapa skrip yang dapat digunakan dalam hal ini, kembali kepada si pengguna, namun yang perlu digaris bawahi adalah: jika ingin merubah ukuran diluar standar yang ada dibootstrap maka tentu harus memodifikasi skrip bootstrap, tentu hal itu sangat diperbolehkan, jika ingin menggunakan yang standar, maka cukup memanggil classnya saja, adapun skripnya sebagai berikut:

<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>

Silahkan Memasukkan link Video anda, jika meletakkannya di Youtube maka cukup meletakkan link tersebut pada src="...", adapun contohnya sebagai berikut :

Contoh ini menggunakan ukuran 21:9 aspect ratio dan penulis menggunakan bootstrap 4.5, pada saat artikel ini dibuat bootstrap menduduki versi 5.0 Beta :

Semoga dapat memberikan manfaat

Skrip Tombol dengan Tooltips

Skrip Tombol dengan Tooltips

Dalam pembuatan aplikasi terkadang dibutuhkan tombol tooltips (informasi tambahan yang keluar diluar tombol), tentu banyak ditemukan website yang menggunakan metode ini, ada beberapa pilihan skrip tombol dengan tooltips, namun sebelum membahas hal ini ada yang perlu diperhatikan yakni : Bahwa bootstrasp masih menggunakan pihak ke 3 saat menggunakan plugin tooltip, adapun yang harus diketahui sebagai berikut :

• Tooltip mengandalkan Popper perpustakaan pihak ke-3 untuk pemosisian. Anda harus menyertakan popper.min.js sebelum bootstrap.js atau menggunakan bootstrap.bundle.min.js / bootstrap.bundle.js yang berisi Popper agar tooltips berfungsi.
• Tooltips diikut sertakan karena alasan performa, jadi Anda harus memulainya sendiri.
• Keterangan alat dengan judul dengan panjang nol tidak pernah ditampilkan.
• Tentukan penampung: 'body' untuk menghindari masalah rendering di komponen yang lebih kompleks (seperti grup input, grup tombol, dll).
• Tooltips yang memicu pada elemen tersembunyi tidak akan berfungsi.
• Tooltips untuk elemen .disabled atau disabled harus dipicu pada elemen wrapper.
• Saat dipicu dari hyperlink yang menjangkau beberapa baris, keterangan alat akan dipusatkan. Gunakan ruang kosong: nowrap; di <a> Anda untuk menghindari perilaku ini.
• Tooltip harus disembunyikan sebelum elemen yang sesuai telah dihapus dari DOM.
• Tooltips dapat dipicu berkat elemen di dalam shadow DOM.

Jika sudah memahaminya tentu jika syarat diatas tidak dipenuhi maka tooltips tak dapat berfungsi, Adapun contohnya skripnya sebagai berikut :

Skrip dalam penginstalan untuk berfungsinya Tombol dengan Tooltips dibawah ini :

<script>

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)

})

</script>

Tombol dengan Tooltips HTML

<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tombol</em> <u>dengan</u> <b>Tooltips HTML</b>">Tombol dengan Tooltips HTML
	  
</button>

Adapun contohnya sebagai berikut :

Tombol dengan Tooltips HTML

Tombol dengan Tooltips On Bottom

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>

Tooltip Tampil Diatas

Pengguna cukup menganti kata bottom menjadi right atau left pada data-bs-placement atau data-placement untuk merubah posisi tampilan Tooltips, perlu diketahui posisi itu tidak mutlak dikarenakan jika posisi tombol atau link berada dibawah yakni pada batasan halaman web maka automatis akan keatas begitu juga pada kanan dan kiri (menyesuaikan secara auto kondisi letak)

Anda dapat mengunjunginya disini untuk lebih jelas tentang versi bootstrap : "Dalam pemanggilan tooltips pada bootstrap"

Macam-Macam Navbar

Macam-Macam Navbar

Ada beberapa tampilan & fungsi navbar pada Bootstrap kita hanya memanggil classnya saja jika ingin membutuhkannya sesuai keinginan, adapun contohnya seperti dibawah ini :