ਪੋਪੋਵਰਸ
ਬੂਟਸਟਰੈਪ ਪੌਪਓਵਰ ਨੂੰ ਜੋੜਨ ਲਈ ਦਸਤਾਵੇਜ਼ ਅਤੇ ਉਦਾਹਰਨਾਂ, ਜਿਵੇਂ ਕਿ 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
- ਜਦੋਂ ਐਂਕਰਾਂ ਤੋਂ ਸ਼ੁਰੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਜੋ ਕਈ ਲਾਈਨਾਂ ਵਿੱਚ ਲਪੇਟਦੇ ਹਨ, ਤਾਂ ਪੌਪਓਵਰ ਐਂਕਰਾਂ ਦੀ ਸਮੁੱਚੀ ਚੌੜਾਈ ਦੇ ਵਿਚਕਾਰ ਕੇਂਦਰਿਤ ਹੋਣਗੇ। ਇਸ ਵਿਵਹਾਰ ਤੋਂ ਬਚਣ ਲਈ
.text-nowrap
ਆਪਣੇ ਐੱਸ 'ਤੇ ਵਰਤੋਂ ।<a>
- DOM ਤੋਂ ਉਹਨਾਂ ਦੇ ਅਨੁਸਾਰੀ ਤੱਤਾਂ ਨੂੰ ਹਟਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਪੌਪਓਵਰ ਨੂੰ ਲੁਕਾਇਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ।
- ਇੱਕ ਸ਼ੈਡੋ DOM ਦੇ ਅੰਦਰ ਇੱਕ ਤੱਤ ਦੇ ਕਾਰਨ ਪੌਪਓਵਰ ਸ਼ੁਰੂ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ।
ਇਸ ਕੰਪੋਨੈਂਟ ਦਾ ਐਨੀਮੇਸ਼ਨ ਪ੍ਰਭਾਵ prefers-reduced-motion
ਮੀਡੀਆ ਪੁੱਛਗਿੱਛ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ। ਸਾਡੇ ਪਹੁੰਚਯੋਗਤਾ ਦਸਤਾਵੇਜ਼ਾਂ ਦੇ ਘਟਾਏ ਗਏ ਮੋਸ਼ਨ ਭਾਗ ਨੂੰ ਦੇਖੋ ।
ਇਹ ਦੇਖਣ ਲਈ ਪੜ੍ਹਦੇ ਰਹੋ ਕਿ ਪੋਪੋਵਰ ਕੁਝ ਉਦਾਹਰਣਾਂ ਨਾਲ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ।
ਉਦਾਹਰਨ: ਹਰ ਜਗ੍ਹਾ ਪੌਪਓਵਰ ਨੂੰ ਸਮਰੱਥ ਬਣਾਓ
ਇੱਕ ਪੰਨੇ 'ਤੇ ਸਾਰੇ ਪੌਪਓਵਰਾਂ ਨੂੰ ਸ਼ੁਰੂ ਕਰਨ ਦਾ ਇੱਕ ਤਰੀਕਾ ਉਹਨਾਂ ਦੀ data-toggle
ਵਿਸ਼ੇਸ਼ਤਾ ਦੁਆਰਾ ਉਹਨਾਂ ਨੂੰ ਚੁਣਨਾ ਹੋਵੇਗਾ:
ਉਦਾਹਰਨ: container
ਵਿਕਲਪ ਦੀ ਵਰਤੋਂ ਕਰਨਾ
ਜਦੋਂ ਤੁਹਾਡੇ ਕੋਲ ਇੱਕ ਪੇਰੈਂਟ ਐਲੀਮੈਂਟ 'ਤੇ ਕੁਝ ਸ਼ੈਲੀਆਂ ਹੁੰਦੀਆਂ ਹਨ ਜੋ ਪੌਪਓਵਰ ਵਿੱਚ ਦਖਲ ਦਿੰਦੀਆਂ ਹਨ, ਤਾਂ ਤੁਸੀਂ ਇੱਕ ਕਸਟਮ ਨਿਰਧਾਰਤ ਕਰਨਾ ਚਾਹੋਗੇ container
ਤਾਂ ਜੋ ਪੌਪਓਵਰ ਦਾ HTML ਉਸ ਤੱਤ ਦੇ ਅੰਦਰ ਦਿਖਾਈ ਦੇਵੇ।
ਉਦਾਹਰਨ
ਚਾਰ ਦਿਸ਼ਾਵਾਂ
ਚਾਰ ਵਿਕਲਪ ਉਪਲਬਧ ਹਨ: ਉੱਪਰ, ਸੱਜੇ, ਹੇਠਾਂ, ਅਤੇ ਖੱਬਾ ਇਕਸਾਰ।
ਅਗਲੀ ਕਲਿੱਕ 'ਤੇ ਖਾਰਜ ਕਰੋ
focus
ਟੌਗਲ ਐਲੀਮੈਂਟ ਤੋਂ ਵੱਖਰੇ ਐਲੀਮੈਂਟ ਦੇ ਉਪਭੋਗਤਾ ਦੇ ਅਗਲੇ ਕਲਿਕ 'ਤੇ ਪੌਪਓਵਰ ਨੂੰ ਖਾਰਜ ਕਰਨ ਲਈ ਟਰਿੱਗਰ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਅਗਲੇ-ਕਲਿੱਕ 'ਤੇ ਖਾਰਜ ਕਰਨ ਲਈ ਖਾਸ ਮਾਰਕਅੱਪ ਦੀ ਲੋੜ ਹੈ
ਸਹੀ ਕਰਾਸ-ਬ੍ਰਾਊਜ਼ਰ ਅਤੇ ਕਰਾਸ-ਪਲੇਟਫਾਰਮ ਵਿਹਾਰ ਲਈ, ਤੁਹਾਨੂੰ ਟੈਗ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ <a>
, ਨਾ ਕਿ <button>
ਟੈਗ, ਅਤੇ ਤੁਹਾਨੂੰ ਇੱਕ tabindex
ਵਿਸ਼���ਸ਼ਤਾ ਵੀ ਸ਼ਾਮਲ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ।
ਅਯੋਗ ਤੱਤ
ਵਿਸ਼ੇਸ਼ਤਾ ਵਾਲੇ ਤੱਤ disabled
ਪਰਸਪਰ ਪ੍ਰਭਾਵੀ ਨਹੀਂ ਹਨ, ਭਾਵ ਉਪਭੋਗਤਾ ਇੱਕ ਪੌਪਓਵਰ (ਜਾਂ ਟੂਲਟਿਪ) ਨੂੰ ਟ੍ਰਿਗਰ ਕਰਨ ਲਈ ਉਹਨਾਂ ਨੂੰ ਹੋਵਰ ਜਾਂ ਕਲਿੱਕ ਨਹੀਂ ਕਰ ਸਕਦੇ ਹਨ। ਇੱਕ ਹੱਲ ਵਜੋਂ, ਤੁਸੀਂ ਇੱਕ ਰੈਪਰ ਤੋਂ ਪੌਪਓਵਰ ਨੂੰ ਟਰਿੱਗਰ ਕਰਨਾ ਚਾਹੋਗੇ <div>
ਜਾਂ ਅਯੋਗ ਐਲੀਮੈਂਟ ਉੱਤੇ <span>
ਓਵਰਰਾਈਡ ਕਰਨਾ ਚਾਹੋਗੇ।pointer-events
ਅਯੋਗ ਪੌਪਓਵਰ ਟਰਿਗਰਸ ਲਈ, ਤੁਸੀਂ ਇਹ ਵੀ ਤਰਜੀਹ ਦੇ ਸਕਦੇ ਹੋ data-trigger="hover"
ਕਿ ਪੌਪਓਵਰ ਤੁਹਾਡੇ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਤੁਰੰਤ ਵਿਜ਼ੂਅਲ ਫੀਡਬੈਕ ਦੇ ਰੂਪ ਵਿੱਚ ਦਿਖਾਈ ਦੇਵੇ ਕਿਉਂਕਿ ਉਹ ਇੱਕ ਅਯੋਗ ਤੱਤ 'ਤੇ ਕਲਿੱਕ ਕਰਨ ਦੀ ਉਮੀਦ ਨਹੀਂ ਕਰ ਸਕਦੇ ਹਨ।
ਵਰਤੋਂ
JavaScript ਦੁਆਰਾ ਪੌਪਓਵਰ ਨੂੰ ਸਮਰੱਥ ਬਣਾਓ:
ਕੀਬੋਰਡ ਅਤੇ ਸਹਾਇਕ ਟੈਕਨਾਲੋਜੀ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਪੋਪਓਵਰ ਕੰਮ ਕਰਨਾ
ਕੀਬੋਰਡ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਤੁਹਾਡੇ ਪੌਪਓਵਰਾਂ ਨੂੰ ਸਰਗਰਮ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦੇਣ ਲਈ, ਤੁਹਾਨੂੰ ਉਹਨਾਂ ਨੂੰ ਸਿਰਫ਼ ਉਹਨਾਂ HTML ਤੱਤਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ ਜੋ ਰਵਾਇਤੀ ਤੌਰ 'ਤੇ ਕੀਬੋਰਡ-ਫੋਕਸ ਕਰਨ ਯੋਗ ਅਤੇ ਇੰਟਰਐਕਟਿਵ (ਜਿਵੇਂ ਕਿ ਲਿੰਕ ਜਾਂ ਫਾਰਮ ਨਿਯੰਤਰਣ) ਹਨ। ਹਾਲਾਂਕਿ ਆਰਬਿਟਰੇਰੀ HTML ਐਲੀਮੈਂਟਸ (ਜਿਵੇਂ ਕਿ <span>
s) ਨੂੰ tabindex="0"
ਐਟਰੀਬਿਊਟ ਜੋੜ ਕੇ ਫੋਕਸ ਕਰਨ ਯੋਗ ਬਣਾਇਆ ਜਾ ਸਕਦਾ ਹੈ, ਇਹ ਕੀਬੋਰਡ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਗੈਰ-ਇੰਟਰਐਕਟਿਵ ਐਲੀਮੈਂਟਸ 'ਤੇ ਸੰਭਾਵੀ ਤੌਰ 'ਤੇ ਤੰਗ ਕਰਨ ਵਾਲੇ ਅਤੇ ਉਲਝਣ ਵਾਲੇ ਟੈਬ ਸਟਾਪਾਂ ਨੂੰ ਜੋੜ ਦੇਵੇਗਾ, ਅਤੇ ਜ਼ਿਆਦਾਤਰ ਸਹਾਇਕ ਤਕਨੀਕਾਂ ਵਰਤਮਾਨ ਵਿੱਚ ਇਸ ਸਥਿਤੀ ਵਿੱਚ ਪੌਪਓਵਰ ਦੀ ਸਮੱਗਰੀ ਦਾ ਐਲਾਨ ਨਹੀਂ ਕਰਦੀਆਂ ਹਨ। . ਇਸ ਤੋਂ ਇਲਾਵਾ, ਆਪਣੇ ਪੌਪਓਵਰਾਂ ਲਈ ਟਰਿੱਗਰ ਦੇ ਤੌਰ 'ਤੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਭਰੋਸਾ ਨਾ hover
ਕਰੋ, ਕਿਉਂਕਿ ਇਹ ਉਹਨਾਂ ਨੂੰ ਕੀਬੋਰਡ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਟਰਿੱਗਰ ਕਰਨਾ ਅਸੰਭਵ ਬਣਾ ਦੇਵੇਗਾ।
ਜਦੋਂ ਕਿ ਤੁਸੀਂ ਵਿਕਲਪ ਦੇ ਨਾਲ ਪੋਪਓਵਰ ਵਿੱਚ ਅਮੀਰ, ਢਾਂਚਾਗਤ HTML ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ html
, ਅਸੀਂ ਜ਼ੋਰਦਾਰ ਸਿਫ਼ਾਰਿਸ਼ ਕਰਦੇ ਹਾਂ ਕਿ ਤੁਸੀਂ ਸਮੱਗਰੀ ਦੀ ਬਹੁਤ ਜ਼ਿਆਦਾ ਮਾਤਰਾ ਨੂੰ ਜੋੜਨ ਤੋਂ ਬਚੋ। ਵਰਤਮਾਨ ਵਿੱਚ ਪੌਪਵਰਸ ਦਾ ਕੰਮ ਕਰਨ ਦਾ ਤਰੀਕਾ ਇਹ ਹੈ ਕਿ, ਇੱਕ ਵਾਰ ਪ੍ਰਦਰਸ਼ਿਤ ਹੋਣ ਤੋਂ ਬਾਅਦ, ਉਹਨਾਂ ਦੀ ਸਮਗਰੀ ਨੂੰ aria-describedby
ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਨਾਲ ਟਰਿੱਗਰ ਤੱਤ ਨਾਲ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ. ਨਤੀਜੇ ਵਜੋਂ, ਪੌਪਓਵਰ ਦੀ ਸਮੁੱਚੀ ਸਮਗਰੀ ਨੂੰ ਸਹਾਇਕ ਤਕਨਾਲੋਜੀ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਇੱਕ ਲੰਬੀ, ਨਿਰਵਿਘਨ ਸਟ੍ਰੀਮ ਵਜੋਂ ਘੋਸ਼ਿਤ ਕੀਤਾ ਜਾਵੇਗਾ।
ਇਸ ਤੋਂ ਇਲਾਵਾ, ਜਦੋਂ ਕਿ ਤੁਹਾਡੇ ਪੌਪਓਵਰ ਵਿੱਚ ਇੰਟਰਐਕਟਿਵ ਨਿਯੰਤਰਣ (ਜਿਵੇਂ ਕਿ ਫਾਰਮ ਐਲੀਮੈਂਟਸ ਜਾਂ ਲਿੰਕ) ਨੂੰ ਵੀ ਸ਼ਾਮਲ ਕਰਨਾ ਸੰਭਵ ਹੈ (ਇਹਨਾਂ ਤੱਤਾਂ ਨੂੰ whiteList
ਜਾਂ ਮਨਜ਼ੂਰਸ਼ੁਦਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਅਤੇ ਟੈਗਾਂ ਵਿੱਚ ਜੋੜ ਕੇ), ਧਿਆਨ ਰੱਖੋ ਕਿ ਵਰਤਮਾਨ ਵਿੱਚ ਪੌਪਓਵਰ ਕੀਬੋਰਡ ਫੋਕਸ ਆਰਡਰ ਦਾ ਪ੍ਰਬੰਧਨ ਨਹੀਂ ਕਰਦਾ ਹੈ। ਜਦੋਂ ਇੱਕ ਕੀਬੋਰਡ ਉਪਭੋਗਤਾ ਇੱਕ ਪੌਪਓਵਰ ਖੋਲ੍ਹਦਾ ਹੈ, ਤਾਂ ਫੋਕਸ ਟਰਿੱਗਰ ਕਰਨ ਵਾਲੇ ਤੱਤ 'ਤੇ ਰਹਿੰਦਾ ਹੈ, ਅਤੇ ਜਿਵੇਂ ਕਿ ਪੌਪਓਵਰ ਆਮ ਤੌਰ 'ਤੇ ਦਸਤਾਵੇਜ਼ ਦੇ ਢਾਂਚੇ ਵਿੱਚ ਟਰਿੱਗਰ ਦੀ ਪਾਲਣਾ ਨਹੀਂ ਕਰਦਾ ਹੈ, ਇਸਦੀ ਕੋਈ ਗਾਰੰਟੀ ਨਹੀਂ ਹੈ ਕਿ ਅੱਗੇ ਵਧਣਾ/ਦਬਾਣਾTABਇੱਕ ਕੀਬੋਰਡ ਉਪਭੋਗਤਾ ਨੂੰ ਪੋਪਓਵਰ ਵਿੱਚ ਲੈ ਜਾਵੇਗਾ। ਸੰਖੇਪ ਵਿੱਚ, ਸਿਰਫ਼ ਇੱਕ ਪੌਪਓਵਰ ਵਿੱਚ ਇੰਟਰਐਕਟਿਵ ਨਿਯੰਤਰਣ ਜੋੜਨ ਨਾਲ ਕੀਬੋਰਡ ਉਪਭੋਗਤਾਵਾਂ ਅਤੇ ਸਹਾਇਕ ਤਕਨਾਲੋਜੀਆਂ ਦੇ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਇਹਨਾਂ ਨਿਯੰਤਰਣਾਂ ਨੂੰ ਪਹੁੰਚਯੋਗ/ਅਯੋਗ ਬਣਾਉਣ ਦੀ ਸੰਭਾਵਨਾ ਹੈ, ਜਾਂ ਘੱਟੋ ਘੱਟ ਇੱਕ ਤਰਕਹੀਣ ਸਮੁੱਚੇ ਫੋਕਸ ਆਰਡਰ ਲਈ ਬਣਾਉਣ ਦੀ ਸੰਭਾਵਨਾ ਹੈ। ਇਹਨਾਂ ਮਾਮਲਿਆਂ ਵਿੱਚ, ਇਸਦੀ ਬਜਾਏ ਇੱਕ ਮਾਡਲ ਡਾਇਲਾਗ ਦੀ ਵਰਤੋਂ ਕਰਨ 'ਤੇ ਵਿਚਾਰ ਕਰੋ।
ਵਿਕਲਪ
ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-
, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-animation=""
।
ਨੋਟ ਕਰੋ ਕਿ ਸੁਰੱਖਿਆ ਕਾਰਨਾਂ ਕਰਕੇ sanitize
, sanitizeFn
ਅਤੇ whiteList
ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸਪਲਾਈ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।
ਨਾਮ | ਟਾਈਪ ਕਰੋ | ਡਿਫਾਲਟ | ਵਰਣਨ |
---|---|---|---|
ਐਨੀਮੇਸ਼ਨ | ਬੁਲੀਅਨ | ਸੱਚ ਹੈ | ਪੌਪਓਵਰ ਲਈ ਇੱਕ CSS ਫੇਡ ਤਬਦੀਲੀ ਲਾਗੂ ਕਰੋ |
ਕੰਟੇਨਰ | ਸਤਰ | ਤੱਤ | ਝੂਠਾ | ਝੂਠਾ | ਪੌਪਓਵਰ ਨੂੰ ਕਿਸੇ ਖਾਸ ਤੱਤ ਨਾਲ ਜੋੜਦਾ ਹੈ। ਉਦਾਹਰਨ: |
ਸਮੱਗਰੀ | ਸਤਰ | ਤੱਤ | ਫੰਕਸ਼ਨ | '' | ਜੇਕਰ ਜੇਕਰ ਕੋਈ ਫੰਕਸ਼ਨ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਉਸ |
ਦੇਰੀ | ਨੰਬਰ | ਵਸਤੂ | 0 | ਪੌਪਓਵਰ (ms) ਨੂੰ ਦਿਖਾਉਣ ਅਤੇ ਲੁਕਾਉਣ ਵਿੱਚ ਦੇਰੀ - ਮੈਨੂਅਲ ਟਰਿੱਗਰ ਕਿਸਮ 'ਤੇ ਲਾਗੂ ਨਹੀਂ ਹੁੰਦਾ ਜੇਕਰ ਕੋਈ ਨੰਬਰ ਸਪਲਾਈ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਦੇਰੀ ਨੂੰ ਲੁਕਾਉਣ/ਸ਼ੋਅ ਦੋਵਾਂ ਲਈ ਲਾਗੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਵਸਤੂ ਬਣਤਰ ਹੈ: |
html | ਬੁਲੀਅਨ | ਝੂਠਾ | ਪੋਪਓਵਰ ਵਿੱਚ HTML ਪਾਓ। ਜੇਕਰ ਗਲਤ ਹੈ, ਤਾਂ jQuery ਦੀ text ਵਿਧੀ DOM ਵਿੱਚ ਸਮੱਗਰੀ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਵਰਤੀ ਜਾਵੇਗੀ। ਜੇਕਰ ਤੁਸੀਂ XSS ਹਮਲਿਆਂ ਬਾਰੇ ਚਿੰਤਤ ਹੋ ਤਾਂ ਟੈਕਸਟ ਦੀ ਵਰਤੋਂ ਕਰੋ। |
ਪਲੇਸਮੈਂਟ | ਸਤਰ | ਫੰਕਸ਼ਨ | 'ਸਹੀ' | ਪੌਪਓਵਰ ਦੀ ਸਥਿਤੀ ਕਿਵੇਂ ਕਰੀਏ - ਆਟੋ | ਸਿਖਰ | ਥੱਲੇ | ਖੱਬੇ | ਸਹੀ ਜਦੋਂ ਇੱਕ ਫੰਕਸ਼ਨ ਪਲੇਸਮੈਂਟ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਪੋਪੋਵਰ DOM ਨੋਡ ਨੂੰ ਇਸਦੇ ਪਹਿਲੇ ਆਰਗੂਮੈਂਟ ਦੇ ਰੂਪ ਵਿੱਚ ਅਤੇ ਟਰਿਗਰਿੰਗ ਐਲੀਮੈਂਟ DOM ਨੋਡ ਨੂੰ ਇਸਦੇ ਦੂਜੇ ਦੇ ਰੂਪ ਵਿੱਚ ਕਿਹਾ ਜਾਂਦਾ ਹੈ। |
ਚੋਣਕਾਰ | ਸਤਰ | ਝੂਠਾ | ਝੂਠਾ | ਜੇਕਰ ਇੱਕ ਚੋਣਕਾਰ ਪ੍ਰਦਾਨ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਪੌਪਓਵਰ ਵਸਤੂਆਂ ਨੂੰ ਨਿਰਧਾਰਤ ਟੀਚਿਆਂ ਨੂੰ ਸੌਂਪਿਆ ਜਾਵੇਗਾ। ਅਭਿਆਸ ਵਿੱਚ, ਇਸਦੀ ਵਰਤੋਂ ਗਤੀਸ਼ੀਲ HTML ਸਮੱਗਰੀ ਨੂੰ ਪੌਪਓਵਰ ਜੋੜਨ ਲਈ ਯੋਗ ਬਣਾਉਣ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਹ ਅਤੇ ਇੱਕ ਜਾਣਕਾਰੀ ਭਰਪੂਰ ਉਦਾਹਰਨ ਦੇਖੋ । |
ਟੈਮਪਲੇਟ | ਸਤਰ | '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>' |
ਪੌਪਓਵਰ ਬਣਾਉਣ ਵੇਲੇ ਵਰਤਣ ਲਈ ਆਧਾਰ HTML। ਪੌਪਓਵਰ ਪੌਪਓਵਰ
ਸਭ ਤੋਂ ਬਾਹਰਲੇ ਰੈਪਰ ਤੱਤ ਵਿੱਚ |
ਸਿਰਲੇਖ | ਸਤਰ | ਤੱਤ | ਫੰਕਸ਼ਨ | '' | ਜੇਕਰ ਜੇਕਰ ਕੋਈ ਫੰਕਸ਼ਨ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਉਸ |
ਟਰਿੱਗਰ | ਸਤਰ | 'ਕਲਿੱਕ' | ਪੌਪਓਵਰ ਕਿਵੇਂ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ - ਕਲਿੱਕ ਕਰੋ | ਹੋਵਰ | ਫੋਕਸ | ਮੈਨੁਅਲ ਤੁਸੀਂ ਕਈ ਟਰਿਗਰ ਪਾਸ ਕਰ ਸਕਦੇ ਹੋ; ਉਹਨਾਂ ਨੂੰ ਇੱਕ ਸਪੇਸ ਨਾਲ ਵੱਖ ਕਰੋ। manual ਕਿਸੇ ਹੋਰ ਟਰਿੱਗਰ ਨਾਲ ਜੋੜਿਆ ਨਹੀਂ ਜਾ ਸਕਦਾ। |
ਆਫਸੈੱਟ | ਨੰਬਰ | ਸਤਰ | 0 | ਇਸਦੇ ਟੀਚੇ ਦੇ ਅਨੁਸਾਰ ਪੌਪਓਵਰ ਦਾ ਆਫਸੈੱਟ। ਵਧੇਰੇ ਜਾਣਕਾਰੀ ਲਈ Popper.js ਦੇ ਆਫਸੈੱਟ ਡੌਕਸ ਵੇਖੋ । |
ਫਾਲਬੈਕ ਪਲੇਸਮੈਂਟ | ਸਤਰ | ਐਰੇ | 'ਫਲਿਪ' | ਪੌਪਰ ਫਾਲਬੈਕ 'ਤੇ ਕਿਹੜੀ ਸਥਿਤੀ ਦੀ ਵਰਤੋਂ ਕਰੇਗਾ, ਇਹ ਨਿਰਧਾਰਤ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿਓ। ਵਧੇਰੇ ਜਾਣਕਾਰੀ ਲਈ Popper.js ਦੇ ਵਿਹਾਰ ਦਸਤਾਵੇਜ਼ਾਂ ਨੂੰ ਵੇਖੋ |
ਸੀਮਾ | ਸਤਰ | ਤੱਤ | 'ਸਕ੍ਰੌਲ ਪੇਰੈਂਟ' | ਪੌਪਓਵਰ ਦੀ ਓਵਰਫਲੋ ਸੀਮਾ ਸੀਮਾ। 'viewport' , 'window' , 'scrollParent' , ਜਾਂ ਇੱਕ HTMLElement ਸੰਦਰਭ (ਸਿਰਫ਼ JavaScript) ਦੇ ਮੁੱਲਾਂ ਨੂੰ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ । ਵਧੇਰੇ ਜਾਣਕਾਰੀ ਲਈ Popper.js ਦੇ ਰੋਕਥਾਮ ਓਵਰਫਲੋ ਡੌਕਸ ਵੇਖੋ । |
ਰੋਗਾਣੂ-ਮੁਕਤ ਕਰਨਾ | ਬੁਲੀਅਨ | ਸੱਚ ਹੈ | ਸੈਨੀਟਾਈਜ਼ੇਸ਼ਨ ਨੂੰ ਸਮਰੱਥ ਜਾਂ ਅਯੋਗ ਕਰੋ। ਜੇਕਰ ਕਿਰਿਆਸ਼ੀਲ ਹੈ 'template' , 'content' ਅਤੇ 'title' ਵਿਕਲਪਾਂ ਨੂੰ ਰੋਗਾਣੂ-ਮੁਕਤ ਕੀਤਾ ਜਾਵੇਗਾ। |
ਵ੍ਹਾਈਟਲਿਸਟ | ਵਸਤੂ | ਪੂਰਵ-ਨਿਰਧਾਰਤ ਮੁੱਲ | ਉਹ ਵਸਤੂ ਜਿਸ ਵਿੱਚ ਪ੍ਰਵਾਨਿਤ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਅਤੇ ਟੈਗ ਸ਼ਾਮਲ ਹਨ |
sanitizeFn | null | ਫੰਕਸ਼ਨ | null | ਇੱਥੇ ਤੁਸੀਂ ਆਪਣੇ ਖੁਦ ਦੇ ਸੈਨੀਟਾਈਜ਼ ਫੰਕਸ਼ਨ ਦੀ ਸਪਲਾਈ ਕਰ ਸਕਦੇ ਹੋ। ਇਹ ਲਾਭਦਾਇਕ ਹੋ ਸਕਦਾ ਹੈ ਜੇਕਰ ਤੁਸੀਂ ਸਵੱਛਤਾ ਕਰਨ ਲਈ ਸਮਰਪਿਤ ਲਾਇਬ੍ਰੇਰੀ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਪਸੰਦ ਕਰਦੇ ਹੋ। |
popperConfig | null | ਵਸਤੂ | null | Bootstrap ਦੀ ਡਿਫੌਲਟ Popper.js ਸੰਰਚਨਾ ਨੂੰ ਬਦਲਣ ਲਈ, Popper.js ਦੀ ਸੰਰਚਨਾ ਵੇਖੋ |
ਵਿਅਕਤੀਗਤ ਪੌਪਓਵਰਾਂ ਲਈ ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ
ਵਿਅਕਤੀਗਤ ਪੌਪਓਵਰਾਂ ਲਈ ਵਿਕਲਪਾਂ ਨੂੰ ਵਿਕਲਪਿਕ ਤੌਰ 'ਤੇ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਦੁਆਰਾ ਨਿਰਧਾਰਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਉੱਪਰ ਦੱਸਿਆ ਗਿਆ ਹੈ।
ਢੰਗ
ਅਸਿੰਕ੍ਰੋਨਸ ਵਿਧੀਆਂ ਅਤੇ ਪਰਿਵਰਤਨ
ਸਾਰੀਆਂ API ਵਿਧੀਆਂ ਅਸਿੰਕ੍ਰੋਨਸ ਹਨ ਅਤੇ ਇੱਕ ਤਬਦੀਲੀ ਸ਼ੁਰੂ ਕਰਦੀਆਂ ਹਨ । ਪਰਿਵਰਤਨ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹੀ ਉਹ ਕਾਲਰ ਕੋਲ ਵਾਪਸ ਆਉਂਦੇ ਹਨ ਪਰ ਇਸ ਦੇ ਖਤਮ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ । ਇਸ ਤੋਂ ਇਲਾਵਾ, ਪਰਿਵਰਤਨ ਕਰਨ ਵਾਲੇ ਹਿੱਸੇ 'ਤੇ ਇੱਕ ਢੰਗ ਕਾਲ ਨੂੰ ਅਣਡਿੱਠ ਕੀਤਾ ਜਾਵੇਗਾ ।
$().popover(options)
ਇੱਕ ਤੱਤ ਸੰਗ੍ਰਹਿ ਲਈ ਪੌਪਓਵਰ ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ।
.popover('show')
ਕਿਸੇ ਤੱਤ ਦੇ ਪੌਪਓਵਰ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ। ਪੌਪਓਵਰ ਅਸਲ ਵਿੱਚ ਦਿਖਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ (ਭਾਵ shown.bs.popover
ਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)। ਇਸਨੂੰ ਪੌਪਓਵਰ ਦਾ "ਮੈਨੁਅਲ" ਟ੍ਰਿਗਰਿੰਗ ਮੰਨਿਆ ਜਾਂਦਾ ਹੈ। Popovers ਜਿਨ੍ਹਾਂ ਦਾ ਸਿਰਲੇਖ ਅਤੇ ਸਮੱਗਰੀ ਦੋਵੇਂ ਜ਼ੀਰੋ-ਲੰਬਾਈ ਵਾਲੇ ਹਨ, ਕਦੇ ਵੀ ਪ੍ਰਦਰਸ਼ਿਤ ਨਹੀਂ ਹੁੰਦੇ ਹਨ।
.popover('hide')
ਕਿਸੇ ਤੱਤ ਦੇ ਪੌਪਓਵਰ ਨੂੰ ਲੁਕਾਉਂਦਾ ਹੈ। ਪੌਪਓਵਰ ਅਸਲ ਵਿੱਚ ਲੁਕਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ (ਭਾਵ hidden.bs.popover
ਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)। ਇਸਨੂੰ ਪੌਪਓਵਰ ਦਾ "ਮੈਨੁਅਲ" ਟ੍ਰਿਗਰਿੰਗ ਮੰਨਿਆ ਜਾਂਦਾ ਹੈ।
.popover('toggle')
ਕਿਸੇ ਤੱਤ ਦੇ ਪੌਪਓਵਰ ਨੂੰ ਟੌਗਲ ਕਰਦਾ ਹੈ। ਪੌਪਓਵਰ ਅਸਲ ਵਿੱਚ ਦਿਖਾਏ ਜਾਂ ਲੁਕਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ (ਭਾਵ shown.bs.popover
ਜਾਂ hidden.bs.popover
ਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)। ਇਸਨੂੰ ਪੌਪਓਵਰ ਦਾ "ਮੈਨੁਅਲ" ਟ੍ਰਿਗਰਿੰਗ ਮੰਨਿਆ ਜਾਂਦਾ ਹੈ।
.popover('dispose')
ਇੱਕ ਤੱਤ ਦੇ ਪੌਪਓਵਰ ਨੂੰ ਲੁਕਾਉਂਦਾ ਅਤੇ ਨਸ਼ਟ ਕਰਦਾ ਹੈ। ਡੈਲੀਗੇਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਨ ਵਾਲੇ ਪੌਪਓਵਰ (ਜੋ ਵਿਕਲਪ ਦੀ ਵਰਤੋਂ ਕਰਕੇselector
ਬਣਾਏ ਗਏ ਹਨ ) ਨੂੰ ਵੰਸ਼ਜ ਟਰਿੱਗਰ ਤੱਤਾਂ 'ਤੇ ਵਿਅਕਤੀਗਤ ਤੌਰ 'ਤੇ ਨਸ਼ਟ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।
.popover('enable')
ਇੱਕ ਤੱਤ ਦੇ ਪੌਪਓਵਰ ਨੂੰ ਦਿਖਾਉਣ ਦੀ ਸਮਰੱਥਾ ਦਿੰਦਾ ਹੈ। ਪੌਪਓਵਰ ਡਿਫੌਲਟ ਰੂਪ ਵਿੱਚ ਸਮਰੱਥ ਹੁੰਦੇ ਹਨ।
.popover('disable')
ਕਿਸੇ ਤੱਤ ਦੇ ਪੌਪਓਵਰ ਨੂੰ ਦਿਖਾਉਣ ਦੀ ਯੋਗਤਾ ਨੂੰ ਹਟਾਉਂਦਾ ਹੈ। ਪੌਪਓਵਰ ਤਾਂ ਹੀ ਵਿਖਾਇਆ ਜਾ ਸਕੇਗਾ ਜੇਕਰ ਇਹ ਮੁੜ-ਸਮਰੱਥ ਹੋਵੇ।
.popover('toggleEnabled')
ਕਿਸੇ ਤੱਤ ਦੇ ਪੌਪਓਵਰ ਨੂੰ ਦਿਖਾਉਣ ਜਾਂ ਲੁਕਾਏ ਜਾਣ ਦੀ ਯੋਗਤਾ ਨੂੰ ਟੌਗਲ ਕਰਦਾ ਹੈ।
.popover('update')
ਕਿਸੇ ਤੱਤ ਦੇ ਪੌਪਓਵਰ ਦੀ ਸਥਿਤੀ ਨੂੰ ਅੱਪਡੇਟ ਕਰਦਾ ਹੈ।
ਸਮਾਗਮ
ਘਟਨਾ ਦੀ ਕਿਸਮ | ਵਰਣਨ |
---|---|
show.bs.popover | ਇਹ ਘਟਨਾ ਤੁਰੰਤ ਫਾਇਰ ਹੋ ਜਾਂਦੀ ਹੈ ਜਦੋਂ show ਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ। |
ਦਿਖਾਇਆ ਗਿਆ.bs.popover | ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਪੌਪਓਵਰ ਉਪਭੋਗਤਾ ਲਈ ਦ੍ਰਿਸ਼ਮਾਨ ਬਣਾਇਆ ਜਾਂਦਾ ਹੈ (CSS ਪਰਿਵਰਤਨ ਪੂਰਾ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)। |
hide.bs.popover | ਇਸ ਇਵੈਂਟ ਨੂੰ ਤੁਰੰਤ ਫਾਇਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਜਦੋਂ hide ਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ। |
hidden.bs.popover | ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਪੌਪਓਵਰ ਉਪਭੋਗਤਾ ਤੋਂ ਛੁਪਿਆ ਹੋਇਆ ਹੈ (CSS ਪਰਿਵਰਤਨ ਪੂਰਾ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)। |
inserted.bs.popover | ਇਹ ਇਵੈਂਟ ਇਵੈਂਟ ਤੋਂ ਬਾਅਦ ਫਾਇਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ show.bs.popover ਜਦੋਂ ਪੋਪਓਵਰ ਟੈਂਪਲੇਟ ਨੂੰ DOM ਵਿੱਚ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ। |