Popovers

Gambaran keseluruhan

Perkara yang perlu diketahui apabila menggunakan pemalam popover:

• Popovers bergantung pada pustaka pihak ketiga Popper untuk kedudukan. Anda mesti menyertakan popper.min.js sebelum bootstrap.js, atau gunakan bootstrap.bundle.min.jsyang mengandungi Popper.
• Popovers memerlukan pemalam popover sebagai kebergantungan.
• Popovers mengikut serta atas sebab prestasi, jadi anda mesti memulakannya sendiri .
• Panjang sifar titledan contentnilai tidak akan menunjukkan popover.
• Tentukan container: 'body'untuk mengelakkan masalah rendering dalam komponen yang lebih kompleks (seperti kumpulan input kami, kumpulan butang, dll).
• Mencetuskan popover pada elemen tersembunyi tidak akan berfungsi.
• Popover untuk .disabledatau disabledelemen mesti dicetuskan pada elemen pembalut.
• Apabila dicetuskan daripada sauh yang membalut berbilang baris, popover akan dipusatkan di antara lebar keseluruhan sauh. Gunakan .text-nowrappada <a>s anda untuk mengelakkan tingkah laku ini.
• Popover mesti disembunyikan sebelum elemen yang sepadan dialih keluar daripada DOM.
• Popover boleh dicetuskan terima kasih kepada elemen dalam DOM bayangan.

Teruskan membaca untuk melihat cara popover berfungsi dengan beberapa contoh.

Contoh

Dayakan popovers

Seperti yang dinyatakan di atas, anda mesti memulakan popover sebelum ia boleh digunakan. Satu cara untuk memulakan semua popover pada halaman adalah dengan memilihnya mengikut data-bs-toggleatributnya, seperti:

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

Demo langsung

Kami menggunakan JavaScript yang serupa dengan coretan di atas untuk memaparkan popover langsung berikut. Tajuk ditetapkan melalui data-bs-titledan kandungan badan ditetapkan melalui 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>

Empat arah

Empat pilihan tersedia: atas, kanan, bawah dan kiri. Arah dicerminkan apabila menggunakan Bootstrap dalam RTL. Tetapkan data-bs-placementuntuk menukar arah.

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

Adatcontainer

Apabila anda mempunyai beberapa gaya pada elemen induk yang mengganggu popover, anda perlu menentukan tersuai containersupaya HTML popover muncul dalam elemen itu. Ini adalah perkara biasa dalam jadual responsif, kumpulan input dan seumpamanya.

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

Satu lagi situasi di mana anda ingin menetapkan adat eksplisit containerialah popover dalam dialog modal , untuk memastikan bahawa popover itu sendiri dilampirkan pada modal. Ini amat penting untuk popover yang mengandungi unsur interaktif – dialog ragam akan memerangkap fokus, jadi melainkan jika popover ialah elemen anak bagi ragam, pengguna tidak akan dapat memfokus atau mengaktifkan elemen interaktif ini.

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

Popover tersuai

Anda boleh menyesuaikan penampilan popover menggunakan pembolehubah CSS . Kami menetapkan kelas tersuai dengan data-bs-custom-class="custom-popover"skop penampilan tersuai kami dan menggunakannya untuk mengatasi beberapa pembolehubah CSS setempat.

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

Tolak pada klik seterusnya

Gunakan focuspencetus untuk mengetepikan popover pada klik seterusnya pengguna bagi elemen yang berbeza daripada elemen togol.

<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'
})

Elemen yang dilumpuhkan

Elemen dengan disabledatribut tidak interaktif, bermakna pengguna tidak boleh menuding atau mengkliknya untuk mencetuskan popover (atau petua alat). Sebagai penyelesaian, anda perlu mencetuskan popover daripada pembalut <div>atau <span>, yang idealnya boleh difokuskan papan kekunci menggunakan tabindex="0".

Untuk pencetus popover yang dilumpuhkan, anda juga boleh memilih data-bs-trigger="hover focus"supaya popover muncul sebagai maklum balas visual segera kepada pengguna anda kerana mereka mungkin tidak menjangkakan untuk mengklik pada elemen yang dilumpuhkan.

<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

Pembolehubah

Sebagai sebahagian daripada pendekatan pembolehubah CSS Bootstrap yang berkembang, popover kini menggunakan pembolehubah CSS tempatan .popoveruntuk penyesuaian masa nyata yang dipertingkatkan. Nilai untuk pembolehubah CSS ditetapkan melalui Sass, jadi penyesuaian Sass masih disokong juga.

  --#{$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);
  

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

Penggunaan

Dayakan popovers melalui JavaScript:

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

Pilihan

Memandangkan pilihan boleh dihantar melalui atribut data atau JavaScript, anda boleh menambahkan nama pilihan pada data-bs-, seperti dalam data-bs-animation="{value}". Pastikan anda menukar jenis kes bagi nama pilihan daripada " camelCase " kepada " kebab-case " apabila menghantar pilihan melalui atribut data. Sebagai contoh, gunakan data-bs-custom-class="beautifier"bukannya data-bs-customClass="beautifier".

Mulai Bootstrap 5.2.0, semua komponen menyokong atribut data simpanan percubaandata-bs-config yang boleh menempatkan konfigurasi komponen ringkas sebagai rentetan JSON. Apabila elemen mempunyai data-bs-config='{"delay":0, "title":123}'dan data-bs-title="456"atribut, nilai akhir titleakan menjadi 456dan atribut data yang berasingan akan mengatasi nilai yang diberikan pada data-bs-config. Selain itu, atribut data sedia ada dapat menempatkan nilai JSON seperti data-bs-delay='{"show":0,"hide":150}'.

Menggunakan fungsi denganpopperConfig

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

Kaedah

// 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'
})

Peristiwa

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