NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze – Lekce 24 - Bootstrap - Popovers

Zpět

Upozorňujeme, že diskuze pod našimi online kurzy jsou nemoderované a primárně slouží k získávání zpětné vazby pro budoucí vylepšení kurzů. Pro studenty našich rekvalifikačních kurzů nabízíme možnost přímého kontaktu s lektory a studijním referentem pro osobní konzultace a podporu v rámci jejich studia. Toto je exkluzivní služba, která zajišťuje kvalitní a cílenou pomoc v případě jakýchkoli dotazů nebo projektů.

Komentáře
Avatar
LBelka
Člen
Avatar
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.

 
Odpovědět
10.6.2022 8:44
Avatar
Jiří Pokorný
Člen
Avatar
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.

 
Odpovědět
4.4.2023 11:56
Avatar
Jiří Pokorný
Člen
Avatar
Odpovídá na Jiří Pokorný
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>.

 
Odpovědět
5.4.2023 8:39
Avatar
Patrik Hlaváč
Člen
Avatar
Odpovídá na Jiří Pokorný
Patrik Hlaváč:20.9.2023 13:53

Díky, velká pomoc

 
Odpovědět
20.9.2023 13:53
Avatar
Benjamin Phan
Člen
Avatar
Odpovídá na Jiří Pokorný
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.

 
Odpovědět
20.9.2023 15:01
Avatar
Lukáš Raška
Člen
Avatar
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

 
Odpovědět
3.10.2023 20:17
Avatar
Lukáš Varga
Člen
Avatar
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.

 
Odpovědět
13.12.2023 17:13
Avatar
Natálie Růžičková
Tvůrce
Avatar
Odpovídá na Lukáš Varga
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 👍

 
Odpovědět
14.12.2023 9:26
Avatar
Karel Zaoral
Člen
Avatar
Karel Zaoral:2.2.2024 14:09

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

 
Odpovědět
2.2.2024 14:09
Avatar
Martin Horázný
Člen
Avatar
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>
Editováno 17.5.2024 9:51
 
Odpovědět
17.5.2024 9:50
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 13.