ਮੁੱਖ ਸਮੱਗਰੀ ਤੇ ਜਾਓ ਡੌਕਸ ਨੈਵੀਗੇਸ਼ਨ 'ਤੇ ਜਾਓ
in English

ਪੋਪੋਵਰਸ

ਬੂਟਸਟਰੈਪ ਪੌਪਓਵਰ ਨੂੰ ਜੋੜਨ ਲਈ ਦਸਤਾਵੇਜ਼ ਅਤੇ ਉਦਾਹਰਨਾਂ, ਜਿਵੇਂ ਕਿ iOS ਵਿੱਚ ਮਿਲਦੀਆਂ ਹਨ, ਤੁਹਾਡੀ ਸਾਈਟ ਦੇ ਕਿਸੇ ਵੀ ਤੱਤ ਵਿੱਚ।

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

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

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

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

ਉਦਾਹਰਨ: ਹਰ ਜਗ੍ਹਾ ਪੌਪਓਵਰ ਨੂੰ ਸਮਰੱਥ ਬਣਾਓ

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

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

ਉਦਾਹਰਨ: containerਵਿਕਲਪ ਦੀ ਵਰਤੋਂ ਕਰਨਾ

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

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

ਉਦਾਹਰਨ

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

ਚਾਰ ਦਿਸ਼ਾਵਾਂ

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

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

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

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

ਖਾਰਜ-ਆਨ-ਨੈਕਸਟ-ਕਲਿੱਕ ਲਈ ਖਾਸ ਮਾਰਕਅੱਪ ਦੀ ਲੋੜ ਹੈ

