ਪੋਪੋਵਰਸ

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

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

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

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

ਡਿਫੌਲਟ ਰੂਪ ਵਿੱਚ, ਇਹ ਕੰਪੋਨੈਂਟ ਬਿਲਟ-ਇਨ ਕੰਟੈਂਟ ਸੈਨੀਟਾਈਜ਼ਰ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ, ਜੋ ਕਿਸੇ ਵੀ HTML ਐਲੀਮੈਂਟਸ ਨੂੰ ਬਾਹਰ ਕੱਢਦਾ ਹੈ ਜਿਸਦੀ ਸਪੱਸ਼ਟ ਤੌਰ 'ਤੇ ਇਜਾਜ਼ਤ ਨਹੀਂ ਹੈ। ਹੋਰ ਵੇਰਵਿਆਂ ਲਈ ਸਾਡੇ JavaScript ਦਸਤਾਵੇਜ਼ਾਂ ਵਿੱਚ ਸੈਨੀਟਾਈਜ਼ਰ ਸੈਕਸ਼ਨ ਦੇਖੋ ।

ਇਸ ਕੰਪੋਨੈਂਟ ਦਾ ਐਨੀਮੇਸ਼ਨ ਪ੍ਰਭਾਵ prefers-reduced-motionਮੀਡੀਆ ਪੁੱਛਗਿੱਛ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ। ਸਾਡੇ ਪਹੁੰਚਯੋਗਤਾ ਦਸਤਾਵੇਜ਼ਾਂ ਦੇ ਘਟਾਏ ਗਏ ਮੋਸ਼ਨ ਭਾਗ ਨੂੰ ਦੇਖੋ ।

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

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

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

$(function () {
  $('[data-toggle="popover"]').popover()
})

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

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

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

ਉਦਾਹਰਨ

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

ਚਾਰ ਦਿਸ਼ਾਵਾਂ

ਚਾਰ ਵਿਕਲਪ ਉਪਲਬਧ ਹਨ: ਉੱਪਰ, ਸੱਜੇ, ਹੇਠਾਂ, ਅਤੇ ਖੱਬਾ ਇਕਸਾਰ।

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

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

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

ਅਗਲੇ-ਕਲਿੱਕ 'ਤੇ ਖਾਰਜ ਕਰਨ ਲਈ ਖਾਸ ਮਾਰਕਅੱਪ ਦੀ ਲੋੜ ਹੈ

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

ਬਰਖਾਸਤ ਪੌਪਓਵਰ

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

$('.popover-dismiss').popover({
  trigger: 'focus'
})

ਅਯੋਗ ਤੱਤ

ਵਿਸ਼ੇਸ਼ਤਾ ਵਾਲੇ ਤੱਤ disabledਪਰਸਪਰ ਪ੍ਰਭਾਵੀ ਨਹੀਂ ਹਨ, ਭਾਵ ਉਪਭੋਗਤਾ ਇੱਕ ਪੌਪਓਵਰ (ਜਾਂ ਟੂਲਟਿਪ) ਨੂੰ ਟ੍ਰਿਗਰ ਕਰਨ ਲਈ ਉਹਨਾਂ ਨੂੰ ਹੋਵਰ ਜਾਂ ਕਲਿੱਕ ਨਹੀਂ ਕਰ ਸਕਦੇ ਹਨ। ਇੱਕ ਹੱਲ ਵਜੋਂ, ਤੁਸੀਂ ਇੱਕ ਰੈਪਰ ਤੋਂ ਪੌਪਓਵਰ ਨੂੰ ਟਰਿੱਗਰ ਕਰਨਾ ਚਾਹੋਗੇ <div>ਜਾਂ ਅਯੋਗ ਐਲੀਮੈਂਟ ਉੱਤੇ <span>ਓਵਰਰਾਈਡ ਕਰਨਾ ਚਾਹੋਗੇ।pointer-events

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

<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

ਵਰਤੋਂ

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

$('#example').popover(options)

GPU ਪ੍ਰਵੇਗ

GPU ਪ੍ਰਵੇਗ ਅਤੇ ਇੱਕ ਸੋਧਿਆ ਸਿਸਟਮ DPI ਦੇ ਕਾਰਨ ਵਿੰਡੋਜ਼ 10 ਡਿਵਾਈਸਾਂ 'ਤੇ ਪੌਪਓਵਰ ਕਈ ਵਾਰ ਧੁੰਦਲੇ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ। v4 ਵਿੱਚ ਇਸਦਾ ਹੱਲ ਤੁਹਾਡੇ ਪੌਪਓਵਰਾਂ 'ਤੇ ਲੋੜ ਅਨੁਸਾਰ GPU ਪ੍ਰਵੇਗ ਨੂੰ ਅਯੋਗ ਕਰਨਾ ਹੈ।

