Tooltips

Têgihiştinî

Tiştên ku divê hûn zanibin dema ku pêveka tooltip bikar tînin:

• Serişteyên amûran ji bo pozîsyonê xwe dispêrin pirtûkxaneya partiya sêyemîn Popper . Pêdivî ye ku hûn popper.min.js berî bootstrap.js, an yeka bootstrap.bundle.min.jsku Popper heye bikar bînin.
• Serişteyên amûran ji ber sedemên performansê têne hilbijartin, ji ber vê yekê divê hûn bi xwe wan dest pê bikin .
• Sernavên amûran ên bi sernavên zero-dirêj qet nayên xuyang kirin.
• Diyar container: 'body'bikin ku hûn di hêmanên tevlihevtir de (mîna komên têketina me, komên bişkokê, hwd) pirsgirêkan çênekin.
• Teqandina şîretên amûran li ser hêmanên veşartî dê nexebite.
• Pêdivî ye ku şîretên amûran ji bo .disabledan disabledhêmanan li ser hêmanek pêçandî werin xebitandin.
• Dema ku ji hyperlînkên ku pir rêzan vedigirin, şîretên amûran dê bêne navend kirin. white-space: nowrap;Li ser s-ya xwe bikar bînin <a>ku ji vê tevgerê dûr bixin.
• Berî ku hêmanên wan ên têkildar ji DOM-ê werin rakirin divê şîretên amûran werin veşartin.
• Serişteyên amûran dikarin bi saya hêmanek di hundurê DOM-a siya de werin desteser kirin.

Hemî got? Baş e, em bibînin ka ew bi çend mînakan çawa dixebitin.

Examples

Serişteyên amûran çalak bike

Wekî ku li jor behs kir, divê hûn şîretên amûran bidin destpêkirin berî ku ew werin bikar anîn. Yek rê ji bo destpêkirina hemî serişteyên amûran li ser rûpelek dê ev be ku hûn wan li gorî taybetmendiya xwe data-bs-togglehilbijêrin, mîna:

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

Serişteyên amûran li ser girêdan

Li ser zencîreyên jêrîn bihêlin ku hûn serişteyên amûran bibînin:

<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.
</p>

Pêşniyarên amûran ên xweser

Hûn dikarin bi karanîna guhêrbarên CSS -ê xuyangê serişteyên amûran xweş bikin . Me çînek xwerû pê re saz kir data-bs-custom-class="custom-tooltip"da ku xuyangê xweya xwerû berfireh bike û wê bikar bîne da ku guhêrbarek CSS ya herêmî bişopîne.

.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-custom-class="custom-tooltip"
        data-bs-title="This top tooltip is themed via CSS variables.">
  Custom tooltip
</button>

Tarîfa bikaranînê

Li ser bişkokên li jêr bigerin da ku çar rêwerzên amûran bibînin: jor, rast, jêr û çep. Dema ku Bootstrap-ê di RTL-ê de bikar tînin rêwerz têne xuyang kirin.

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

Û bi HTML-ya xwerû lê zêde kirin:

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

Bi SVG:

CSS

Variables

Wekî beşek ji nêzîkatiya guhêrbarên CSS-ê yên pêşveçûyî yên Bootstrap, şîretên amûran naha guhêrbarên CSS-ê yên herêmî li ser .tooltipji bo xwerûkirina rast-dema pêşkeftî bikar tînin. Nirxên ji bo guhêrbarên CSS bi Sass ve têne danîn, ji ber vê yekê xwerûkirina Sass hîn jî piştgirî ye.

  --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
  --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
  --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
  --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
  --#{$prefix}tooltip-margin: #{$tooltip-margin};
  @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
  --#{$prefix}tooltip-color: #{$tooltip-color};
  --#{$prefix}tooltip-bg: #{$tooltip-bg};
  --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
  --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
  --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
  --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
  

Guherbarên Sass

$tooltip-font-size:                 $font-size-sm;
$tooltip-max-width:                 200px;
$tooltip-color:                     $white;
$tooltip-bg:                        $black;
$tooltip-border-radius:             $border-radius;
$tooltip-opacity:                   .9;
$tooltip-padding-y:                 $spacer * .25;
$tooltip-padding-x:                 $spacer * .5;
$tooltip-margin:                    null; // TODO: remove this in v6

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
// fusv-disable
$tooltip-arrow-color:               null; // Deprecated in Bootstrap 5.2.0 for CSS variables
// fusv-enable

Bikaranîna

Pêveka tooltip li gorî daxwazê ​​naverok û nîşankirinê çêdike, û ji hêla xwerû ve şîretên amûran li dû hêmana wan a tîrêjê bi cîh dike.

Serişteya amûrê bi JavaScriptê vekin:

const exampleEl = document.getElementById('example')
const tooltip = new bootstrap.Tooltip(exampleEl, options)

const tooltip = new bootstrap.Tooltip('#example', {
  boundary: document.body // or document.querySelector('#boundary')
})

Markup

Nîşana pêdivî ya ji bo serişteyek amûrek tenê datataybetmendiyek e û titleli ser hêmana HTML-ê hûn dixwazin şîreta amûrekê hebe. Nîşana hilberandî ya amûrek pir hêsan e, her çend ew pozîsyonek hewce dike (ji hêla xwerû, ji tophêla pêvekê ve hatî saz kirin).

<!-- HTML to write -->
<a href="#" data-bs-toggle="tooltip" data-bs-title="Some tooltip text!">Hover over me</a>

<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
    Some tooltip text!
  </div>
</div>

hêmanên astengdar

Hêmanên bi disabledtaybetmendiyê ne înteraktîf in, tê vê wateyê ku bikarhêner nikanin balê bikşînin, hildin, an li wan bikirtînin da ku amûrek (an popover) bişopînin. Wekî çareseriyek, hûn ê bixwazin ku şîreta amûrê ji pêçanek <div>an jî <span>, ku bi îdeal e ku bi karanîna klavyeyê-focusable hatî çêkirin, derxînin tabindex="0".

<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Vebijêrk

Ji ber ku vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin, hûn dikarin navek vebijarkê lê zêde bikin data-bs-, wekî di data-bs-animation="{value}". Dema ku vebijarkan bi taybetmendiyên daneyê re derbas bikin, pê ewle bin ku hûn celebê doza navê vebijarkê ji " camelCase " veguherînin " kebab-case ". Mînakî, data-bs-custom-class="beautifier"li şûna bikar bînin data-bs-customClass="beautifier".

Ji Bootstrap 5.2.0-ê, hemî pêkhate taybetmendiyek daneya veqetandî ya ceribandinêdata-bs-config piştgirî dikin ku dikare veavakirina hêmanek hêsan wekî rêzek JSON bihewîne. Dema ku hêmanek hebe data-bs-config='{"delay":0, "title":123}'û data-bs-title="456"taybetmendî hebe, nirxa paşîn titledê bibe 456û taybetmendiyên daneya veqetandî dê nirxên ku li ser hatine dayîn derbas bikin data-bs-config. Digel vê yekê, taybetmendiyên daneya heyî dikarin nirxên JSON ên mîna data-bs-delay='{"show":0,"hide":150}'.

Bikaranîna fonksiyonê bipopperConfig

const tooltip = new bootstrap.Tooltip(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Methods

const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance

// setContent example
tooltip.setContent({ '.tooltip-inner': 'another title' })

Events

const myTooltipEl = document.getElementById('myTooltip')
const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)

myTooltipEl.addEventListener('hidden.bs.tooltip', () => {
  // do something...
})

tooltip.hide()