Bootstrap JS İpucu
JS Araç İpucu
Araç İpucu, kullanıcı fare imlecini bir öğenin üzerine getirdiğinde görünen küçük bir açılır kutudur.
Araç İpuçları hakkında bir eğitim için Bootstrap Araç İpucu Eğitimimizi okuyun .
Veri-* Öznitelikler aracılığıyla
Araç data-toggle="tooltip"
ipucunu etkinleştirir.
Nitelik title
, araç ipucu içinde görüntülenmesi gereken metni belirtir.
Örnek
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
JavaScript aracılığıyla
Araç ipuçları yalnızca CSS eklentileri değildir ve bu nedenle jQuery ile başlatılmalıdır: belirtilen öğeyi seçin ve tooltip()
yöntemi çağırın.
Örnek
// Select all
elements with data-toggle="tooltips" in the document
$('[data-toggle="tooltip"]').tooltip();
// Select a specified
element
$('#myTooltip').tooltip();
Araç İpucu Seçenekleri
Seçenekler, veri öznitelikleri veya JavaScript aracılığıyla iletilebilir. Veri öznitelikleri için, data-placement="" gibi seçenek adını data-'ya ekleyin.
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 |
Araç İpucu Yöntemleri
Aşağıdaki tablo, mevcut tüm araç ipucu yöntemlerini listeler.
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 |
Araç İpucu Etkinlikleri
Aşağıdaki tablo, mevcut tüm araç ipucu olaylarını listeler.
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) |