Popovers

Têgihiştinî

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

• Popover 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.
• Popover pêveka popover -ê wekî girêdayîbûnê hewce dike.
• Popover ji ber sedemên performansê têne hilbijartin, ji ber vê yekê divê hûn bi xwe wan dest pê bikin .
• Zero-dirêj titleû contentnirx dê ti carî popoverek nîşan nedin.
• 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.
• Vekirina popoverên li ser hêmanên veşartî dê nexebite.
• Pêdivî ye ku popoverên ji bo .disabledan disabledhêmanan li ser hêmanek pêçandî werin avêtin.
• Dema ku ji lengerên ku li gelek rêzan diqelibin werin avêtin, popover dê di navbera firehiya giştî ya lengeran de bibin navend. .text-nowrapLi 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ê popover werin veşartin.
• Popover dikarin bi saya hêmanek di hundurê DOM-a siya de werin dest pê kirin.

Xwendina xwe bidomînin da ku bibînin ka popover çawa bi hin mînakan re dixebitin.

Examples

Popovers çalak bike

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

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

Demo zindî

Em JavaScript-ê mîna perçeya jorîn bikar tînin da ku popovera zindî ya jêrîn bidin. Sernav bi rê ve têne danîn data-bs-titleû naveroka laş bi riya ve têne danîn data-bs-content.

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Çar rê

Çar vebijark hene: jor, rast, jêr û çep. Dema ku Bootstrap-ê di RTL-ê de bikar tînin rêwerz têne xuyang kirin. Set data-bs-placementji bo guhertina rê.

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
  Popover on left
</button>

Hûnbunîcontainer

Gava ku we hin şêwazên li ser hêmanek dêûbav hene ku mudaxeleyî popoverekê dikin, hûn ê bixwazin ku xwerûyek diyar bikin containerda ku li şûna wê HTML-a popover di hundurê wê hêmanê de xuya bibe. Ev di tabloyên bersivdar, komên têketinê, û yên wekî wan de hevpar e.

const popover = new bootstrap.Popover('.example-popover', {
  container: 'body'
})

Rewşek din a ku hûn dixwazin adetek eşkere containersaz bikin popoverên di hundurê diyalogek modal de ne , da ku pê ewle bibin ku popover bixwe bi modalê ve hatî zêdekirin. Ev bi taybetî ji bo popoverên ku hêmanên înteraktîf dihewîne girîng e - diyalogên modal dê balê bikişîne, ji ber vê yekê heya ku popover hêmanek zarokê ya modalê nebe, bikarhêner dê nikaribin van hêmanên înteraktîf bala xwe bidin an çalak bikin.

const popover = new bootstrap.Popover('.example-popover', {
  container: '.modal-body'
})

popovers Custom

Hûn dikarin bi karanîna guherbarên CSS -ê xuyangê popoveran xweş bikin . Me çînek xwerû pê re saz kir da ku xuyangê xweya data-bs-custom-class="custom-popover"xwerû berfireh bike û wê bikar bîne da ku hin guhêrbarên CSS-ê yên herêmî bişopîne.

.custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bs-primary);
  --bs-popover-header-bg: var(--bs-primary);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}

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

Li ser klîkek paşîn veqetînin

Tetikê bikar focusbînin da ku popoverên li ser klîkek paşîn a bikarhêner a hêmanek cûda ji hêmana veguheztinê dûr bixe.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

const popover = new bootstrap.Popover('.popover-dismiss', {
  trigger: 'focus'
})

hêmanên astengdar

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

Ji bo pêlên popover ên neçalak, hûn dikarin her weha tercîh data-bs-trigger="hover focus"bikin da ku popover ji bikarhênerên we re wekî bertekek dîtbarî ya tavilê xuya bibe ji ber ku ew ne li bendê ne ku li ser hêmanek neçalak bikirtînin .

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

CSS

Variables

Wekî beşek ji nêzikbûna guhêrbarên CSS-ê yên pêşveçûyî yên Bootstrap, popover naha guhêrbarên CSS-ê yên herêmî li ser .popoverji 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}popover-zindex: #{$zindex-popover};
  --#{$prefix}popover-max-width: #{$popover-max-width};
  @include rfs($popover-font-size, --#{$prefix}popover-font-size);
  --#{$prefix}popover-bg: #{$popover-bg};
  --#{$prefix}popover-border-width: #{$popover-border-width};
  --#{$prefix}popover-border-color: #{$popover-border-color};
  --#{$prefix}popover-border-radius: #{$popover-border-radius};
  --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
  --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
  --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
  --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
  @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
  --#{$prefix}popover-header-color: #{$popover-header-color};
  --#{$prefix}popover-header-bg: #{$popover-header-bg};
  --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
  --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
  --#{$prefix}popover-body-color: #{$popover-body-color};
  --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
  --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
  --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
  

Guherbarên Sass

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              var(--#{$prefix}border-color-translucent);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-font-size:          $font-size-base;
$popover-header-bg:                 shade-color($popover-bg, 6%);
$popover-header-color:              $headings-color;
$popover-header-padding-y:          .5rem;
$popover-header-padding-x:          $spacer;

$popover-body-color:                $body-color;
$popover-body-padding-y:            $spacer;
$popover-body-padding-x:            $spacer;

$popover-arrow-width:               1rem;
$popover-arrow-height:              .5rem;

Bikaranîna

Bi JavaScriptê popovers çalak bikin:

const exampleEl = document.getElementById('example')
const popover = new bootstrap.Popover(exampleEl, options)

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 popover = new bootstrap.Popover(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Methods

// getOrCreateInstance example
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance

// setContent example
myPopover.setContent({
  '.popover-header': 'another title',
  '.popover-body': 'another content'
})

Events

const myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', () => {
  // do something...
})