TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur man skapar Bootstrap 5 verktygstips?

3

Verktygstips är en bit markörtext som visas när du för musen över en hyperlänk. I Bootstrap 5 finns det vissa saker du bör ta vara på innan du försöker lägga till verktygstips. Om du har märkt att startmallen innehåller ett nytt JavaScript -bibliotek från tredje part som heter Popper. Detta används främst för verktygstipskomponenten för positionering.

Denna handledning täcker följande kapitel:

  1. Grunderna i Bootstrap 5 verktygstips
  2. Initierar verktygstips
  3. Använda verktygstips med ankartagg
  4. Placering av verktygstips
  5. Använd verktygstips med knappar
  6. Lägga till HTML -innehåll i verktygstipset
  7. Anpassa alternativ

1 Grunderna i Bootstrap Tooltips

  • Verktygstips är JavaScript -komponent, därför bör du inkludera bootstrap.min.js -filer i din HTML -mall. Alternativt kan du också använda den kombinerade skriptfilen bootstrap.bundle.min.js.
  • Även för korrekt placering av verktygstips bör du inkludera popper.min.js på all din källkod.
  • Verktygstips laddas inte som standard på grund av sidläsningens prestanda. Därför måste initialiseras med det överordnade elementet för att ladda på sidan.
  • Sekvensen av skriptfiler ska vara popper.min.js, bootstrap.min.js och sedan initialiseringsskriptet.
  • Det finns inga bilder som används i verktygstips och konceptet är baserat på verktygstips i Facebook -stil som skapats med Tipsy jQuery -plugin.
  • Verktygstips med noll titellängd visas inte.
  • Bootstrap använder CSS -animeringar och dataattribut för att styra verktygstipsens beteende.

2 Initiera verktygstips i Bootstrap

Till skillnad från andra Bootstrap -komponenter måste verktygstips initieras före användning. Du kan lägga till global initialisering som nedan eller använda specifik elementnivåinitialisering om det behövs.

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

Nedan finns koden för aktivering av verktygstips på ankarelementnivå.

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

Nedan finns koden för att använda knappen för att initiera:

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

Kom ihåg att denna skriptkod ska läggas till direkt efter länkarna popper.min.js och bootstrap.min.js för att verktygstipset ska fungera som förväntat. Du kan kontrollera startmallformatet här.

3 Använda verktygstips på ankartagg

Låt oss först skapa ett enkelt verktygstips med ankartagg. Koden ska se ut nedan:

<a href="#" data-toggle="tooltip" data-animation="false" title="This is a tooltip"> Content to Show </a>
  • Du bör använda data-toggle-attributet med värdet som verktygstips.
  • Verktygstips visar den inmatade titeltexten i popup -fönstret när du svävar.
  • Innehållet för att visa delen är ankartexten som liknar en hyperlänk.

Resultatet ska se ut nedan i webbläsaren när du håller muspekaren:

Hur man skapar Bootstrap 5 verktygstips?

4 Verktygstips för positionering

Som du ser i exemplet ovan kommer verktygstipset som standard att placeras ovanpå innehållet. Bootstrap låter dig placera på toppen, vänster, höger och botten av ankartexten med hjälp av dataplaceringsattribut.

  • Använd data-placement = "top" för topposition. Detta är standard så att du inte behöver uttryckligen nämna det.
  • Använd data-placering = "botten” för bottenposition.
  • Använd data-placering = “rätt” för rätt position.
  • Använd data-placering = “vänster” för vänster position.

5 Verktygstips på knappar

Låt oss skapa fyra verktygstips med olika positioner på knappkomponenten.

<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>

Resultatet i webbläsaren ska se ut nedan:

Hur man skapar Bootstrap 5 verktygstips?

6 Använda HTML -innehåll i verktygstipset

Som standard stöder verktygstipset endast textinnehållet inuti. Du kan lägga till HTML- taggar med attributet data-html = “true”. Nedan följer ett exempel på hur du lägger till genomtänkt innehåll i verktygstipset med hjälp av HTML ~…~ -taggar.

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

Som du kan se bearbetas innehållet i titeltaggen med HTML-taggar när attributet data-html = “true” är inställt. Nedan är hur det kommer att se ut i webbläsaren:

Hur man skapar Bootstrap 5 verktygstips?

7 Verktygstips Anpassningsalternativ

Du kan anpassa verktygstipsen ytterligare med hjälp av "data-" attribut.

  • Inaktivera CSS-blekningseffekt genom att lägga till data-animation = “false” -attribut.
  • Fördröj visa och dölj med attributet data-delay.
  • Offset verktygstipset från elementet med hjälp av data-offset.

Du kan referera till fler verktygstips från Popper JavaScript -webbplats.

Obs! Verktygstips för Bootstrap 5 fungerar inte på IE8 eller lägre eftersom webbläsaren inte stöder popper.


Lär dig Bootstrap 5 (Index )


Inspelningskälla: webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer