TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka luoda Bootstrap 5 -työkaluvihjeitä?

2

Työkaluvihjeet ovat merkkiteksti, joka tulee näkyviin, kun viet hiiren hyperlinkin päälle. Vuonna Bootstrap 5, on olemassa tiettyjä asioita, sinun pitäisi huolehtia ennen kuin yrittää lisätä tooltip. Jos olet huomannut, että aloitusmalli sisältää uuden kolmannen osapuolen JavaScript -kirjaston nimeltä Popper. Tätä käytetään pääasiassa työkaluvinkkikomponenttiin paikannukseen.

Tämä opetusohjelma kattaa seuraavat luvut:

  1. Bootstrap 5 -vinkkejä
  2. Alustetaan työkaluvinkkiä
  3. Työkaluvihjeen käyttäminen ankkuritagin kanssa
  4. Työkaluvihjeiden sijoittelu
  5. Työkaluvihjeen käyttäminen painikkeilla
  6. HTML -sisällön lisääminen työkaluvihjeeseen
  7. Mukautusvaihtoehdot

1 Bootstrap -työkaluvihjeiden perusteet

  • Työkaluvihjeet ovat JavaScript -komponentti, joten sinun tulee sisällyttää bootstrap.min.js -tiedostot HTML -malliin. Vaihtoehtoisesti voit käyttää myös yhdistettyä komentotiedostoa bootstrap.bundle.min.js.
  • Myös työkaluvihjeiden oikeaan sijoittamiseen sinun tulee sisällyttää popper.min.js kaikkiin lähdekoodeihisi.
  • Työkaluvihjeitä ei ladata oletusarvoisesti sivujen lataamisen vuoksi. Siksi se on alustettava pääelementillä sivulle lataamista varten.
  • Skriptitiedostojen järjestyksen tulisi olla popper.min.js, bootstrap.min.js ja sitten alustusskripti.
  • Työkaluvihjeissä ei käytetä kuvia, ja konsepti perustuu Facebook -tyylisiin työkaluvihjeisiin, jotka on luotu Tipsy jQuery -laajennuksella.
  • Työkaluvinkkiä, jonka otsikon pituus on nolla, ei näytetä.
  • Bootstrap käyttää CSS -animaatiota ja dataattribuutteja työkaluvihjeiden käyttäytymisen hallintaan.

2 Työkaluvihjeiden alustaminen Bootstrapissa

Toisin kuin muut Bootstrap -komponentit, työkaluvihjeet on alustettava ennen käyttöä. Voit lisätä yleisen alustuksen kuten alla tai käyttää tiettyä elementtitason alustusta tarvittaessa.

$(function() { $('[data-toggle="tooltip"]').tooltip() })

Alla on koodi työkaluvihjeen aktivoimiseksi ankkurielementtien tasolla.

<script> $("a").tooltip(); </script>

Alla on koodi painikkeen käyttämiseen alustamiseen:

<script> $("button").tooltip(); </script>

Muista, että tämä komentosarjakoodi on lisättävä heti popper.min.js- ja bootstrap.min.js -linkkien jälkeen, jotta työkaluvinkki toimii odotetulla tavalla. Voit tarkistaa aloitusmallin muodon täältä.

3 Työkaluvihjeen käyttäminen ankkuritagiin

Luodaan ensin yksinkertainen työkaluvinkki ankkuritagin avulla. Koodin pitäisi näyttää tältä:

<a href="#" data-toggle="tooltip" data-animation="false" title="This is a tooltip"> Content to Show </a>
  • Sinun tulee käyttää data-toggle-määritettä, jonka arvo on työkaluvihje.
  • Työkaluvihje näyttää syötetyn otsikkotekstin ponnahdusikkunassa, kun viet hiiren.
  • Osan näytettävä sisältö on hyperlinkin kaltainen ankkuriteksti.

Tuloksen pitäisi näyttää hiiren hiiren osoittimen alla olevan selaimen kaltaiselta:

Kuinka luoda Bootstrap 5 -työkaluvihjeitä?

4 Paikannusvinkit

Kuten yllä olevasta esimerkistä näet, työkaluvihje on oletuksena sisällön päällä. Bootstrapin avulla voit sijoittaa ankkuritekstin päälle, vasemmalle, oikealle ja alareunaan data-sijoittelumääritteen avulla.

  • Käytä data-placement = "top" ylintä sijaintia. Tämä on oletusarvo, joten sinun ei tarvitse erikseen mainita.
  • Käytä data-placement = "bottom” alaasentoon.
  • Käytä data-placement = “right” oikeaa asentoa varten.
  • Käytä data-placement = “left” vasenta asentoa.

5 Painikkeiden työkaluvinkit

Luodaan neljä työkaluvinkkiä, joissa on eri paikat painikekomponentille.

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Tooltip on top"> Tooltip on top </button> <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right"> Tooltip on right </button> <button type="button" class="btn btn-warning" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom"> Tooltip on bottom </button> <button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="left" title="Tooltip on left"> Tooltip on left </button>

Tuloksen selaimen pitäisi näyttää tältä:

Kuinka luoda Bootstrap 5 -työkaluvihjeitä?

6 HTML -sisällön käyttäminen työkaluvihjeen sisällä

Työkaluvihje tukee oletuksena vain sisällä olevaa tekstisisältöä. Voit lisätä HTML- tunnisteita data-html = “true” -määritteellä. Alla on esimerkki yliviivatun sisällön lisäämisestä työkaluvihjeeseen HTML ~…~ -tagien avulla.

<a href="#" data-toggle="tooltip" data-html="true" title="<s>This is a strikethrough tooltip</s>"> Content to Show </a>

Kuten näette, otsikkotunnisteen sisältämää sisältöä käsitellään HTML-tunnisteilla, kun data-html = “true” -määritelmä on asetettu. Alla näyttää miltä se näyttää selaimessa:

Kuinka luoda Bootstrap 5 -työkaluvihjeitä?

7 Työkaluvihjeen mukautusvaihtoehdot

Voit muokata työkaluvihjeitä edelleen käyttämällä data- attribuutteja.

  • Poista CSS-häipymistehoste käytöstä lisäämällä data-animation = “false” -attribuutti.
  • Viive näyttää ja piilottaa dataviive-attribuutilla.
  • Siirrä työkaluvihje elementistä data-offsetilla.

Voit katsoa lisää esimerkkejä työkaluvihjeistä Popper JavaScript -sivustosta.

Huomautus: Bootstrap 5 -työkaluvinkit eivät toimi IE8: ssa tai sitä uudemmassa, koska selain ei tue popperia.


Opi Bootstrap 5 (hakemisto )


Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja