ਪੋਪੋਵਰਸ

ਸੰਖੇਪ ਜਾਣਕਾਰੀ

ਪੌਪਓਵਰ ਪਲੱਗਇਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ ਜਾਣਨ ਵਾਲੀਆਂ ਚੀਜ਼ਾਂ:

• ਪੋਪੌਵਰ ਪੋਜੀਸ਼ਨਿੰਗ ਲਈ ਥਰਡ ਪਾਰਟੀ ਲਾਇਬ੍ਰੇਰੀ ਪੋਪਰ 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹਨ। ਤੁਹਾਨੂੰ ਪਹਿਲਾਂ popper.min.jsbootstrap.js ਸ਼ਾਮਲ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ, ਜਾਂ ਉਸ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ bootstrap.bundle.min.jsਜਿਸ ਵਿੱਚ Popper ਸ਼ਾਮਲ ਹੈ।
• ਪੋਪਓਵਰ ਨੂੰ ਇੱਕ ਨਿਰਭਰਤਾ ਵਜੋਂ ਪੌਪਓਵਰ ਪਲੱਗਇਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।
• ਪੋਪਓਵਰ ਪ੍ਰਦਰਸ਼ਨ ਕਾਰਨਾਂ ਕਰਕੇ ਚੁਣੇ ਜਾਂਦੇ ਹਨ, ਇਸ ਲਈ ਤੁਹਾਨੂੰ ਉਹਨਾਂ ਨੂੰ ਖੁਦ ਸ਼ੁਰੂ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ ।
• ਜ਼ੀਰੋ-ਲੰਬਾਈ titleਅਤੇ contentਮੁੱਲ ਕਦੇ ਵੀ ਪੌਪਓਵਰ ਨਹੀਂ ਦਿਖਾਉਣਗੇ।
• container: 'body'ਵਧੇਰੇ ਗੁੰਝਲਦਾਰ ਭਾਗਾਂ (ਜਿਵੇਂ ਸਾਡੇ ਇਨਪੁਟ ਸਮੂਹ, ਬਟਨ ਸਮੂਹ, ਆਦਿ) ਵਿੱਚ ਪੇਸ਼ਕਾਰੀ ਸਮੱਸਿਆਵਾਂ ਤੋਂ ਬਚਣ ਲਈ ਸਪਸ਼ਟ ਕਰੋ।
• ਲੁਕਵੇਂ ਤੱਤਾਂ 'ਤੇ ਪੌਪਓਵਰ ਨੂੰ ਚਾਲੂ ਕਰਨਾ ਕੰਮ ਨਹੀਂ ਕਰੇਗਾ।
• ਇੱਕ ਰੈਪਰ ਐਲੀਮੈਂਟ 'ਤੇ .disabledਜਾਂ ਐਲੀਮੈਂਟਸ ਲਈ ਪੌਪਓਵਰ ਸ਼ੁਰੂ ਕੀਤੇ ਜਾਣੇ ਚਾਹੀਦੇ ਹਨ।disabled
• ਜਦੋਂ ਐਂਕਰਾਂ ਤੋਂ ਸ਼ੁਰੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਜੋ ਕਈ ਲਾਈਨਾਂ ਵਿੱਚ ਲਪੇਟਦੇ ਹਨ, ਤਾਂ ਪੌਪਓਵਰ ਐਂਕਰਾਂ ਦੀ ਸਮੁੱਚੀ ਚੌੜਾਈ ਦੇ ਵਿਚਕਾਰ ਕੇਂਦਰਿਤ ਹੋਣਗੇ। ਇਸ ਵਿਵਹਾਰ ਤੋਂ ਬਚਣ ਲਈ .text-nowrapਆਪਣੇ ਐੱਸ 'ਤੇ ਵਰਤੋਂ ।<a>
• DOM ਤੋਂ ਉਹਨਾਂ ਦੇ ਅਨੁਸਾਰੀ ਤੱਤਾਂ ਨੂੰ ਹਟਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਪੌਪਓਵਰ ਨੂੰ ਲੁਕਾਇਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ।
• ਇੱਕ ਸ਼ੈਡੋ DOM ਦੇ ਅੰਦਰ ਇੱਕ ਤੱਤ ਦੇ ਕਾਰਨ ਪੌਪਓਵਰ ਸ਼ੁਰੂ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ।

ਇਹ ਦੇਖਣ ਲਈ ਪੜ੍ਹਦੇ ਰਹੋ ਕਿ ਪੋਪੋਵਰ ਕੁਝ ਉਦਾਹਰਣਾਂ ਨਾਲ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ।

