Ako vytvoriť tipy na bootstrap 5?

Vytváranie popisov nástrojov Bootstrap 5 je jednoduché pomocou tried nástrojov a funkcií JavaScriptu. Môžete to dosiahnuť takto:

Značka HTML:

1. Pridajte data-bs-toggle="tooltip" atribút prvku, pre ktorý chcete zobraziť popis. Môže to byť tlačidlo, odkaz alebo akýkoľvek iný vhodný prvok.

```html

Príklad popisu

```

Tu je názov popisku určený priamo v rámci označenia prvku. Môžete tiež nastaviť vlastné atribúty údajov, ako napríklad `data-bs-title`, aby ste obsah popisu dynamicky zahrnuli do kódu JavaScript.

Inicializačný skript:

2. Zahrňte balík JavaScript Bootstrap:

```html

```

Tento skript kombinuje Popper a Bootstrap JS, ktoré sú potrebné pre správnu funkčnosť popisku.

Konfigurácia JavaScriptu (voliteľné):

Správanie popisu môžete ďalej prispôsobiť pomocou JavaScriptu. Bootstrap poskytuje triedu `Tooltip` na programovú interakciu s popismi.

```javascript

var tooltipTriggerList =[].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))

var tooltipList =tooltipTriggerList.map(function (tooltipTriggerEl) {

vrátiť nový bootstrap.Tooltip(tooltipTriggerEl)

})

```

Iteráciou cez všetky prvky s atribútom `data-bs-toggle="tooltip"` tento skript inicializuje jednotlivé popisy, čím poskytuje väčšiu kontrolu nad správaním a schopnosť dynamicky spravovať popisy, napr. pri pridávaní nových tlačidiel na stránku.

Teraz, keď umiestnite kurzor myši na prvok s definovaným popisom, uvidíte popis nástroja Bootstrap 5 s poskytnutým obsahom bez ďalších tried CSS alebo štýlu. Automaticky sa umiestňuje vzhľadom na cieľový prvok pomocou inteligentného polohovacieho mechanizmu Bootstrap.

• Predchádzajúca strana: Ako vytvoriť Bootstrap 5 Collapse? 
• Ďalšia strana: Ako vytvoriť pruhy pokroku bootstrap 5?