ਸੁਝਾਏ ਗਏ ਹੱਲ:

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))

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

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

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

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

ਵਿਕਲਪ

ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-animation=""।

ਨੋਟ ਕਰੋ ਕਿ ਸੁਰੱਖਿਆ ਕਾਰਨਾਂ ਕਰਕੇ sanitize, sanitizeFnਅਤੇ whiteListਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸਪਲਾਈ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।

ਨਾਮ	ਟਾਈਪ ਕਰੋ	ਡਿਫਾਲਟ	ਵਰਣਨ
ਐਨੀਮੇਸ਼ਨ	ਬੁਲੀਅਨ	ਸੱਚ ਹੈ	ਪੌਪਓਵਰ ਲਈ ਇੱਕ CSS ਫੇਡ ਤਬਦੀਲੀ ਲਾਗੂ ਕਰੋ
ਕੰਟੇਨਰ	ਸਤਰ \| ਤੱਤ \| ਝੂਠਾ	ਝੂਠਾ	ਪੌਪਓਵਰ ਨੂੰ ਕਿਸੇ ਖਾਸ ਤੱਤ ਨਾਲ ਜੋੜਦਾ ਹੈ। ਉਦਾਹਰਨ: `container: 'body'`. ਇਹ ਵਿਕਲਪ ਖਾਸ ਤੌਰ 'ਤੇ ਲਾਭਦਾਇਕ ਹੈ ਕਿਉਂਕਿ ਇਹ ਤੁਹਾਨੂੰ ਡੌਕੂਮੈਂਟ ਦੇ ਪ੍ਰਵਾਹ ਵਿੱਚ ਪੋਪਓਵਰ ਨੂੰ ਟਰਿਗਰਿੰਗ ਐਲੀਮੈਂਟ ਦੇ ਨੇੜੇ ਰੱਖਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ - ਜੋ ਪੌਪਓਵਰ ਨੂੰ ਵਿੰਡੋ ਰੀਸਾਈਜ਼ ਦੌਰਾਨ ਟਰਿਗਰਿੰਗ ਐਲੀਮੈਂਟ ਤੋਂ ਦੂਰ ਜਾਣ ਤੋਂ ਰੋਕਦਾ ਹੈ।
ਸਮੱਗਰੀ	ਸਤਰ \| ਤੱਤ \| ਫੰਕਸ਼ਨ	''	ਜੇਕਰ `data-content`ਵਿਸ਼ੇਸ਼ਤਾ ਮੌਜੂਦ ਨਹੀਂ ਹੈ ਤਾਂ ਪੂਰਵ-ਨਿਰਧਾਰਤ ਸਮੱਗਰੀ ਮੁੱਲ। ਜੇਕਰ ਕੋਈ ਫੰਕਸ਼ਨ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਉਸ `this`ਤੱਤ ਦੇ ਸੰਦਰਭ ਦੇ ਨਾਲ ਬੁਲਾਇਆ ਜਾਵੇਗਾ ਜਿਸ ਨਾਲ ਪੌਪਓਵਰ ਜੁੜਿਆ ਹੈ।
ਦੇਰੀ	ਨੰਬਰ \| ਵਸਤੂ	0	ਪੌਪਓਵਰ (ms) ਨੂੰ ਦਿਖਾਉਣ ਅਤੇ ਲੁਕਾਉਣ ਵਿੱਚ ਦੇਰੀ - ਮੈਨੂਅਲ ਟਰਿੱਗਰ ਕਿਸਮ 'ਤੇ ਲਾਗੂ ਨਹੀਂ ਹੁੰਦਾ ਜੇਕਰ ਕੋਈ ਨੰਬਰ ਸਪਲਾਈ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਦੇਰੀ ਨੂੰ ਲੁਕਾਉਣ/ਸ਼ੋਅ ਦੋਵਾਂ ਲਈ ਲਾਗੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਵਸਤੂ ਬਣਤਰ ਹੈ:`delay: { "show": 500, "hide": 100 }`
html	ਬੁਲੀਅਨ	ਝੂਠਾ	ਪੋਪਓਵਰ ਵਿੱਚ HTML ਪਾਓ। ਜੇਕਰ ਗਲਤ ਹੈ, ਤਾਂ jQuery ਦੀ `text`ਵਿਧੀ DOM ਵਿੱਚ ਸਮੱਗਰੀ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਵਰਤੀ ਜਾਵੇਗੀ। ਜੇਕਰ ਤੁਸੀਂ XSS ਹਮਲਿਆਂ ਬਾਰੇ ਚਿੰਤਤ ਹੋ ਤਾਂ ਟੈਕਸਟ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਪਲੇਸਮੈਂਟ	ਸਤਰ \| ਫੰਕਸ਼ਨ	'ਸਹੀ'	ਪੌਪਓਵਰ ਦੀ ਸਥਿਤੀ ਕਿਵੇਂ ਕਰੀਏ - ਆਟੋ \| ਸਿਖਰ \| ਥੱਲੇ \| ਖੱਬੇ \| ਸਹੀ ਜਦੋਂ `auto`ਨਿਸ਼ਚਿਤ ਕੀਤਾ ਗਿਆ ਹੈ, ਇਹ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਪੌਪਓਵਰ ਨੂੰ ਮੁੜ ਦਿਸ਼ਾ ਦੇਵੇਗਾ। ਜਦੋਂ ਇੱਕ ਫੰਕਸ਼ਨ ਪਲੇਸਮੈਂਟ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਪੋਪੋਵਰ DOM ਨੋਡ ਨੂੰ ਇਸਦੇ ਪਹਿਲੇ ਆਰਗੂਮੈਂਟ ਦੇ ਰੂਪ ਵਿੱਚ ਅਤੇ ਟਰਿਗਰਿੰਗ ਐਲੀਮੈਂਟ DOM ਨੋਡ ਨੂੰ ਇਸਦੇ ਦੂਜੇ ਦੇ ਰੂਪ ਵਿੱਚ ਕਿਹਾ ਜਾਂਦਾ ਹੈ। `this`ਸੰਦਰਭ ਪੌਪਓਵਰ ਉਦਾਹਰਨ ਲਈ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ ।
ਚੋਣਕਾਰ	ਸਤਰ \| ਝੂਠਾ	ਝੂਠਾ	ਜੇਕਰ ਇੱਕ ਚੋਣਕਾਰ ਪ੍ਰਦਾਨ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਪੌਪਓਵਰ ਵਸਤੂਆਂ ਨੂੰ ਨਿਰਧਾਰਤ ਟੀਚਿਆਂ ਨੂੰ ਸੌਂਪਿਆ ਜਾਵੇਗਾ। ਅਭਿਆਸ ਵਿੱਚ, ਇਸਦੀ ਵਰਤੋਂ ਗਤੀਸ਼ੀਲ HTML ਸਮੱਗਰੀ ਨੂੰ ਪੌਪਓਵਰ ਜੋੜਨ ਲਈ ਯੋਗ ਬਣਾਉਣ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਹ ਅਤੇ ਇੱਕ ਜਾਣਕਾਰੀ ਭਰਪੂਰ ਉਦਾਹਰਨ ਦੇਖੋ ।
ਟੈਮਪਲੇਟ	ਸਤਰ	`'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'`	ਪੌਪਓਵਰ ਬਣਾਉਣ ਵੇਲੇ ਵਰਤਣ ਲਈ ਆਧਾਰ HTML। ਪੌਪਓਵਰ `title`ਨੂੰ ਵਿੱਚ ਟੀਕਾ ਲਗਾਇਆ ਜਾਵੇਗਾ `.popover-header`। ਪੌਪਓਵਰ `content`ਨੂੰ ਵਿੱਚ ਟੀਕਾ ਲਗਾਇਆ ਜਾਵੇਗਾ `.popover-body`। `.arrow`ਪੌਪਓਵਰ ਦਾ ਤੀਰ ਬਣ ਜਾਵੇਗਾ। ਸਭ ਤੋਂ ਬਾਹਰਲੇ ਰੈਪਰ ਤੱਤ ਵਿੱਚ `.popover`ਕਲਾਸ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ।
ਸਿਰਲੇਖ	ਸਤਰ \| ਤੱਤ \| ਫੰਕਸ਼ਨ	''	ਜੇਕਰ `title`ਵਿਸ਼ੇਸ਼ਤਾ ਮੌਜੂਦ ਨਹੀਂ ਹੈ ਤਾਂ ਪੂਰਵ-ਨਿਰਧਾਰਤ ਸਿਰਲੇਖ ਮੁੱਲ। ਜੇਕਰ ਕੋਈ ਫੰਕਸ਼ਨ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਉਸ `this`ਤੱਤ ਦੇ ਸੰਦਰਭ ਦੇ ਨਾਲ ਬੁਲਾਇਆ ਜਾਵੇਗਾ ਜਿਸ ਨਾਲ ਪੌਪਓਵਰ ਜੁੜਿਆ ਹੈ।
ਟਰਿੱਗਰ	ਸਤਰ	'ਕਲਿੱਕ'	ਪੌਪਓਵਰ ਕਿਵੇਂ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ - ਕਲਿੱਕ ਕਰੋ \| ਹੋਵਰ \| ਫੋਕਸ \| ਮੈਨੁਅਲ ਤੁਸੀਂ ਕਈ ਟਰਿਗਰ ਪਾਸ ਕਰ ਸਕਦੇ ਹੋ; ਉਹਨਾਂ ਨੂੰ ਇੱਕ ਸਪੇਸ ਨਾਲ ਵੱਖ ਕਰੋ। `manual`ਕਿਸੇ ਹੋਰ ਟਰਿੱਗਰ ਨਾਲ ਜੋੜਿਆ ਨਹੀਂ ਜਾ ਸਕਦਾ।
ਆਫਸੈੱਟ	ਨੰਬਰ \| ਸਤਰ	0	ਇਸਦੇ ਟੀਚੇ ਦੇ ਅਨੁਸਾਰ ਪੌਪਓਵਰ ਦਾ ਆਫਸੈੱਟ। ਵਧੇਰੇ ਜਾਣਕਾਰੀ ਲਈ ਪੌਪਰ ਦੇ ਆਫਸੈੱਟ ਦਸਤਾਵੇਜ਼ਾਂ ਨੂੰ ਵੇਖੋ ।
ਫਾਲਬੈਕ ਪਲੇਸਮੈਂਟ	ਸਤਰ \| ਐਰੇ	'ਫਲਿਪ'	ਪੌਪਰ ਫਾਲਬੈਕ 'ਤੇ ਕਿਹੜੀ ਸਥਿਤੀ ਦੀ ਵਰਤੋਂ ਕਰੇਗਾ, ਇਹ ਨਿਰਧਾਰਤ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿਓ। ਵਧੇਰੇ ਜਾਣਕਾਰੀ ਲਈ ਪੌਪਰ ਦੇ ਵਿਵਹਾਰ ਦੇ ਦਸਤਾਵੇਜ਼ਾਂ ਨੂੰ ਵੇਖੋ
ਕਸਟਮ ਕਲਾਸ	ਸਤਰ \| ਫੰਕਸ਼ਨ	''	ਪੌਪਓਵਰ ਵਿੱਚ ਕਲਾਸਾਂ ਸ਼ਾਮਲ ਕਰੋ ਜਦੋਂ ਇਹ ਦਿਖਾਇਆ ਜਾਂਦਾ ਹੈ। ਨੋਟ ਕਰੋ ਕਿ ਇਹ ਕਲਾਸਾਂ ਟੈਮਪਲੇਟ ਵਿੱਚ ਦਰਸਾਏ ਗਏ ਕਿਸੇ ਵੀ ਕਲਾਸ ਤੋਂ ਇਲਾਵਾ ਜੋੜੀਆਂ ਜਾਣਗੀਆਂ। ਕਈ ਕਲਾਸਾਂ ਜੋੜਨ ਲਈ, ਉਹਨਾਂ ਨੂੰ ਖਾਲੀ ਥਾਂਵਾਂ ਨਾਲ ਵੱਖ ਕਰੋ: `'a b'`. ਤੁਸੀਂ ਇੱਕ ਫੰਕਸ਼ਨ ਵੀ ਪਾਸ ਕਰ ਸਕਦੇ ਹੋ ਜਿਸ ਵਿੱਚ ਵਾਧੂ ਕਲਾਸ ਨਾਮਾਂ ਵਾਲੀ ਸਿੰਗਲ ਸਤਰ ਵਾਪਸ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ।
ਸੀਮਾ	ਸਤਰ \| ਤੱਤ	'ਸਕ੍ਰੌਲ ਪੇਰੈਂਟ'	ਪੌਪਓਵਰ ਦੀ ਓਵਰਫਲੋ ਸੀਮਾ ਸੀਮਾ। `'viewport'`, `'window'`, `'scrollParent'`, ਜਾਂ ਇੱਕ HTMLElement ਸੰਦਰਭ (ਸਿਰਫ਼ JavaScript) ਦੇ ਮੁੱਲਾਂ ਨੂੰ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ । ਵਧੇਰੇ ਜਾਣਕਾਰੀ ਲਈ ਪੌਪਰ ਦੇ ਰੋਕਥਾਮ ਓਵਰਫਲੋ ਡੌਕਸ ਵੇਖੋ ।
ਰੋਗਾਣੂ-ਮੁਕਤ ਕਰਨਾ	ਬੁਲੀਅਨ	ਸੱਚ ਹੈ	ਸੈਨੀਟਾਈਜ਼ੇਸ਼ਨ ਨੂੰ ਸਮਰੱਥ ਜਾਂ ਅਯੋਗ ਕਰੋ। ਜੇਕਰ ਕਿਰਿਆਸ਼ੀਲ ਹੈ `'template'`, `'content'`ਅਤੇ `'title'`ਵਿਕਲਪਾਂ ਨੂੰ ਰੋਗਾਣੂ-ਮੁਕਤ ਕੀਤਾ ਜਾਵੇਗਾ। ਸਾਡੇ JavaScript ਦਸਤਾਵੇਜ਼ਾਂ ਵਿੱਚ ਸੈਨੀਟਾਈਜ਼ਰ ਸੈਕਸ਼ਨ ਦੇਖੋ ।
ਵ੍ਹਾਈਟਲਿਸਟ	ਵਸਤੂ	ਪੂਰਵ-ਨਿਰਧਾਰਤ ਮੁੱਲ	ਉਹ ਵਸਤੂ ਜਿਸ ਵਿੱਚ ਪ੍ਰਵਾਨਿਤ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਅਤੇ ਟੈਗ ਸ਼ਾਮਲ ਹਨ
sanitizeFn	null \| ਫੰਕਸ਼ਨ	null	ਇੱਥੇ ਤੁਸੀਂ ਆਪਣੇ ਖੁਦ ਦੇ ਸੈਨੀਟਾਈਜ਼ ਫੰਕਸ਼ਨ ਦੀ ਸਪਲਾਈ ਕਰ ਸਕਦੇ ਹੋ। ਇਹ ਲਾਭਦਾਇਕ ਹੋ ਸਕਦਾ ਹੈ ਜੇਕਰ ਤੁਸੀਂ ਸਵੱਛਤਾ ਕਰਨ ਲਈ ਸਮਰਪਿਤ ਲਾਇਬ੍ਰੇਰੀ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਪਸੰਦ ਕਰਦੇ ਹੋ।
popperConfig	null \| ਵਸਤੂ	null	ਬੂਟਸਟਰੈਪ ਦੀ ਡਿਫਾਲਟ ਪੋਪਰ ਸੰਰਚਨਾ ਨੂੰ ਬਦਲਣ ਲਈ, ਪੌਪਰ ਦੀ ਸੰਰਚਨਾ ਵੇਖੋ

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

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