ਉਦਾਹਰਨਾਂ

ਪੌਪਓਵਰ ਨੂੰ ਸਮਰੱਥ ਬਣਾਓ

ਜਿਵੇਂ ਕਿ ਉੱਪਰ ਦੱਸਿਆ ਗਿਆ ਹੈ, ਤੁਹਾਨੂੰ ਪੌਪਓਵਰ ਦੀ ਵਰਤੋਂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਉਹਨਾਂ ਨੂੰ ਸ਼ੁਰੂ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ। ਇੱਕ ਪੰਨੇ 'ਤੇ ਸਾਰੇ ਪੌਪਓਵਰਾਂ ਨੂੰ ਸ਼ੁਰੂ ਕਰਨ ਦਾ ਇੱਕ ਤਰੀਕਾ ਉਹਨਾਂ ਦੀ data-bs-toggleਵਿਸ਼ੇਸ਼ਤਾ ਦੁਆਰਾ ਉਹਨਾਂ ਨੂੰ ਚੁਣਨਾ ਹੋਵੇਗਾ, ਜਿਵੇਂ ਕਿ:

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

ਲਾਈਵ ਡੈਮੋ

ਅਸੀਂ ਹੇਠਾਂ ਦਿੱਤੇ ਲਾਈਵ ਪੌਪਓਵਰ ਨੂੰ ਰੈਂਡਰ ਕਰਨ ਲਈ ਉੱਪਰ ਦਿੱਤੇ ਸਨਿੱਪਟ ਦੇ ਸਮਾਨ JavaScript ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ। ਸਿਰਲੇਖਾਂ ਰਾਹੀਂ ਸੈੱਟ ਕੀਤੇ ਜਾਂਦੇ ਹਨ data-bs-titleਅਤੇ ਸਰੀਰ ਦੀ ਸਮੱਗਰੀ ਰਾਹੀਂ ਸੈੱਟ ਕੀਤੀ ਜਾਂਦੀ ਹੈ 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>

ਚਾਰ ਦਿਸ਼ਾਵਾਂ

ਚਾਰ ਵਿਕਲਪ ਉਪਲਬਧ ਹਨ: ਉੱਪਰ, ਸੱਜੇ, ਹੇਠਾਂ ਅਤੇ ਖੱਬਾ। RTL ਵਿੱਚ ਬੂਟਸਟਰੈਪ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ ਦਿਸ਼ਾਵਾਂ ਪ੍ਰਤੀਬਿੰਬ ਕੀਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ। data-bs-placementਦਿਸ਼ਾ ਬਦਲਣ ਲਈ ਸੈੱਟ ਕਰੋ ।

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

ਪ੍ਰਥਾcontainer

ਜਦੋਂ ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਪੇਰੈਂਟ ਐਲੀਮੈਂਟ 'ਤੇ ਕੁਝ ਸ਼ੈਲੀਆਂ ਹੁੰਦੀਆਂ ਹਨ ਜੋ ਪੌਪਓਵਰ ਵਿੱਚ ਦਖਲ ਦਿੰਦੀਆਂ ਹਨ, ਤਾਂ ਤੁਸੀਂ ਇੱਕ ਕਸਟਮ ਨਿਰਧਾਰਤ ਕਰਨਾ ਚਾਹੋਗੇ containerਤਾਂ ਜੋ ਪੌਪਓਵਰ ਦਾ HTML ਉਸ ਤੱਤ ਦੇ ਅੰਦਰ ਦਿਖਾਈ ਦੇਵੇ। ਇਹ ਜਵਾਬਦੇਹ ਸਾਰਣੀਆਂ, ਇਨਪੁਟ ਸਮੂਹਾਂ ਅਤੇ ਇਸ ਤਰ੍ਹਾਂ ਦੇ ਵਿੱਚ ਆਮ ਹੈ।

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

