ਟੂਲਟਿੱਪ
ਸਥਾਨਕ ਸਿਰਲੇਖ ਸਟੋਰੇਜ ਲਈ ਐਨੀਮੇਸ਼ਨਾਂ ਅਤੇ ਡੇਟਾ-ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ CSS3 ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ CSS ਅਤੇ JavaScript ਦੇ ਨਾਲ ਕਸਟਮ ਬੂਟਸਟਰੈਪ ਟੂਲਟਿਪਸ ਨੂੰ ਜੋੜਨ ਲਈ ਦਸਤਾਵੇਜ਼ ਅਤੇ ਉਦਾਹਰਨਾਂ।
ਸੰਖੇਪ ਜਾਣਕਾਰੀ
ਟੂਲਟਿਪ ਪਲੱਗਇਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ ਜਾਣਨ ਵਾਲੀਆਂ ਚੀਜ਼ਾਂ:
- ਟੂਲਟਿੱਪ ਪੋਜੀਸ਼ਨਿੰਗ ਲਈ ਤੀਜੀ ਧਿਰ ਲਾਇਬ੍ਰੇਰੀ ਪੋਪਰ 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹਨ। ਤੁਹਾਨੂੰ bootstrap.js ਤੋਂ ਪਹਿਲਾਂ popper.min.js
bootstrap.bundle.min.js
ਨੂੰ ਸ਼ਾਮਲ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ ਜਾਂ ਟੂਲਟਿਪਸ ਨੂੰ ਕੰਮ ਕਰਨ ਲਈbootstrap.bundle.js
ਕ੍ਰਮ ਵਿੱਚ ਪੌਪਰ ਸ਼ਾਮਲ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ। - ਜੇਕਰ ਤੁਸੀਂ ਸਰੋਤ ਤੋਂ ਸਾਡੀ JavaScript ਬਣਾ ਰਹੇ ਹੋ, ਤਾਂ ਇਸਦੀ ਲੋੜ ਹੈ
util.js
। - ਟੂਲਟਿਪਸ ਪ੍ਰਦਰਸ਼ਨ ਦੇ ਕਾਰਨਾਂ ਲਈ ਚੁਣੀਆਂ ਜਾਂਦੀਆਂ ਹਨ, ਇਸਲਈ ਤੁਹਾਨੂੰ ਉਹਨਾਂ ਨੂੰ ਖੁਦ ਸ਼ੁਰੂ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ ।
- ਜ਼ੀਰੋ-ਲੰਬਾਈ ਦੇ ਸਿਰਲੇਖਾਂ ਵਾਲੇ ਟੂਲਟਿੱਪ ਕਦੇ ਵੀ ਪ੍ਰਦਰਸ਼ਿਤ ਨਹੀਂ ਹੁੰਦੇ ਹਨ।
container: 'body'
ਵਧੇਰੇ ਗੁੰਝਲਦਾਰ ਭਾਗਾਂ (ਜਿਵੇਂ ਸਾਡੇ ਇਨਪੁਟ ਸਮੂਹ, ਬਟਨ ਸਮੂਹ, ਆਦਿ) ਵਿੱਚ ਪੇਸ਼ਕਾਰੀ ਸਮੱਸਿਆਵਾਂ ਤੋਂ ਬਚਣ ਲਈ ਸਪਸ਼ਟ ਕਰੋ।- ਲੁਕਵੇਂ ਤੱਤਾਂ 'ਤੇ ਟੂਲਟਿੱਪਾਂ ਨੂੰ ਚਾਲੂ ਕਰਨਾ ਕੰਮ ਨਹੀਂ ਕਰੇਗਾ।
- ਲਈ ਟੂਲਟਿਪਸ
.disabled
ਜਾਂdisabled
ਐਲੀਮੈਂਟਸ ਨੂੰ ਰੈਪਰ ਐਲੀਮੈਂਟ 'ਤੇ ਚਾਲੂ ਕੀਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। - ਜਦੋਂ ਇੱਕ ਤੋਂ ਵੱਧ ਲਾਈਨਾਂ ਫੈਲਾਉਣ ਵਾਲੇ ਹਾਈਪਰਲਿੰਕਸ ਤੋਂ ਸ਼ੁਰੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਟੂਲਟਿਪਸ ਕੇਂਦਰਿਤ ਹੋਣਗੇ। ਇਸ ਵਿਵਹਾਰ ਤੋਂ ਬਚਣ ਲਈ
white-space: nowrap;
ਆਪਣੇ ਐੱਸ 'ਤੇ ਵਰਤੋਂ ।<a>
- ਟੂਲਟਿੱਪਾਂ ਨੂੰ ਉਹਨਾਂ ਦੇ ਅਨੁਸਾਰੀ ਤੱਤਾਂ ਨੂੰ DOM ਤੋਂ ਹਟਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਲੁਕਾਇਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ।
- ਟੂਲਟਿਪਸ ਨੂੰ ਇੱਕ ਸ਼ੈਡੋ DOM ਦੇ ਅੰਦਰ ਇੱਕ ਤੱਤ ਦੇ ਕਾਰਨ ਸ਼ੁਰੂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।
prefers-reduced-motion
ਮੀਡੀਆ ਪੁੱਛਗਿੱਛ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ। ਸਾਡੇ ਪਹੁੰਚਯੋਗਤਾ ਦਸਤਾਵੇਜ਼ਾਂ ਦੇ ਘਟਾਏ ਗਏ ਮੋਸ਼ਨ ਭਾਗ ਨੂੰ ਦੇਖੋ
।
ਇਹ ਸਭ ਮਿਲ ਗਿਆ? ਬਹੁਤ ਵਧੀਆ, ਆਓ ਦੇਖੀਏ ਕਿ ਉਹ ਕੁਝ ਉਦਾਹਰਣਾਂ ਨਾਲ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ।
ਉਦਾਹਰਨ: ਹਰ ਥਾਂ ਟੂਲਟਿੱਪਾਂ ਨੂੰ ਸਮਰੱਥ ਬਣਾਓ
ਇੱਕ ਪੰਨੇ 'ਤੇ ਸਾਰੇ ਟੂਲਟਿਪਸ ਨੂੰ ਸ਼ੁਰੂ ਕਰਨ ਦਾ ਇੱਕ ਤਰੀਕਾ ਉਹਨਾਂ ਦੀ data-toggle
ਵਿਸ਼ੇਸ਼ਤਾ ਦੁਆਰਾ ਉਹਨਾਂ ਨੂੰ ਚੁਣਨਾ ਹੋਵੇਗਾ:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
ਉਦਾਹਰਨਾਂ
ਟੂਲਟਿਪਸ ਦੇਖਣ ਲਈ ਹੇਠਾਂ ਦਿੱਤੇ ਲਿੰਕਾਂ 'ਤੇ ਹੋਵਰ ਕਰੋ:
ਟੂਲਟਿਪਸ ਦੇ ਨਾਲ ਕੁਝ ਇਨਲਾਈਨ ਲਿੰਕਾਂ ਦਾ ਪ੍ਰਦਰਸ਼ਨ ਕਰਨ ਲਈ ਪਲੇਸਹੋਲਡਰ ਟੈਕਸਟ । ਇਹ ਹੁਣ ਸਿਰਫ਼ ਭਰਨ ਵਾਲਾ ਹੈ, ਕੋਈ ਕਾਤਲ ਨਹੀਂ। ਅਸਲ ਟੈਕਸਟ ਦੀ ਮੌਜੂਦਗੀ ਦੀ ਨਕਲ ਕਰਨ ਲਈ ਇੱਥੇ ਸਮੱਗਰੀ ਰੱਖੀ ਗਈ ਹੈ । ਅਤੇ ਇਹ ਸਭ ਤੁਹਾਨੂੰ ਇਹ ਵਿਚਾਰ ਦੇਣ ਲਈ ਕਿ ਅਸਲ-ਸੰਸਾਰ ਦੀਆਂ ਸਥਿਤੀਆਂ ਵਿੱਚ ਵਰਤੇ ਜਾਣ 'ਤੇ ਟੂਲਟਿਪਸ ਕਿਵੇਂ ਦਿਖਾਈ ਦੇਣਗੀਆਂ। ਇਸ ਲਈ ਉਮੀਦ ਹੈ ਕਿ ਤੁਸੀਂ ਹੁਣ ਦੇਖਿਆ ਹੈ ਕਿ ਲਿੰਕਾਂ 'ਤੇ ਇਹ ਟੂਲਟਿਪਸ ਅਭਿਆਸ ਵਿੱਚ ਕਿਵੇਂ ਕੰਮ ਕਰ ਸਕਦੇ ਹਨ, ਇੱਕ ਵਾਰ ਜਦੋਂ ਤੁਸੀਂ ਉਹਨਾਂ ਨੂੰ ਆਪਣੀ ਖੁਦ ਦੀ ਸਾਈਟ ਜਾਂ ਪ੍ਰੋਜੈਕਟ 'ਤੇ ਵਰਤਦੇ ਹੋ.
ਚਾਰ ਟੂਲਟਿੱਪ ਦਿਸ਼ਾਵਾਂ ਦੇਖਣ ਲਈ ਹੇਠਾਂ ਦਿੱਤੇ ਬਟਨਾਂ 'ਤੇ ਹੋਵਰ ਕਰੋ: ਉੱਪਰ, ਸੱਜੇ, ਹੇਠਾਂ ਅਤੇ ਖੱਬੇ।
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>
ਅਤੇ ਕਸਟਮ HTML ਦੇ ਨਾਲ ਜੋੜਿਆ ਗਿਆ:
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
ਵਰਤੋਂ
ਟੂਲਟਿਪ ਪਲੱਗਇਨ ਮੰਗ 'ਤੇ ਸਮੱਗਰੀ ਅਤੇ ਮਾਰਕਅੱਪ ਬਣਾਉਂਦਾ ਹੈ, ਅਤੇ ਡਿਫੌਲਟ ਤੌਰ 'ਤੇ ਉਹਨਾਂ ਦੇ ਟਰਿੱਗਰ ਤੱਤ ਦੇ ਬਾਅਦ ਟੂਲਟਿਪ ਰੱਖਦਾ ਹੈ।
JavaScript ਦੁਆਰਾ ਟੂਲਟਿਪ ਨੂੰ ਟਰਿੱਗਰ ਕਰੋ:
$('#example').tooltip(options)
ਓਵਰਫਲੋ auto
ਅਤੇscroll
ਟੂਲਟਿਪ ਪੋਜੀਸ਼ਨ ਆਪਣੇ ਆਪ ਬਦਲਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੀ ਹੈ ਜਦੋਂ ਕਿਸੇ ਪੇਰੈਂਟ ਕੰਟੇਨਰ overflow: auto
ਕੋਲ overflow: scroll
ਸਾਡੇ .table-responsive
. ਹੱਲ ਕਰਨ ਲਈ, boundary
ਡਿਫੌਲਟ ਮੁੱਲ ਤੋਂ ਇਲਾਵਾ ਕਿਸੇ ਹੋਰ ਚੀਜ਼ ਲਈ ਵਿਕਲਪ ਸੈੱਟ ਕਰੋ 'scrollParent'
, ਜਿਵੇਂ ਕਿ 'window'
:
$('#example').tooltip({ boundary: 'window' })
ਮਾਰਕਅੱਪ
ਟੂਲਟਿਪ ਲਈ ਲੋੜੀਂਦਾ ਮਾਰਕਅੱਪ ਸਿਰਫ਼ ਇੱਕ data
ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ ਅਤੇ title
HTML ਤੱਤ 'ਤੇ ਤੁਸੀਂ ਟੂਲਟਿਪ ਲੈਣਾ ਚਾਹੁੰਦੇ ਹੋ। ਇੱਕ ਟੂਲਟਿਪ ਦਾ ਤਿਆਰ ਕੀਤਾ ਮਾਰਕਅੱਪ ਕਾਫ਼ੀ ਸਧਾਰਨ ਹੈ, ਹਾਲਾਂਕਿ ਇਸਨੂੰ ਇੱਕ ਸਥਿਤੀ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ (ਮੂਲ ਰੂਪ ਵਿੱਚ, top
ਪਲੱਗਇਨ ਦੁਆਰਾ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ)।
ਟੂਲਟਿੱਪ ਬਣਾਉਣਾ ਕੀਬੋਰਡ ਅਤੇ ਸਹਾਇਕ ਤਕਨਾਲੋਜੀ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਕੰਮ ਕਰਦਾ ਹੈ
ਤੁਹਾਨੂੰ ਸਿਰਫ਼ HTML ਤੱਤਾਂ ਵਿੱਚ ਟੂਲਟਿੱਪ ਸ਼ਾਮਲ ਕਰਨੀਆਂ ਚਾਹੀਦੀਆਂ ਹਨ ਜੋ ਰਵਾਇਤੀ ਤੌਰ 'ਤੇ ਕੀਬੋਰਡ-ਫੋਕਸ ਕਰਨ ਯੋਗ ਅਤੇ ਇੰਟਰਐਕਟਿਵ ਹਨ (ਜਿਵੇਂ ਕਿ ਲਿੰਕ ਜਾਂ ਫਾਰਮ ਨਿਯੰਤਰਣ)। ਹਾਲਾਂਕਿ ਆਰਬਿਟਰੇਰੀ HTML ਐਲੀਮੈਂਟਸ (ਜਿਵੇਂ ਕਿ <span>
s) ਨੂੰ tabindex="0"
ਐਟਰੀਬਿਊਟ ਜੋੜ ਕੇ ਫੋਕਸ ਕਰਨ ਯੋਗ ਬਣਾਇਆ ਜਾ ਸਕਦਾ ਹੈ, ਇਹ ਕੀਬੋਰਡ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਗੈਰ-ਇੰਟਰਐਕਟਿਵ ਐਲੀਮੈਂਟਸ 'ਤੇ ਸੰਭਾਵੀ ਤੌਰ 'ਤੇ ਤੰਗ ਕਰਨ ਵਾਲੇ ਅਤੇ ਉਲਝਣ ਵਾਲੇ ਟੈਬ ਸਟਾਪਾਂ ਨੂੰ ਜੋੜ ਦੇਵੇਗਾ, ਅਤੇ ਜ਼ਿਆਦਾਤਰ ਸਹਾਇਕ ਤਕਨੀਕਾਂ ਵਰਤਮਾਨ ਵਿੱਚ ਇਸ ਸਥਿਤੀ ਵਿੱਚ ਟੂਲਟਿਪ ਦਾ ਐਲਾਨ ਨਹੀਂ ਕਰਦੀਆਂ ਹਨ। ਇਸ ਤੋਂ ਇਲਾਵਾ, ਆਪਣੇ ਟੂਲਟਿਪ ਦੇ ਟਰਿੱਗਰ ਦੇ ਤੌਰ 'ਤੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਭਰੋਸਾ ਨਾ hover
ਕਰੋ, ਕਿਉਂਕਿ ਇਹ ਕੀਬੋਰਡ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਤੁਹਾਡੀਆਂ ਟੂਲਟਿੱਪਾਂ ਨੂੰ ਟ੍ਰਿਗਰ ਕਰਨਾ ਅਸੰਭਵ ਬਣਾ ਦੇਵੇਗਾ।
<!-- HTML to write -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
<!-- Generated markup by the plugin -->
<div class="tooltip bs-tooltip-top" role="tooltip">
<div class="arrow"></div>
<div class="tooltip-inner">
Some tooltip text!
</div>
</div>
ਅਯੋਗ ਤੱਤ
ਵਿਸ਼ੇਸ਼ਤਾ ਵਾਲੇ ਤੱਤ disabled
ਇੰਟਰਐਕਟਿਵ ਨਹੀਂ ਹਨ, ਮਤਲਬ ਕਿ ਉਪਭੋਗਤਾ ਟੂਲਟਿਪ (ਜਾਂ ਪੌਪਓਵਰ) ਨੂੰ ਟ੍ਰਿਗਰ ਕਰਨ ਲਈ ਫੋਕਸ ਨਹੀਂ ਕਰ ਸਕਦੇ, ਹੋਵਰ ਨਹੀਂ ਕਰ ਸਕਦੇ ਜਾਂ ਉਹਨਾਂ 'ਤੇ ਕਲਿੱਕ ਨਹੀਂ ਕਰ ਸਕਦੇ। ਇੱਕ ਹੱਲ ਦੇ ਰੂਪ ਵਿੱਚ, ਤੁਸੀਂ ਇੱਕ ਰੈਪਰ ਤੋਂ ਟੂ���ਟਿਪ ਨੂੰ ਟਰਿੱਗਰ ਕਰਨਾ ਚਾਹੋਗੇ <div>
ਜਾਂ <span>
, ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਆਦਰਸ਼ਕ ਤੌਰ 'ਤੇ ਕੀਬੋਰਡ-ਫੋਕਸਯੋਗ ਬਣਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਅਤੇ ਅਯੋਗ ਐਲੀਮੈਂਟ ਉੱਤੇ tabindex="0"
ਓਵਰਰਾਈਡ ਕਰਨਾ ਚਾਹੋਗੇ।pointer-events
<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
ਵਿਕਲਪ
ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-
, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-animation=""
।
sanitize
,
sanitizeFn
ਅਤੇ
whiteList
ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸਪਲਾਈ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।
ਨਾਮ | ਟਾਈਪ ਕਰੋ | ਡਿਫਾਲਟ | ਵਰਣਨ |
---|---|---|---|
ਐਨੀਮੇਸ਼ਨ | ਬੁਲੀਅਨ | ਸੱਚ ਹੈ | ਟੂਲਟਿਪ 'ਤੇ CSS ਫੇਡ ਤਬਦੀਲੀ ਲਾਗੂ ਕਰੋ |
ਕੰਟੇਨਰ | ਸਤਰ | ਤੱਤ | ਝੂਠਾ | ਝੂਠਾ | ਟੂਲਟਿਪ ਨੂੰ ਕਿਸੇ ਖਾਸ ਤੱਤ ਨਾਲ ਜੋੜਦਾ ਹੈ। ਉਦਾਹਰਨ: |
ਦੇਰੀ | ਨੰਬਰ | ਵਸਤੂ | 0 | ਟੂਲਟਿਪ (ms) ਨੂੰ ਦਿਖਾਉਣ ਅਤੇ ਲੁਕਾਉਣ ਵਿੱਚ ਦੇਰੀ - ਮੈਨੂਅਲ ਟਰਿੱਗਰ ਕਿਸਮ 'ਤੇ ਲਾਗੂ ਨਹੀਂ ਹੁੰਦਾ ਜੇਕਰ ਕੋਈ ਨੰਬਰ ਸਪਲਾਈ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਦੇਰੀ ਨੂੰ ਲੁਕਾਉਣ/ਸ਼ੋਅ ਦੋਵਾਂ ਲਈ ਲਾਗੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਵਸਤੂ ਬਣਤਰ ਹੈ: |
html | ਬੁਲੀਅਨ | ਝੂਠਾ | ਟੂਲਟਿਪ ਵਿੱਚ HTML ਦੀ ਆਗਿਆ ਦਿਓ। ਜੇਕਰ ਸਹੀ ਹੈ, ਤਾਂ ਟੂਲਟਿਪ ਵਿੱਚ HTML ਟੈਗਸ ਨੂੰ ਟੂਲਟਿਪ ਜੇਕਰ ਤੁਸੀਂ XSS ਹਮਲਿਆਂ ਬਾਰੇ ਚਿੰਤਤ ਹੋ ਤਾਂ ਟੈਕਸਟ ਦੀ ਵਰਤੋਂ ਕਰੋ। |
ਪਲੇਸਮੈਂਟ | ਸਤਰ | ਫੰਕਸ਼ਨ | 'ਸਿਖਰ' | ਟੂਲਟਿਪ ਦੀ ਸਥਿਤੀ ਕਿਵੇਂ ਕਰੀਏ - ਆਟੋ | ਸਿਖਰ | ਥੱਲੇ | ਖੱਬੇ | ਸਹੀ ਜਦੋਂ ਇੱਕ ਫੰਕਸ਼ਨ ਪਲੇਸਮੈਂਟ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਟੂਲਟਿਪ DOM ਨੋਡ ਨੂੰ ਇਸਦੇ ਪਹਿਲੇ ਆਰਗੂਮੈਂਟ ਵਜੋਂ ਅਤੇ ਟਰਿਗਰਿੰਗ ਐਲੀਮੈਂਟ DOM ਨੋਡ ਨੂੰ ਇਸਦੇ ਦੂਜੇ ਦੇ ਰੂਪ ਵਿੱਚ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ। |
ਚੋਣਕਾਰ | ਸਤਰ | ਝੂਠਾ | ਝੂਠਾ | ਜੇਕਰ ਇੱਕ ਚੋਣਕਾਰ ਪ੍ਰਦਾਨ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਟੂਲਟਿਪ ਆਬਜੈਕਟ ਨਿਰਧਾਰਤ ਟੀਚਿਆਂ ਨੂੰ ਸੌਂਪੇ ਜਾਣਗੇ। jQuery.on ਅਭਿਆਸ ਵਿੱਚ, ਇਸਦੀ ਵਰਤੋਂ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਸ਼ਾਮਲ ਕੀਤੇ ਗਏ DOM ਐਲੀਮੈਂਟਸ ( ਸਪੋਰਟ) ਲਈ ਟੂਲਟਿੱਪਾਂ ਨੂੰ ਲਾਗੂ ਕਰਨ ਲਈ ਵੀ ਕੀਤੀ ਜਾਂਦੀ ਹੈ । ਇਹ ਅਤੇ ਇੱਕ ਜਾਣਕਾਰੀ ਭਰਪੂਰ ਉਦਾਹਰਨ ਦੇਖੋ । |
ਟੈਮਪਲੇਟ | ਸਤਰ | '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>' |
ਟੂਲਟਿਪ ਬਣਾਉਣ ਵੇਲੇ ਵਰਤਣ ਲਈ ਆਧਾਰ HTML। ਟੂਲਟਿਪ
ਸਭ ਤੋਂ ਬਾਹਰੀ ਰੈਪਰ ਐਲੀਮੈਂਟ ਵਿੱਚ |
ਸਿਰਲੇਖ | ਸਤਰ | ਤੱਤ | ਫੰਕਸ਼ਨ | '' | ਜੇਕਰ ਜੇਕਰ ਕੋਈ ਫੰਕਸ਼ਨ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਉਸ |
ਟਰਿੱਗਰ | ਸਤਰ | 'ਹੋਵਰ ਫੋਕਸ' | ਟੂਲਟਿਪ ਨੂੰ ਕਿਵੇਂ ਚਾਲੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ - ਕਲਿੱਕ ਕਰੋ | ਹੋਵਰ | ਫੋਕਸ | ਮੈਨੁਅਲ ਤੁਸੀਂ ਕਈ ਟਰਿਗਰ ਪਾਸ ਕਰ ਸਕਦੇ ਹੋ; ਉਹਨਾਂ ਨੂੰ ਇੱਕ ਸਪੇਸ ਨਾਲ ਵੱਖ ਕਰੋ।
|
ਆਫਸੈੱਟ | ਨੰਬਰ | ਸਤਰ | ਫੰਕਸ਼ਨ | 0 | ਟੂਲਟਿਪ ਦਾ ਇਸ ਦੇ ਟੀਚੇ ਦੇ ਅਨੁਸਾਰੀ ਔਫਸੈੱਟ। ਜਦੋਂ ਇੱਕ ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਔਫਸੈੱਟ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਇੱਕ ਆਬਜੈਕਟ ਨਾਲ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਿਸ ਵਿੱਚ ਔਫਸੈੱਟ ਡੇਟਾ ਹੁੰਦਾ ਹੈ ਇਸਦੇ ਪਹਿਲੇ ਆਰਗੂਮੈਂਟ ਵਜੋਂ। ਫੰਕਸ਼ਨ ਨੂੰ ਉਸੇ ਢਾਂਚੇ ਦੇ ਨਾਲ ਇੱਕ ਵਸਤੂ ਵਾਪਸ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ। ਟਰਿਗਰਿੰਗ ਐਲੀਮੈਂਟ DOM ਨੋਡ ਨੂੰ ਦੂਜੀ ਆਰਗੂਮੈਂਟ ਵਜੋਂ ਪਾਸ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਵਧੇਰੇ ਜਾਣਕਾਰੀ ਲਈ ਪੌਪਰ ਦੇ ਆਫਸੈੱਟ ਦਸਤਾਵੇਜ਼ਾਂ ਨੂੰ ਵੇਖੋ । |
ਫਾਲਬੈਕ ਪਲੇਸਮੈਂਟ | ਸਤਰ | ਐਰੇ | 'ਫਲਿਪ' | ਪੌਪਰ ਫਾਲਬੈਕ 'ਤੇ ਕਿਹੜੀ ਸਥਿਤੀ ਦੀ ਵਰਤੋਂ ਕਰੇਗਾ, ਇਹ ਨਿਰਧਾਰਤ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿਓ। ਵਧੇਰੇ ਜਾਣਕਾਰੀ ਲਈ ਪੌਪਰ ਦੇ ਵਿਵਹਾਰ ਦੇ ਦਸਤਾਵੇਜ਼ਾਂ ਨੂੰ ਵੇਖੋ |
ਕਸਟਮ ਕਲਾਸ | ਸਤਰ | ਫੰਕਸ਼ਨ | '' | ਟੂਲਟਿੱਪ ਵਿੱਚ ਕਲਾਸਾਂ ਸ਼ਾਮਲ ਕਰੋ ਜਦੋਂ ਇਹ ਦਿਖਾਇਆ ਜਾਂਦਾ ਹੈ। ਨੋਟ ਕਰੋ ਕਿ ਇਹ ਕਲਾਸਾਂ ਟੈਮਪਲੇਟ ਵਿੱਚ ਦਰਸਾਏ ਗਏ ਕਿਸੇ ਵੀ ਕਲਾਸ ਤੋਂ ਇਲਾਵਾ ਜੋੜੀਆਂ ਜਾਣਗੀਆਂ। ਕਈ ਕਲਾਸਾਂ ਜੋੜਨ ਲਈ, ਉਹਨਾਂ ਨੂੰ ਖਾਲੀ ਥਾਂਵਾਂ ਨਾਲ ਵੱਖ ਕਰੋ: ਤੁਸੀਂ ਇੱਕ ਫੰਕਸ਼ਨ ਵੀ ਪਾਸ ਕਰ ਸਕਦੇ ਹੋ ਜਿਸ ਵਿੱਚ ਵਾਧੂ ਕਲਾਸ ਨਾਮਾਂ ਵਾਲੀ ਸਿੰਗਲ ਸਤਰ ਵਾਪਸ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ। |
ਸੀਮਾ | ਸਤਰ | ਤੱਤ | 'ਸਕ੍ਰੌਲ ਪੇਰੈਂਟ' | ਟੂਲਟਿਪ ਦੀ ਓਵਰਫਲੋ ਸੀਮਾ ਸੀਮਾ। 'viewport' , 'window' , 'scrollParent' , ਜਾਂ ਇੱਕ HTMLElement ਸੰਦਰਭ (ਸਿਰਫ਼ JavaScript) ਦੇ ਮੁੱਲਾਂ ਨੂੰ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ । ਵਧੇਰੇ ਜਾਣਕਾਰੀ ਲਈ ਪੌਪਰ ਦੇ ਰੋਕਥਾਮ ਓਵਰਫਲੋ ਡੌਕਸ ਵੇਖੋ । |
ਰੋਗਾਣੂ-ਮੁਕਤ ਕਰਨਾ | ਬੁਲੀਅਨ | ਸੱਚ ਹੈ | ਸੈਨੀਟਾਈਜ਼ੇਸ਼ਨ ਨੂੰ ਸਮਰੱਥ ਜਾਂ ਅਯੋਗ ਕਰੋ। ਜੇਕਰ ਕਿਰਿਆਸ਼ੀਲ ਹੈ 'template' ਅਤੇ 'title' ਵਿਕਲਪਾਂ ਨੂੰ ਰੋਗਾਣੂ-ਮੁਕਤ ਕੀਤਾ ਜਾਵੇਗਾ। ਸਾਡੇ JavaScript ਦਸਤਾਵੇਜ਼ਾਂ ਵਿੱਚ ਸੈਨੀਟਾਈਜ਼ਰ ਸੈਕਸ਼ਨ ਦੇਖੋ । |
ਵ੍ਹਾਈਟਲਿਸਟ | ਵਸਤੂ | ਪੂਰਵ-ਨਿਰਧਾਰਤ ਮੁੱਲ | ਉਹ ਵਸਤੂ ਜਿਸ ਵਿੱਚ ਪ੍ਰਵਾਨਿਤ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਅਤੇ ਟੈਗ ਸ਼ਾਮਲ ਹਨ |
sanitizeFn | null | ਫੰਕਸ਼ਨ | null | ਇੱਥੇ ਤੁਸੀਂ ਆਪਣੇ ਖੁਦ ਦੇ ਸੈਨੀਟਾਈਜ਼ ਫੰਕਸ਼ਨ ਦੀ ਸਪਲਾਈ ਕਰ ਸਕਦੇ ਹੋ। ਇਹ ਲਾਭਦਾਇਕ ਹੋ ਸਕਦਾ ਹੈ ਜੇਕਰ ਤੁਸੀਂ ਸਵੱਛਤਾ ਕਰਨ ਲਈ ਸਮਰਪਿਤ ਲਾਇਬ੍ਰੇਰੀ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਪਸੰਦ ਕਰਦੇ ਹੋ। |
popperConfig | null | ਵਸਤੂ | null | ਬੂਟਸਟਰੈਪ ਦੀ ਡਿਫਾਲਟ ਪੋਪਰ ਸੰਰਚਨਾ ਨੂੰ ਬਦਲਣ ਲਈ, ਪੌਪਰ ਦੀ ਸੰਰਚਨਾ ਵੇਖੋ |
ਵਿਅਕਤੀਗਤ ਟੂਲਟਿਪਸ ਲਈ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ
ਵਿਅਕਤੀਗਤ ਟੂਲਟਿੱਪਾਂ ਲਈ ਵਿਕਲਪਾਂ ਨੂੰ ਵਿਕਲਪਿਕ ਤੌਰ 'ਤੇ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਦੁਆਰਾ ਨਿਰਧਾਰਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਉੱਪਰ ਦੱਸਿਆ ਗਿਆ ਹੈ।
ਢੰਗ
ਅਸਿੰਕ੍ਰੋਨਸ ਵਿਧੀਆਂ ਅਤੇ ਪਰਿਵਰਤਨ
ਸਾਰੀਆਂ API ਵਿਧੀਆਂ ਅਸਿੰਕ੍ਰੋਨਸ ਹਨ ਅਤੇ ਇੱਕ ਤਬਦੀਲੀ ਸ਼ੁਰੂ ਕਰਦੀਆਂ ਹਨ । ਪਰਿਵਰਤਨ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹੀ ਉਹ ਕਾਲਰ ਕੋਲ ਵਾਪਸ ਆਉਂਦੇ ਹਨ ਪਰ ਇਸ ਦੇ ਖਤਮ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ । ਇਸ ਤੋਂ ਇਲਾਵਾ, ਪਰਿਵਰਤਨ ਕਰਨ ਵਾਲੇ ਹਿੱਸੇ 'ਤੇ ਇੱਕ ਢੰਗ ਕਾਲ ਨੂੰ ਅਣਡਿੱਠ ਕੀਤਾ ਜਾਵੇਗਾ ।
$().tooltip(options)
ਇੱਕ ਤੱਤ ਸੰਗ੍ਰਹਿ ਵਿੱਚ ਇੱਕ ਟੂਲਟਿਪ ਹੈਂਡਲਰ ਨੱਥੀ ਕਰਦਾ ਹੈ।
.tooltip('show')
ਇੱਕ ਤੱਤ ਦੇ ਟੂਲਟਿਪ ਨੂੰ ਪ੍ਰਗਟ ਕਰਦਾ ਹੈ। ਟੂਲਟਿਪ ਅਸਲ ਵਿੱਚ ਵਿਖਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਆਉਂਦੀ ਹੈ (ਭਾਵ shown.bs.tooltip
ਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)। ਇਸਨੂੰ ਟੂਲਟਿਪ ਦਾ "ਮੈਨੁਅਲ" ਟ੍ਰਿਗਰਿੰਗ ਮੰਨਿਆ ਜਾਂਦਾ ਹੈ। ਜ਼ੀਰੋ-ਲੰਬਾਈ ਦੇ ਸਿਰਲੇਖਾਂ ਵਾਲੇ ਟੂਲਟਿੱਪ ਕਦੇ ਵੀ ਪ੍ਰਦਰਸ਼ਿਤ ਨਹੀਂ ਹੁੰਦੇ ਹਨ।
$('#element').tooltip('show')
.tooltip('hide')
ਕਿਸੇ ਤੱਤ ਦੀ ਟੂਲਟਿਪ ਨੂੰ ਲੁਕਾਉਂਦਾ ਹੈ। ਟੂਲਟਿਪ ਨੂੰ ਅਸਲ ਵਿੱਚ ਲੁਕਾਉਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ (ਭਾਵ hidden.bs.tooltip
ਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)। ਇਸਨੂੰ ਟੂਲਟਿਪ ਦਾ "ਮੈਨੁਅਲ" ਟ੍ਰਿਗਰਿੰਗ ਮੰਨਿਆ ਜਾਂਦਾ ਹੈ।
$('#element').tooltip('hide')
.tooltip('toggle')
ਕਿਸੇ ਤੱਤ ਦੀ ਟੂਲਟਿਪ ਨੂੰ ਟੌਗਲ ਕਰਦਾ ਹੈ। ਟੂਲਟਿਪ ਦੇ ਅਸਲ ਵਿੱਚ ਦਿਖਾਏ ਜਾਂ ਲੁਕਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਕੋਲ ਵਾਪਸ ਆ ਜਾਂਦਾ ਹੈ (ਭਾਵ shown.bs.tooltip
ਜਾਂ hidden.bs.tooltip
ਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)। ਇਸਨੂੰ ਟੂਲਟਿਪ ਦਾ "ਮੈਨੁਅਲ" ਟ੍ਰਿਗਰਿੰਗ ਮੰਨਿਆ ਜਾਂਦਾ ਹੈ।
$('#element').tooltip('toggle')
.tooltip('dispose')
ਕਿਸੇ ਤੱਤ ਦੀ ਟੂਲਟਿਪ ਨੂੰ ਲੁਕਾਉਂਦਾ ਅਤੇ ਨਸ਼ਟ ਕਰਦਾ ਹੈ। ਟੂਲਟਿਪਸ ਜੋ ਡੈਲੀਗੇਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ (ਜੋ ਵਿਕਲਪ ਦੀ ਵਰਤੋਂ ਕਰਕੇselector
ਬਣਾਏ ਗਏ ਹਨ ) ਨੂੰ ਵੰਸ਼ਜ ਟਰਿੱਗਰ ਤੱਤਾਂ 'ਤੇ ਵਿਅਕਤੀਗਤ ਤੌਰ 'ਤੇ ਨਸ਼ਟ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।
$('#element').tooltip('dispose')
.tooltip('enable')
ਇੱਕ ਤੱਤ ਦੇ ਟੂਲਟਿਪ ਨੂੰ ਦਿਖਾਉਣ ਦੀ ਯੋਗਤਾ ਦਿੰਦਾ ਹੈ। ਟੂਲਟਿਪਸ ਪੂਰਵ-ਨਿਰਧਾਰਤ ਤੌਰ 'ਤੇ ਸਮਰਥਿਤ ਹਨ।
$('#element').tooltip('enable')
.tooltip('disable')
ਕਿਸੇ ਤੱਤ ਦੇ ਟੂਲਟਿਪ ਨੂੰ ਦਿਖਾਉਣ ਦੀ ਯੋਗਤਾ ਨੂੰ ਹਟਾਉਂਦਾ ਹੈ। ਟੂਲਟਿਪ ਤਾਂ ਹੀ ਦਿਖਾਈ ਜਾ ਸਕੇਗੀ ਜੇਕਰ ਇਹ ਮੁੜ-ਸਮਰੱਥ ਹੋਵੇ।
$('#element').tooltip('disable')
.tooltip('toggleEnabled')
ਕਿਸੇ ਤੱਤ ਦੇ ਟੂਲਟਿਪ ਨੂੰ ਦਿਖਾਉਣ ਜਾਂ ਲੁਕਾਏ ਜਾਣ ਦੀ ਯੋਗਤਾ ਨੂੰ ਟੌਗਲ ਕਰਦਾ ਹੈ।
$('#element').tooltip('toggleEnabled')
.tooltip('update')
ਕਿਸੇ ਤੱਤ ਦੇ ਟੂਲਟਿਪ ਦੀ ਸਥਿਤੀ ਨੂੰ ਅੱਪਡੇਟ ਕਰਦਾ ਹੈ।
$('#element').tooltip('update')
ਸਮਾਗਮ
ਘਟਨਾ ਦੀ ਕਿਸਮ | ਵਰਣਨ |
---|---|
show.bs.tooltip | ਇਹ ਘਟਨਾ ਤੁਰੰਤ ਫਾਇਰ ਹੋ ਜਾਂਦੀ ਹੈ ਜਦੋਂ show ਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ। |
show.bs.tooltip | ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਟੂਲਟਿਪ ਨੂੰ ਉਪਭੋਗਤਾ ਲਈ ਦ੍ਰਿਸ਼ਮਾਨ ਬਣਾਇਆ ਜਾਂਦਾ ਹੈ (CSS ਪਰਿਵਰਤਨ ਪੂਰਾ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)। |
hide.bs.tooltip | ਇਸ ਇਵੈਂਟ ਨੂੰ ਤੁਰੰਤ ਫਾਇਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਜਦੋਂ hide ਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ। |
hidden.bs.tooltip | ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਟੂਲਟਿਪ ਨੂੰ ਉਪਭੋਗਤਾ ਤੋਂ ਲੁਕਾਇਆ ਜਾਣਾ ਖਤਮ ਹੋ ਜਾਂਦਾ ਹੈ (CSS ਪਰਿਵਰਤਨ ਪੂਰਾ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)। |
inserted.bs.tooltip | ਇਹ ਇਵੈਂਟ ਇਵੈਂਟ ਤੋਂ ਬਾਅਦ ਫਾਇਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ show.bs.tooltip ਜਦੋਂ ਟੂਲਟਿਪ ਟੈਂਪਲੇਟ ਨੂੰ DOM ਵਿੱਚ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ। |
$('#myTooltip').on('hidden.bs.tooltip', function () {
// do something...
})