ਪੋਪੋਵਰਸ

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

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

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

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

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

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

ਇੱਕ ਪੰਨੇ 'ਤੇ ਸਾਰੇ ਪੌਪਓਵਰਾਂ ਨੂੰ ਸ਼ੁਰੂ ਕਰਨ ਦਾ ਇੱਕ ਤਰੀਕਾ ਉਹਨਾਂ ਦੀ 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="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

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

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

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

ਵਿਕਲਪ

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

ਢੰਗ

$().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')

ਸਮਾਗਮ

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