ਇੱਕ ਹੋਰ ਸਥਿਤੀ ਜਿੱਥੇ ਤੁਸੀਂ ਇੱਕ ਸਪੱਸ਼ਟ ਕਸਟਮ ਸੈਟ ਕਰਨਾ ਚਾਹੋਗੇ ਉਹ ਹੈ ਇੱਕ ਮਾਡਲ ਡਾਇਲਾਗcontainer ਦੇ ਅੰਦਰ ਪੋਪਓਵਰ , ਇਹ ਯਕੀਨੀ ਬਣਾਉਣ ਲਈ ਕਿ ਪੋਪਓਵਰ ਆਪਣੇ ਆਪ ਮਾਡਲ ਵਿੱਚ ਜੋੜਿਆ ਗਿਆ ਹੈ। ਇਹ ਖਾਸ ਤੌਰ 'ਤੇ ਉਹਨਾਂ ਪੌਪਓਵਰਾਂ ਲਈ ਮਹੱਤਵਪੂਰਨ ਹੈ ਜਿਸ ਵਿੱਚ ਇੰਟਰਐਕਟਿਵ ਤੱਤ ਹੁੰਦੇ ਹਨ - ਮਾਡਲ ਡਾਇਲਾਗ ਫੋਕਸ ਨੂੰ ਫਸਾਉਣਗੇ, ਇਸਲਈ ਜਦੋਂ ਤੱਕ ਪੌਪਓਵਰ ਮਾਡਲ ਦਾ ਇੱਕ ਚਾਈਲਡ ਐਲੀਮੈਂਟ ਨਹੀਂ ਹੁੰਦਾ, ਉਪਭੋਗਤਾ ਇਹਨਾਂ ਇੰਟਰਐਕਟਿਵ ਤੱਤਾਂ ਨੂੰ ਫੋਕਸ ਜਾਂ ਕਿਰਿਆਸ਼ੀਲ ਨਹੀਂ ਕਰ ਸਕਣਗੇ।

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

ਕਸਟਮ ਪੌਪਓਵਰ

ਤੁਸੀਂ CSS ਵੇਰੀਏਬਲ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਪੌਪਓਵਰ ਦੀ ਦਿੱਖ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰ ਸਕਦੇ ਹੋ । ਅਸੀਂ ਆਪਣੀ ਕਸਟਮ ਦਿੱਖ ਦਾ ਘੇਰਾ ਬਣਾਉਣ ਲਈ ਇੱਕ ਕਸਟਮ ਕਲਾਸ ਸੈਟ ਕਰਦੇ ਹਾਂ data-bs-custom-class="custom-popover"ਅਤੇ ਇਸਦੀ ਵਰਤੋਂ ਕੁਝ ਸਥਾਨਕ CSS ਵੇਰੀਏਬਲਾਂ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਨ ਲਈ ਕਰਦੇ ਹਾਂ।

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

ਅਗਲੀ ਕਲਿੱਕ 'ਤੇ ਖਾਰਜ ਕਰੋ

focusਟੌਗਲ ਐਲੀਮੈਂਟ ਤੋਂ ਵੱਖਰੇ ਐਲੀਮੈਂਟ ਦੇ ਉਪਭੋਗਤਾ ਦੇ ਅਗਲੇ ਕਲਿਕ 'ਤੇ ਪੌਪਓਵਰ ਨੂੰ ਖਾਰਜ ਕਰਨ ਲਈ ਟਰਿੱਗਰ ਦੀ ਵਰਤੋਂ ਕਰੋ।

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

ਅਯੋਗ ਤੱਤ

ਵਿਸ਼ੇਸ਼ਤਾ ਵਾਲੇ ਤੱਤ disabledਪਰਸਪਰ ਪ੍ਰਭਾਵੀ ਨਹੀਂ ਹਨ, ਭਾਵ ਉਪਭੋਗਤਾ ਇੱਕ ਪੌਪਓਵਰ (ਜਾਂ ਟੂਲਟਿਪ) ਨੂੰ ਟ੍ਰਿਗਰ ਕਰਨ ਲਈ ਉਹਨਾਂ ਨੂੰ ਹੋਵਰ ਜਾਂ ਕਲਿੱਕ ਨਹੀਂ ਕਰ ਸਕਦੇ ਹਨ। ਇੱਕ ਹੱਲ ਦੇ ਤੌਰ 'ਤੇ, ਤੁਸੀਂ ਇੱਕ ਰੈਪਰ ਤੋਂ ਪੌਪਓਵਰ ਨੂੰ ਟਰਿੱਗਰ ਕਰਨਾ ਚਾਹੋਗੇ <div>ਜਾਂ <span>, ਆਦਰਸ਼ ਰੂਪ ਵਿੱਚ ਕੀਬੋਰਡ-ਫੋਕਸ ਕਰਨ ਯੋਗ ਬਣਾਇਆ ਗਿਆ tabindex="0"ਹੈ।