ਸਹੀ ਕਰਾਸ-ਬ੍ਰਾਊਜ਼ਰ ਅਤੇ ਕਰਾਸ-ਪਲੇਟਫਾਰਮ ਵਿਵਹਾਰ ਲਈ, ਤੁਹਾਨੂੰ ਟੈਗ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ <a>, ਨਾ ਕਿ <button>ਟੈਗ, ਅਤੇ ਤੁਹਾਨੂੰ ਇੱਕ tabindexਵਿਸ਼ੇਸ਼ਤਾ ਵੀ ਸ਼ਾਮਲ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ।

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
var popover = new bootstrap.Popover(document.querySelector('.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>

ਸੱਸ

ਵੇਰੀਏਬਲ

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              rgba($black, .2);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$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;
$popover-arrow-color:               $popover-bg;

$popover-arrow-outer-color:         fade-in($popover-border-color, .05);

ਵਰਤੋਂ

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

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

ਕੀਬੋਰਡ ਅਤੇ ਸਹਾਇਕ ਟੈਕਨਾਲੋਜੀ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਪੋਪਓਵਰ ਕੰਮ ਕਰਨਾ

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

ਜਦੋਂ ਕਿ ਤੁਸੀਂ ਵਿਕਲਪ ਦੇ ਨਾਲ ਪੋਪਓਵਰ ਵਿੱਚ ਅਮੀਰ, ਢਾਂਚਾਗਤ HTML ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ html, ਅਸੀਂ ਜ਼ੋਰਦਾਰ ਸਿਫ਼ਾਰਿਸ਼ ਕਰਦੇ ਹਾਂ ਕਿ ਤੁਸੀਂ ਸਮੱਗਰੀ ਦੀ ਬਹੁਤ ਜ਼ਿਆਦਾ ਮਾਤਰਾ ਨੂੰ ਜੋੜਨ ਤੋਂ ਬਚੋ। ਵਰਤਮਾਨ ਵਿੱਚ ਪੌਪਵਰਸ ਦਾ ਕੰਮ ਕਰਨ ਦਾ ਤਰੀਕਾ ਇਹ ਹੈ ਕਿ, ਇੱਕ ਵਾਰ ਪ੍ਰਦਰਸ਼ਿਤ ਹੋਣ ਤੋਂ ਬਾਅਦ, ਉਹਨਾਂ ਦੀ ਸਮਗਰੀ ਨੂੰ aria-describedbyਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਨਾਲ ਟਰਿੱਗਰ ਤੱਤ ਨਾਲ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ. ਨਤੀਜੇ ਵਜੋਂ, ਪੌਪਓਵਰ ਦੀ ਸਮੁੱਚੀ ਸਮਗਰੀ ਨੂੰ ਸਹਾਇਕ ਤਕਨਾਲੋਜੀ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਇੱਕ ਲੰਬੀ, ਨਿਰਵਿਘਨ ਸਟ੍ਰੀਮ ਵਜੋਂ ਘੋਸ਼ਿਤ ਕੀਤਾ ਜਾਵੇਗਾ।

ਇਸ ਤੋਂ ਇਲਾਵਾ, ਜਦੋਂ ਕਿ ਤੁਹਾਡੇ ਪੌਪਓਵਰ ਵਿੱਚ ਇੰਟਰਐਕਟਿਵ ਨਿਯੰਤਰਣ (ਜਿਵੇਂ ਕਿ ਫਾਰਮ ਐਲੀਮੈਂਟਸ ਜਾਂ ਲਿੰਕ) ਨੂੰ ਸ਼ਾਮਲ ਕਰਨਾ ਸੰਭਵ ਹੈ (ਇਨ੍ਹਾਂ ਤੱਤਾਂ ਨੂੰ allowListਮਨਜ਼ੂਰਸ਼ੁਦਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਅਤੇ ਟੈਗਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਕੇ), ਧਿਆਨ ਰੱਖੋ ਕਿ ਵਰਤਮਾਨ ਵਿੱਚ ਪੌਪਓਵਰ ਕੀਬੋਰਡ ਫੋਕਸ ਆਰਡਰ ਦਾ ਪ੍ਰਬੰਧਨ ਨਹੀਂ ਕਰਦਾ ਹੈ। ਜਦੋਂ ਇੱਕ ਕੀਬੋਰਡ ਉਪਭੋਗਤਾ ਇੱਕ ਪੌਪਓਵਰ ਖੋਲ੍ਹਦਾ ਹੈ, ਤਾਂ ਫੋਕਸ ਟਰਿੱਗਰ ਕਰਨ ਵਾਲੇ ਤੱਤ 'ਤੇ ਰਹਿੰਦਾ ਹੈ, ਅਤੇ ਜਿਵੇਂ ਕਿ ਪੌਪਓਵਰ ਆਮ ਤੌਰ 'ਤੇ ਦਸਤਾਵੇਜ਼ ਦੇ ਢਾਂਚੇ ਵਿੱਚ ਟਰਿੱਗਰ ਦੀ ਪਾਲਣਾ ਨਹੀਂ ਕਰਦਾ ਹੈ, ਇਸਦੀ ਕੋਈ ਗਾਰੰਟੀ ਨਹੀਂ ਹੈ ਕਿ ਅੱਗੇ ਵਧਣਾ/ਦਬਾਣਾTABਇੱਕ ਕੀਬੋਰਡ ਉਪਭੋਗਤਾ ਨੂੰ ਪੌਪਓਵਰ ਵਿੱਚ ਲੈ ਜਾਵੇਗਾ। ਸੰਖੇਪ ਵਿੱਚ, ਸਿਰਫ਼ ਇੱਕ ਪੌਪਓਵਰ ਵਿੱਚ ਇੰਟਰਐਕਟਿਵ ਨਿਯੰਤਰਣ ਜੋੜਨ ਨਾਲ ਕੀਬੋਰਡ ਉਪਭੋਗਤਾਵਾਂ ਅਤੇ ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ ਦੇ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਇਹਨਾਂ ਨਿਯੰਤਰਣਾਂ ਨੂੰ ਪਹੁੰਚਯੋਗ/ਅਯੋਗ ਬਣਾਉਣ ਦੀ ਸੰਭਾਵਨਾ ਹੈ, ਜਾਂ ਘੱਟੋ ਘੱਟ ਇੱਕ ਤਰਕਹੀਣ ਸਮੁੱਚੇ ਫੋਕਸ ਆਰਡਰ ਲਈ ਬਣਾਉਣ ਦੀ ਸੰਭਾਵਨਾ ਹੈ। ਇਹਨਾਂ ਮਾਮਲਿਆਂ ਵਿੱਚ, ਇਸਦੀ ਬਜਾਏ ਇੱਕ ਮਾਡਲ ਡਾਇਲਾਗ ਦੀ ਵਰਤੋਂ ਕਰਨ 'ਤੇ ਵਿਚਾਰ ਕਰੋ।

ਵਿਕਲਪ

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

ਨੋਟ ਕਰੋ ਕਿ ਸੁਰੱਖਿਆ ਕਾਰਨਾਂ ਕਰਕੇ sanitize, sanitizeFn, ਅਤੇ allowListਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸਪਲਾਈ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।
ਨਾਮ ਟਾਈਪ ਕਰੋ ਡਿਫਾਲਟ ਵਰਣਨ
animation ਬੁਲੀਅਨ true ਪੌਪਓਵਰ ਲਈ ਇੱਕ CSS ਫੇਡ ਤਬਦੀਲੀ ਲਾਗੂ ਕਰੋ
container ਸਤਰ | ਤੱਤ | ਝੂਠਾ false

ਪੌਪਓਵਰ ਨੂੰ ਕਿਸੇ ਖਾਸ ਤੱਤ ਨਾਲ ਜੋੜਦਾ ਹੈ। ਉਦਾਹਰਨ: container: 'body'. ਇਹ ਵਿਕਲਪ ਖਾਸ ਤੌਰ 'ਤੇ ਲਾਭਦਾਇਕ ਹੈ ਕਿਉਂਕਿ ਇਹ ਤੁਹਾਨੂੰ ਡੌਕੂਮੈਂਟ ਦੇ ਪ੍ਰਵਾਹ ਵਿੱਚ ਪੋਪਓਵਰ ਨੂੰ ਟਰਿਗਰਿੰਗ ਐਲੀਮੈਂਟ ਦੇ ਨੇੜੇ ਰੱਖਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ - ਜੋ ਪੌਪਓਵਰ ਨੂੰ ਵਿੰਡੋ ਰੀਸਾਈਜ਼ ਦੌਰਾਨ ਟਰਿਗਰਿੰਗ ਐਲੀਮੈਂਟ ਤੋਂ ਦੂਰ ਜਾਣ ਤੋਂ ਰੋਕਦਾ ਹੈ।

content ਸਤਰ | ਤੱਤ | ਫੰਕਸ਼ਨ ''

ਜੇਕਰ data-bs-contentਵਿਸ਼ੇਸ਼ਤਾ ਮੌਜੂਦ ਨਹੀਂ ਹੈ ਤਾਂ ਪੂਰਵ-ਨਿਰਧਾਰਤ ਸਮੱਗਰੀ ਮੁੱਲ।

ਜੇਕਰ ਕੋਈ ਫੰਕਸ਼ਨ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਉਸ thisਤੱਤ ਦੇ ਸੰਦਰਭ ਦੇ ਨਾਲ ਬੁਲਾਇਆ ਜਾਵੇਗਾ ਜਿਸ ਨਾਲ ਪੌਪਓਵਰ ਜੁੜਿਆ ਹੈ।

delay ਨੰਬਰ | ਵਸਤੂ 0

ਪੌਪਓਵਰ (ms) ਨੂੰ ਦਿਖਾਉਣ ਅਤੇ ਲੁਕਾਉਣ ਵਿੱਚ ਦੇਰੀ - ਮੈਨੂਅਲ ਟਰਿੱਗਰ ਕਿਸਮ 'ਤੇ ਲਾਗੂ ਨਹੀਂ ਹੁੰਦਾ

ਜੇਕਰ ਕੋਈ ਨੰਬਰ ਸਪਲਾਈ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਦੇਰੀ ਨੂੰ ਲੁਕਾਉਣ/ਸ਼ੋਅ ਦੋਵਾਂ ਲਈ ਲਾਗੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ

ਵਸਤੂ ਬਣਤਰ ਹੈ:delay: { "show": 500, "hide": 100 }

html ਬੁਲੀਅਨ false ਪੋਪਓਵਰ ਵਿੱਚ HTML ਪਾਓ। ਜੇਕਰ ਗਲਤ ਹੈ, ਤਾਂ innerTextਸੰਪੱਤੀ ਦੀ ਵਰਤੋਂ DOM ਵਿੱਚ ਸਮੱਗਰੀ ਪਾਉਣ ਲਈ ਕੀਤੀ ਜਾਵੇਗੀ। ਜੇਕਰ ਤੁਸੀਂ XSS ਹਮਲਿਆਂ ਬਾਰੇ ਚਿੰਤਤ ਹੋ ਤਾਂ ਟੈਕਸਟ ਦੀ ਵਰਤੋਂ ਕਰੋ।
placement ਸਤਰ | ਫੰਕਸ਼ਨ 'right'

ਪੌਪਓਵਰ ਦੀ ਸਥਿਤੀ ਕਿਵੇਂ ਕਰੀਏ - ਆਟੋ | ਸਿਖਰ | ਥੱਲੇ | ਖੱਬੇ | ਸਹੀ
ਜਦੋਂ autoਨਿਸ਼ਚਿਤ ਕੀਤਾ ਗਿਆ ਹੈ, ਇਹ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਪੌਪਓਵਰ ਨੂੰ ਮੁੜ ਦਿਸ਼ਾ ਦੇਵੇਗਾ।

ਜਦੋਂ ਇੱਕ ਫੰਕਸ਼ਨ ਪਲੇਸਮੈਂਟ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਪੋਪੋਵਰ DOM ਨੋਡ ਨੂੰ ਇਸਦੇ ਪਹਿਲੇ ਆਰਗੂਮੈਂਟ ਵਜੋਂ ਅਤੇ ਟ੍ਰਿਗਰਿੰਗ ਐਲੀਮੈਂਟ DOM ਨੋਡ ਨੂੰ ਇਸਦੇ ਦੂਜੇ ਵਜੋਂ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ। thisਸੰਦਰਭ ਪੌਪਓਵਰ ਉਦਾਹਰਨ ਲਈ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ ।

selector ਸਤਰ | ਝੂਠਾ false ਜੇਕਰ ਇੱਕ ਚੋਣਕਾਰ ਪ੍ਰਦਾਨ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਪੌਪਓਵਰ ਵਸਤੂਆਂ ਨੂੰ ਨਿਰਧਾਰਤ ਟੀਚਿਆਂ ਨੂੰ ਸੌਂਪਿਆ ਜਾਵੇਗਾ। ਅਭਿਆਸ ਵਿੱਚ, ਇਸਦੀ ਵਰਤੋਂ ਗਤੀਸ਼ੀਲ HTML ਸਮੱਗਰੀ ਨੂੰ ਪੌਪਓਵਰ ਜੋੜਨ ਲਈ ਯੋਗ ਬਣਾਉਣ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਹ ਅਤੇ ਇੱਕ ਜਾਣਕਾਰੀ ਭਰਪੂਰ ਉਦਾਹਰਨ ਦੇਖੋ ।
template ਸਤਰ '<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

ਪੌਪਓਵਰ ਬਣਾਉਣ ਵੇਲੇ ਵਰਤਣ ਲਈ ਆਧਾਰ HTML।

ਪੌਪਓਵਰ titleਨੂੰ ਵਿੱਚ ਟੀਕਾ ਲਗਾਇਆ ਜਾਵੇਗਾ .popover-header

ਪੌਪਓਵਰ contentਨੂੰ ਵਿੱਚ ਟੀਕਾ ਲਗਾਇਆ ਜਾਵੇਗਾ .popover-body

.popover-arrowਪੌਪਓਵਰ ਦਾ ਤੀਰ ਬਣ ਜਾਵੇਗਾ।

ਸਭ ਤੋਂ ਬਾਹਰਲੇ ਰੈਪਰ ਤੱਤ ਵਿੱਚ .popoverਕਲਾਸ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ।

title ਸਤਰ | ਤੱਤ | ਫੰਕਸ਼ਨ ''

ਜੇਕਰ titleਵਿਸ਼ੇਸ਼ਤਾ ਮੌਜੂਦ ਨਹੀਂ ਹੈ ਤਾਂ ਪੂਰਵ-ਨਿਰਧਾਰਤ ਸਿਰਲੇਖ ਮੁੱਲ।

ਜੇਕਰ ਕੋਈ ਫੰਕਸ਼ਨ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਉਸ thisਤੱਤ ਦੇ ਸੰਦਰਭ ਦੇ ਨਾਲ ਬੁਲਾਇਆ ਜਾਵੇਗਾ ਜਿਸ ਨਾਲ ਪੌਪਓਵਰ ਜੁੜਿਆ ਹੈ।

trigger ਸਤਰ 'click' ਪੌਪਓਵਰ ਕਿਵੇਂ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ - ਕਲਿੱਕ ਕਰੋ | ਹੋਵਰ | ਫੋਕਸ | ਮੈਨੁਅਲ ਤੁਸੀਂ ਕਈ ਟਰਿਗਰ ਪਾਸ ਕਰ ਸਕਦੇ ਹੋ; ਉਹਨਾਂ ਨੂੰ ਇੱਕ ਸਪੇਸ ਨਾਲ ਵੱਖ ਕਰੋ। manualਕਿਸੇ ਹੋਰ ਟਰਿੱਗਰ ਨਾਲ ਜੋੜਿਆ ਨਹੀਂ ਜਾ ਸਕਦਾ।
fallbackPlacements ਐਰੇ ['top', 'right', 'bottom', 'left'] ਐਰੇ ਵਿੱਚ ਪਲੇਸਮੈਂਟਾਂ ਦੀ ਸੂਚੀ ਪ੍ਰਦਾਨ ਕਰਕੇ ਫਾਲਬੈਕ ਪਲੇਸਮੈਂਟ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ (ਤਰਜੀਹੀ ਦੇ ਕ੍ਰਮ ਵਿੱਚ)। ਵਧੇਰੇ ਜਾਣਕਾਰੀ ਲਈ ਪੌਪਰ ਦੇ ਵਿਵਹਾਰ ਦੇ ਦਸਤਾਵੇਜ਼ਾਂ ਨੂੰ ਵੇਖੋ
boundary ਸਤਰ | ਤੱਤ 'clippingParents' ਪੌਪਓਵਰ ਦੀ ਓਵਰਫਲੋ ਸੀਮਾ (ਸਿਰਫ਼ ਪੌਪਰ ਦੇ ਰੋਕਥਾਮ ਓਵਰਫਲੋ ਮੋਡੀਫਾਇਰ 'ਤੇ ਲਾਗੂ ਹੁੰਦਾ ਹੈ)। ਮੂਲ ਰੂਪ ਵਿੱਚ ਇਹ ਹੈ 'clippingParents'ਅਤੇ ਇੱਕ HTMLElement ਹਵਾਲੇ ਨੂੰ ਸਵੀਕਾਰ ਕਰ ਸਕਦਾ ਹੈ (ਸਿਰਫ਼ JavaScript ਰਾਹੀਂ)। ਵਧੇਰੇ ਜਾਣਕਾਰੀ ਲਈ Popper's detectOverflow docs ਵੇਖੋ
customClass ਸਤਰ | ਫੰਕਸ਼ਨ ''

ਪੌਪਓਵਰ ਵਿੱਚ ਕਲਾਸਾਂ ਸ਼ਾਮਲ ਕਰੋ ਜਦੋਂ ਇਹ ਦਿਖਾਇਆ ਜਾਂਦਾ ਹੈ। ਨੋਟ ਕਰੋ ਕਿ ਇਹ ਕਲਾਸਾਂ ਟੈਮਪਲੇਟ ਵਿੱਚ ਦਰਸਾਏ ਗਏ ਕਿਸੇ ਵੀ ਕਲਾਸ ਤੋਂ ਇਲਾਵਾ ਜੋੜੀਆਂ ਜਾਣਗੀਆਂ। ਕਈ ਕਲਾਸਾਂ ਜੋੜਨ ਲਈ, ਉਹਨਾਂ ਨੂੰ ਖਾਲੀ ਥਾਂਵਾਂ ਨਾਲ ਵੱਖ ਕਰੋ: 'class-1 class-2'.

ਤੁਸੀਂ ਇੱਕ ਫੰਕਸ਼ਨ ਵੀ ਪਾਸ ਕਰ ਸਕਦੇ ਹੋ ਜਿਸ ਵਿੱਚ ਵਾਧੂ ਕਲਾਸ ਨਾਮਾਂ ਵਾਲੀ ਸਿੰਗਲ ਸਤਰ ਵਾਪਸ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ।

sanitize ਬੁਲੀਅਨ true ਸੈਨੀਟਾਈਜ਼ੇਸ਼ਨ ਨੂੰ ਸਮਰੱਥ ਜਾਂ ਅਯੋਗ ਕਰੋ। ਜੇਕਰ ਕਿਰਿਆਸ਼ੀਲ ਹੈ 'template', 'content'ਅਤੇ 'title'ਵਿਕਲਪਾਂ ਨੂੰ ਰੋਗਾਣੂ-ਮੁਕਤ ਕੀਤਾ ਜਾਵੇਗਾ। ਸਾਡੇ JavaScript ਦਸਤਾਵੇਜ਼ਾਂ ਵਿੱਚ ਸੈਨੀਟਾਈਜ਼ਰ ਸੈਕਸ਼ਨ ਦੇਖੋ ।
allowList ਵਸਤੂ ਪੂਰਵ-ਨਿਰਧਾਰਤ ਮੁੱਲ ਉਹ ਵਸਤੂ ਜਿਸ ਵਿੱਚ ਪ੍ਰਵਾਨਿਤ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਅਤੇ ਟੈਗ ਸ਼ਾਮਲ ਹਨ
sanitizeFn null | ਫੰਕਸ਼ਨ null ਇੱਥੇ ਤੁਸੀਂ ਆਪਣੇ ਖੁਦ ਦੇ ਸੈਨੀਟਾਈਜ਼ ਫੰਕਸ਼ਨ ਦੀ ਸਪਲਾਈ ਕਰ ਸਕਦੇ ਹੋ। ਇਹ ਲਾਭਦਾਇਕ ਹੋ ਸਕਦਾ ਹੈ ਜੇਕਰ ਤੁਸੀਂ ਸਵੱਛਤਾ ਕਰਨ ਲਈ ਸਮਰਪਿਤ ਲਾਇਬ੍ਰੇਰੀ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਪਸੰਦ ਕਰਦੇ ਹੋ।
offset ਐਰੇ | ਸਤਰ | ਫੰਕਸ਼ਨ [0, 8]

ਇਸਦੇ ਟੀਚੇ ਦੇ ਅਨੁਸਾਰ ਪੌਪਓਵਰ ਦਾ ਆਫਸੈੱਟ। ਤੁਸੀਂ ਕਾਮੇ ਨਾਲ ਵੱਖ ਕੀਤੇ ਮੁੱਲਾਂ ਨਾਲ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਵਿੱਚ ਇੱਕ ਸਤਰ ਪਾਸ ਕਰ ਸਕਦੇ ਹੋ ਜਿਵੇਂ ਕਿ:data-bs-offset="10,20"

ਜਦੋਂ ਇੱਕ ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਆਫਸੈੱਟ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਪੋਪਰ ਪਲੇਸਮੈਂਟ, ਸੰਦਰਭ, ਅਤੇ ਪੌਪਰ ਇਸਦੀ ਪਹਿਲੀ ਦਲੀਲ ਦੇ ਰੂਪ ਵਿੱਚ ਇੱਕ ਵਸਤੂ ਨਾਲ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ। ਟਰਿਗਰਿੰਗ ਐਲੀਮੈਂਟ DOM ਨੋਡ ਨੂੰ ਦੂਜੀ ਆਰਗੂਮੈਂਟ ਵਜੋਂ ਪਾਸ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਫੰਕਸ਼ਨ ਨੂੰ ਦੋ ਨੰਬਰਾਂ ਦੇ ਨਾਲ ਇੱਕ ਐਰੇ ਵਾਪਸ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ: .[skidding, distance]

ਵਧੇਰੇ ਜਾਣਕਾਰੀ ਲਈ ਪੌਪਰ ਦੇ ਆਫਸੈੱਟ ਦਸਤਾਵੇਜ਼ਾਂ ਨੂੰ ਵੇਖੋ ।

popperConfig null | ਵਸਤੂ | ਫੰਕਸ਼ਨ null

ਬੂਟਸਟਰੈਪ ਦੀ ਡਿਫਾਲਟ ਪੋਪਰ ਕੌਂਫਿਗਰੇਸ਼ਨ ਨੂੰ ਬਦਲਣ ਲਈ, ਪੌਪਰ ਦੀ ਸੰਰਚਨਾ ਵੇਖੋ ।

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

ਵਿਅਕਤੀਗਤ ਪੌਪਓਵਰਾਂ ਲਈ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ

ਵਿਅਕਤੀਗਤ ਪੌਪਓਵਰਾਂ ਲਈ ਵਿਕਲਪਾਂ ਨੂੰ ਵਿਕਲਪਿਕ ਤੌਰ 'ਤੇ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਦੁਆਰਾ ਨਿਰਧਾਰਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਉੱਪਰ ਦੱਸਿਆ ਗਿਆ ਹੈ।

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

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

ਢੰਗ

ਅਸਿੰਕ੍ਰੋਨਸ ਵਿਧੀਆਂ ਅਤੇ ਤਬਦੀਲੀਆਂ

ਸਾਰੀਆਂ API ਵਿਧੀਆਂ ਅਸਿੰਕ੍ਰੋਨਸ ਹਨ ਅਤੇ ਇੱਕ ਤਬਦੀਲੀ ਸ਼ੁਰੂ ਕਰਦੀਆਂ ਹਨ । ਪਰਿਵਰਤਨ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹੀ ਉਹ ਕਾਲਰ ਕੋਲ ਵਾਪਸ ਆਉਂਦੇ ਹਨ ਪਰ ਇਸ ਦੇ ਖਤਮ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ । ਇਸ ਤੋਂ ਇਲਾਵਾ, ਪਰਿਵਰਤਨ ਕਰਨ ਵਾਲੇ ਹਿੱਸੇ 'ਤੇ ਇੱਕ ਢੰਗ ਕਾਲ ਨੂੰ ਅਣਡਿੱਠ ਕੀਤਾ ਜਾਵੇਗਾ

ਹੋਰ ਜਾਣਕਾਰੀ ਲਈ ਸਾਡੇ JavaScript ਦਸਤਾਵੇਜ਼ ਵੇਖੋ

ਦਿਖਾਓ

ਕਿਸੇ ਤੱਤ ਦੇ ਪੌਪਓਵਰ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ। ਪੌਪਓਵਰ ਅਸਲ ਵਿੱਚ ਦਿਖਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ (ਭਾਵ shown.bs.popoverਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)। ਇਸਨੂੰ ਪੌਪਓਵਰ ਦਾ "ਮੈਨੁਅਲ" ਟ੍ਰਿਗਰਿੰਗ ਮੰਨਿਆ ਜਾਂਦਾ ਹੈ। Popovers ਜਿਨ੍ਹਾਂ ਦਾ ਸਿਰਲੇਖ ਅਤੇ ਸਮੱਗਰੀ ਦੋਵੇਂ ਜ਼ੀਰੋ-ਲੰਬਾਈ ਵਾਲੇ ਹਨ, ਕਦੇ ਵੀ ਪ੍ਰਦਰਸ਼ਿਤ ਨਹੀਂ ਹੁੰਦੇ ਹਨ।

myPopover.show()

ਓਹਲੇ

ਕਿਸੇ ਤੱਤ ਦੇ ਪੌਪਓਵਰ ਨੂੰ ਲੁਕਾਉਂਦਾ ਹੈ। ਪੌਪਓਵਰ ਅਸਲ ਵਿੱਚ ਲੁਕਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ (ਭਾਵ hidden.bs.popoverਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)। ਇਸਨੂੰ ਪੌਪਓਵਰ ਦਾ "ਮੈਨੁਅਲ" ਟ੍ਰਿਗਰਿੰਗ ਮੰਨਿਆ ਜਾਂਦਾ ਹੈ।

myPopover.hide()

ਟੌਗਲ

ਕਿਸੇ ਤੱਤ ਦੇ ਪੌਪਓਵਰ ਨੂੰ ਟੌਗਲ ਕਰਦਾ ਹੈ। ਪੌਪਓਵਰ ਅਸਲ ਵਿੱਚ ਦਿਖਾਏ ਜਾਂ ਲੁਕਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ (ਭਾਵ shown.bs.popoverਜਾਂ hidden.bs.popoverਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)। ਇਸਨੂੰ ਪੌਪਓਵਰ ਦਾ "ਮੈਨੁਅਲ" ਟ੍ਰਿਗਰਿੰਗ ਮੰਨਿਆ ਜਾਂਦਾ ਹੈ।

myPopover.toggle()

ਨਿਪਟਾਰਾ

ਇੱਕ ਤੱਤ ਦੇ ਪੌਪਓਵਰ ਨੂੰ ਲੁਕਾਉਂਦਾ ਹੈ ਅਤੇ ਨਸ਼ਟ ਕਰਦਾ ਹੈ (DOM ਤੱਤ 'ਤੇ ਸਟੋਰ ਕੀਤੇ ਡੇਟਾ ਨੂੰ ਹਟਾਉਂਦਾ ਹੈ)। ਡੈਲੀਗੇਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਨ ਵਾਲੇ ਪੌਪਓਵਰ (ਜੋ ਵਿਕਲਪ ਦੀ ਵਰਤੋਂ ਕਰਕੇselector ਬਣਾਏ ਗਏ ਹਨ ) ਨੂੰ ਵੰਸ਼ਜ ਟਰਿੱਗਰ ਤੱਤਾਂ 'ਤੇ ਵਿਅਕਤੀਗਤ ਤੌਰ 'ਤੇ ਨਸ਼ਟ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।

myPopover.dispose()

ਯੋਗ ਕਰੋ

ਇੱਕ ਤੱਤ ਦੇ ਪੌਪਓਵਰ ਨੂੰ ਦਿਖਾਉਣ ਦੀ ਸਮਰੱਥਾ ਦਿੰਦਾ ਹੈ। ਪੌਪਓਵਰ ਡਿਫੌਲਟ ਰੂਪ ਵਿੱਚ ਸਮਰੱਥ ਹੁੰਦੇ ਹਨ।

myPopover.enable()

ਅਯੋਗ

ਕਿਸੇ ਤੱਤ ਦੇ ਪੌਪਓਵਰ ਨੂੰ ਦਿਖਾਉਣ ਦੀ ਯੋਗਤਾ ਨੂੰ ਹਟਾਉਂਦਾ ਹੈ। ਪੌਪਓਵਰ ਤਾਂ ਹੀ ਵਿਖਾਇਆ ਜਾ ਸਕੇਗਾ ਜੇਕਰ ਇਹ ਮੁੜ-ਸਮਰੱਥ ਹੋਵੇ।

myPopover.disable()

toggleEnabled

ਕਿਸੇ ਤੱਤ ਦੇ ਪੌਪਓਵਰ ਨੂੰ ਦਿਖਾਉਣ ਜਾਂ ਲੁਕਾਏ ਜਾਣ ਦੀ ਯੋਗਤਾ ਨੂੰ ਟੌਗਲ ਕਰਦਾ ਹੈ।

myPopover.toggleEnabled()

ਅੱਪਡੇਟ

ਕਿਸੇ ਤੱਤ ਦੇ ਪੌਪਓਵਰ ਦੀ ਸਥਿਤੀ ਨੂੰ ਅੱਪਡੇਟ ਕਰਦਾ ਹੈ।

myPopover.update()

getInstance

ਸਥਿਰ ਵਿਧੀ ਜੋ ਤੁਹਾਨੂੰ ਇੱਕ DOM ਤੱਤ ਨਾਲ ਸੰਬੰਧਿਤ ਪੌਪਓਵਰ ਉਦਾਹਰਨ ਪ੍ਰਾਪਤ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

getOrCreateInstance

ਸਥਿਰ ਵਿਧੀ ਜੋ ਤੁਹਾਨੂੰ ਇੱਕ DOM ਤੱਤ ਨਾਲ ਸੰਬੰਧਿਤ ਪੌਪਓਵਰ ਉਦਾਹਰਨ ਪ੍ਰਾਪਤ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੀ ਹੈ, ਜਾਂ ਇੱਕ ਨਵਾਂ ਬਣਾਉਣ ਦੀ ਸਥਿਤੀ ਵਿੱਚ ਇਹ ਸ਼ੁਰੂ ਨਹੀਂ ਕੀਤਾ ਗਿਆ ਸੀ

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

ਸਮਾਗਮ

ਘਟਨਾ ਦੀ ਕਿਸਮ ਵਰਣਨ
show.bs.popover ਇਹ ਘਟਨਾ ਤੁਰੰਤ ਫਾਇਰ ਹੋ ਜਾਂਦੀ ਹੈ ਜਦੋਂ showਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ।
ਦਿਖਾਇਆ ਗਿਆ.bs.popover ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਪੌਪਓਵਰ ਉਪਭੋਗਤਾ ਲਈ ਦ੍ਰਿਸ਼ਮਾਨ ਬਣਾਇਆ ਜਾਂਦਾ ਹੈ (CSS ਪਰਿਵਰਤਨ ਪੂਰਾ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)।
hide.bs.popover ਇਸ ਇਵੈਂਟ ਨੂੰ ਤੁਰੰਤ ਫਾਇਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਜਦੋਂ hideਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ।
hidden.bs.popover ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਪੌਪਓਵਰ ਉਪਭੋਗਤਾ ਤੋਂ ਛੁਪਿਆ ਹੋਇਆ ਹੈ (CSS ਪਰਿਵਰਤਨ ਪੂਰਾ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)।
inserted.bs.popover ਇਹ ਇਵੈਂਟ ਇਵੈਂਟ ਤੋਂ ਬਾਅਦ ਫਾਇਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ show.bs.popoverਜਦੋਂ ਪੋਪਓਵਰ ਟੈਂਪਲੇਟ ਨੂੰ DOM ਵਿੱਚ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ।
var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})