ਢੰਗ

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

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

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

`$().popover(options)`

ਇੱਕ ਤੱਤ ਸੰਗ੍ਰਹਿ ਲਈ ਪੌਪਓਵਰ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ।

`.popover('show')`

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

$('#element').popover('show')

`.popover('hide')`

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

$('#element').popover('hide')

`.popover('toggle')`

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

$('#element').popover('toggle')

`.popover('dispose')`

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

$('#element').popover('dispose')

`.popover('enable')`

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

$('#element').popover('enable')

`.popover('disable')`

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

$('#element').popover('disable')

`.popover('toggleEnabled')`

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

$('#element').popover('toggleEnabled')

`.popover('update')`

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

$('#element').popover('update')

ਸਮਾਗਮ

ਘਟਨਾ ਦੀ ਕਿਸਮ	ਵਰਣਨ
show.bs.popover	ਇਹ ਘਟਨਾ ਤੁਰੰਤ ਫਾਇਰ ਹੋ ਜਾਂਦੀ ਹੈ ਜਦੋਂ `show`ਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ।
ਦਿਖਾਇਆ ਗਿਆ.bs.popover	ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਪੌਪਓਵਰ ਉਪਭੋਗਤਾ ਲਈ ਦ੍ਰਿਸ਼ਮਾਨ ਬਣਾਇਆ ਜਾਂਦਾ ਹੈ (CSS ਪਰਿਵਰਤਨ ਪੂਰਾ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)।
hide.bs.popover	ਇਸ ਇਵੈਂਟ ਨੂੰ ਤੁਰੰਤ ਫਾਇਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਜਦੋਂ `hide`ਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ।
hidden.bs.popover	ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਪੌਪਓਵਰ ਉਪਭੋਗਤਾ ਤੋਂ ਛੁਪਿਆ ਹੋਇਆ ਹੈ (CSS ਪਰਿਵਰਤਨ ਪੂਰਾ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)।
inserted.bs.popover	ਇਹ ਇਵੈਂਟ ਇਵੈਂਟ ਤੋਂ ਬਾਅਦ ਫਾਇਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ `show.bs.popover`ਜਦੋਂ ਪੋਪਓਵਰ ਟੈਂਪਲੇਟ ਨੂੰ DOM ਵਿੱਚ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ।

$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})