ਅਯੋਗ ਪੌਪਓਵਰ ਟਰਿਗਰਸ ਲਈ, ਤੁਸੀਂ ਇਹ ਵੀ ਤਰਜੀਹ ਦੇ ਸਕਦੇ ਹੋ data-bs-trigger="hover focus"ਕਿ ਪੌਪਓਵਰ ਤੁਹਾਡੇ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਤੁਰੰਤ ਵਿਜ਼ੂਅਲ ਫੀਡਬੈਕ ਦੇ ਰੂਪ ਵਿੱਚ ਦਿਖਾਈ ਦੇਵੇ ਕਿਉਂਕਿ ਉਹ ਇੱਕ ਅਯੋਗ ਤੱਤ 'ਤੇ ਕਲਿੱਕ ਕਰਨ ਦੀ ਉਮੀਦ ਨਹੀਂ ਕਰ ਸਕਦੇ ਹਨ।

<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

ਵੇਰੀਏਬਲ

ਬੂਟਸਟਰੈਪ ਦੀ ਵਿਕਸਤ ਹੋ ਰਹੀ CSS ਵੇਰੀਏਬਲ ਪਹੁੰਚ ਦੇ ਹਿੱਸੇ ਵਜੋਂ, ਪੌਪਓਵਰ ਹੁਣ .popoverਵਧੇ ਹੋਏ ਰੀਅਲ-ਟਾਈਮ ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ ਲਈ ਸਥਾਨਕ CSS ਵੇਰੀਏਬਲ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ। CSS ਵੇਰੀਏਬਲ ਲਈ ਮੁੱਲ Sass ਦੁਆਰਾ ਸੈੱਟ ਕੀਤੇ ਗਏ ਹਨ, ਇਸਲਈ Sass ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ ਅਜੇ ਵੀ ਸਮਰਥਿਤ ਹੈ।

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

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;

ਵਰਤੋਂ

JavaScript ਦੁਆਰਾ ਪੌਪਓਵਰ ਨੂੰ ਸਮਰੱਥ ਬਣਾਓ:

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

ਵਿਕਲਪ

ਜਿਵੇਂ ਕਿ ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਤੁਸੀਂ ਇੱਕ ਵਿਕਲਪ ਦਾ ਨਾਮ ਜੋੜ ਸਕਦੇ ਹੋ data-bs-, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-bs-animation="{value}"। ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੁਆਰਾ ਵਿਕਲਪਾਂ ਨੂੰ ਪਾਸ ਕਰਦੇ ਸਮੇਂ ਵਿਕਲਪ ਨਾਮ ਦੀ ਕੇਸ ਕਿਸਮ ਨੂੰ " ਕੈਮਲਕੇਸ " ਤੋਂ " ਕਬਾਬ-ਕੇਸ " ਵਿੱਚ ਬਦਲਣਾ ਯਕੀਨੀ ਬਣਾਓ । ਉਦਾਹਰਨ ਲਈ, ਦੀ data-bs-custom-class="beautifier"ਬਜਾਏ ਵਰਤੋ data-bs-customClass="beautifier".

ਬੂਟਸਟਰੈਪ 5.2.0 ਦੇ ਅਨੁਸਾਰ, ਸਾਰੇ ਭਾਗ ਇੱਕ ਪ੍ਰਯੋਗਾਤਮਕ ਰਿਜ਼ਰਵਡ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾ ਦਾ ਸਮਰਥਨ ਕਰਦੇ ਹਨ data-bs-configਜੋ ਇੱਕ JSON ਸਟ੍ਰਿੰਗ ਦੇ ਰੂਪ ਵਿੱਚ ਸਧਾਰਨ ਕੰਪੋਨੈਂਟ ਕੌਂਫਿਗਰੇਸ਼ਨ ਨੂੰ ਰੱਖ ਸਕਦਾ ਹੈ। ਜਦੋਂ ਇੱਕ ਤੱਤ data-bs-config='{"delay":0, "title":123}'ਅਤੇ data-bs-title="456"ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਹੁੰਦੀਆਂ ਹਨ, ਤਾਂ ਅੰਤਮ titleਮੁੱਲ ਹੋਵੇਗਾ 456ਅਤੇ ਵੱਖਰੇ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ 'ਤੇ ਦਿੱਤੇ ਗਏ ਮੁੱਲਾਂ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਨਗੀਆਂ data-bs-config। ਇਸ ਤੋਂ ਇਲਾਵਾ, ਮੌਜੂਦਾ ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ JSON ਮੁੱਲਾਂ ਨੂੰ ਰੱਖਣ ਦੇ ਯੋਗ ਹਨ ਜਿਵੇਂ ਕਿ data-bs-delay='{"show":0,"hide":150}'.

ਨਾਲ ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਨਾpopperConfig

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

ਢੰਗ

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

ਸਮਾਗਮ

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