Bootstrap JS Tooltip
JS Nutswenk
Die Nutswenk is 'n klein opspringblokkie wat verskyn wanneer die gebruiker die muiswyser oor 'n element beweeg.
Vir 'n tutoriaal oor Tooltips, lees ons Bootstrap Tooltip Tutoriaal .
Via data-* Kenmerke
Die data-toggle="tooltip"aktiveer die nutswenk.
Die titlekenmerk spesifiseer die teks wat in die nutswenk vertoon moet word.
Voorbeeld
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
Via JavaScript
Tooltips is nie CSS-net-inproppe nie, en moet dus geïnisialiseer word met jQuery: kies die gespesifiseerde element en roep die tooltip()metode.
Voorbeeld
// Select all
elements with data-toggle="tooltips" in the document
$('[data-toggle="tooltip"]').tooltip();
// Select a specified
element
$('#myTooltip').tooltip();
Nutswenk-opsies
Opsies kan deur data-kenmerke of JavaScript deurgegee word. Vir data-kenmerke, voeg die opsienaam by data-, soos in data-plasing="".
| Name | Type | Default | Description | Try it |
|---|---|---|---|---|
| animation | boolean | true |
Specifies whether to add a CSS fade transition effect when showing and hiding the tooltip
|
|
| container | string, or the boolean false | false | Appends the tooltip to a specific element. Example: container: 'body' |
|
| delay | number, or object | 0 | Specifies the number of milliseconds it will take to show and hide the tooltip. To specify a delay for showing and another one for hiding, use the object structure: delay: {show: 500, hide: 100} - which will take 500 ms to show the tooltip, but only 100 ms to hide it |
|
| html | boolean | false | Specifies whether to accept HTML tags in the tooltip:
When set to false (default), jQuery's text() method will be used. Use this if you are worried about XSS attacks |
|
| placement | string | "top" | Specifies the tooltip position. Possible values:
|
|
| selector | string, or the boolean false | false | Adds the tooltip to a specified selector | |
| template | string | Base HTML to use when creating the tooltip. The tooltip's title will be inserted into the element having the class .tooltip-inner and the element with the class .tooltip-arrow will become the tooltip's arrow. The outermost wrapper element should have the .tooltip class. |
||
| title | string | "" | Specifies the text that should be displayed inside the tooltip | |
| trigger | string | "hover focus" | Specifies how the tooltip is triggered. Possible values:
|
|
| offset | number or a string | 0 | Offset of the tooltip relative to its target | |
| fallbackPlacement | string or an aray | "flip" | Specifies which position Popper wil use on fallback | |
| boundary | string or element | "scrollParent" | Overflow constraint boundary of the tooltip. Accepts the values "viewport", "window" or "scrollParent", or an HTML element |
Tooltip-metodes
Die volgende tabel lys alle beskikbare nutswenkmetodes.
| Method | Description | Try it |
|---|---|---|
| .tooltip(options) | Activates the tooltip with an option. See options above for valid values | |
| .tooltip("show") | Shows the tooltip | |
| .tooltip("hide") | Hides the tooltip | |
| .tooltip("toggle") | Toggles the tooltip | |
| .tooltip("dispose") | Hides and destroys the tooltip |
Nutswenk-geleenthede
Die volgende tabel lys alle beskikbare nutswenk-gebeure.
| Event | Description | Try it |
|---|---|---|
| show.bs.tooltip | Occurs when the tooltip is about to be shown | |
| shown.bs.tooltip | Occurs when the tooltip is fully shown (after CSS transitions have completed) | |
| hide.bs.tooltip | Occurs when the tooltip is about to be hidden | |
| hidden.bs.tooltip | Occurs when the tooltip is fully hidden (after CSS transitions have completed) |