Diskusia – 24. diel - Bootstrap - Popovers

Späť

Upozorňujeme, že diskusie pod našimi online kurzami sú nemoderované a primárne slúžia na získavanie spätnej väzby pre budúce vylepšenie kurzov. Pre študentov našich rekvalifikačných kurzov ponúkame možnosť priameho kontaktu s lektormi a študijným referentom pre osobné konzultácie a podporu v rámci ich štúdia. Toto je exkluzívna služba, ktorá zaisťuje kvalitnú a cielenú pomoc v prípade akýchkoľvek otázok alebo projektov.

Komentáre

Posledné komentáre sú na spodnej časti poslednej stránky.

LBelka

Člen

LBelka:10.6.2022 8:44

Prosím nešlo by sem přidat ukázku včetně JavaScriptu, jedu podle kurzu a ty JS části jsou zde dost napřed a počítá se s tím, že všichni vědí kam a jak je zapsat.

Odpovedať

Jiří Pokorný

Člen

Jiří Pokorný:4.4.2023 11:56

Prosím o sdělení, zda v současné době náhodou Boostrap nemá problém s funkčností popovers, jelikož ani podle návodu na stránkách getbootstrap.com i po překopírování skriptů nefungují. Děkuji.

Odpovedať

Jiří Pokorný

Člen

Jiří Pokorný:5.4.2023 8:39

Už jsem na to přišel. Totiž explicitní inicializace JavaScriptem musí být vložena až za odkazy na Bootstrapové scripty, čili až na úplný konec <body>.

Odpovedať

Patrik Hlaváč

Člen

Patrik Hlaváč:20.9.2023 13:53

Díky, velká pomoc

Odpovedať

Benjamin Phan

Člen

Benjamin Phan:20.9.2023 15:01

Ty inicializace tu nikdy nejsou ukázaný, člověk může jen hádat kam se mají psát. Vůbec v prvních lekcích Bootstrapu vůbec není ukázáno, jak ho inicializovat.

Odpovedať

Lukáš Raška

Člen

Lukáš Raška:3.10.2023 20:17

Ono se řekne, "popover" si inicializujte ručně. Ale když člověk tím JavaScriptem zase tolik nevládne, má smůlu. :-)

Pokud by měl někdo stejný problém, nakonec se mi to rozeběhlo pomocí tohoto:

<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})
</script>

Zdroj: https://www.w3schools.com/…_popover.php

Odpovedať

Lukáš Varga

Člen

Lukáš Varga:13.12.2023 17:13

Malo informacii, ako postupovat hlavne s inicializaciou JS, funkcie popoveru nefunguju ani po skopirovani kodu z clanku. Atributy sa lisia od tych, ktore ma BS na svojich strankach (viz data-toggle ---> data-bs-toggle). Nikde nebolo specifikovane, ako napojit script Popper.js, az po zhliadnuti niekolkych videii na YT. Chcelo by to viac zapracovat na detailoch, pre zaciatocnika je to pomerne narocne a frustrujuce.

Odpovedať

Natálie Růžičková

Tvůrce

Natálie Růžičková:14.12.2023 9:26

Díky za tvou reakci Lukáši, právě pracujeme na aktualizaci a vylepšení kurzu 👍

Odpovedať

Karel Zaoral

Člen

Karel Zaoral:2.2.2024 14:09

Děkujeme za vaše podněty. Lekci jsme aktualizovali :-)

Odpovedať

Martin Horázný

Člen

Martin Horázný:17.5.2024 9:50

Ahoj
V prvním ukázkovém skriptu popoverů (Použití popoverů v praxi) je uvedena u všech tlačítek barva btn-secondary, ale na živém příkladu jsou tlačítka barevná:
Mělo by to být takto:

<button type="button" class="btn btn-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Text nahoře">
    Popover nahoře
  </button>
  <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Text vpravo">
    Popover vpravo
  </button>
  <button type="button" class="btn btn-success" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Text dole">
    Popover dole
  </button>
  <button type="button" class="btn btn-danger" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Text vlevo">
    Popover vlevo
  </button>

Editované

Odpovedať

Posledné komentáre sú na spodnej časti poslednej stránky.

Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zobrazené 10 správy z 13.

Najčastejšie vyhľadávané

Diskusia – 24. diel - Bootstrap - Popovers