ਟੂਲਟਿੱਪ
ਸਥਾਨਕ ਸਿਰਲੇਖ ਸਟੋਰੇਜ ਲਈ ਐਨੀਮੇਸ਼ਨਾਂ ਅਤੇ ਡੇਟਾ-ਬੀਐਸ-ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ CSS3 ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ CSS ਅਤੇ JavaScript ਨਾਲ ਕਸਟਮ ਬੂਟਸਟਰੈਪ ਟੂਲਟਿਪਸ ਨੂੰ ਜੋੜਨ ਲਈ ਦਸਤਾਵੇਜ਼ ਅਤੇ ਉਦਾਹਰਨਾਂ।
ਸੰਖੇਪ ਜਾਣਕਾਰੀ
ਟੂਲਟਿਪ ਪਲੱਗਇਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ ਜਾਣਨ ਵਾਲੀਆਂ ਚੀਜ਼ਾਂ:
- ਟੂਲਟਿੱਪ ਪੋਜੀਸ਼ਨਿੰਗ ਲਈ ਤੀਜੀ ਧਿਰ ਲਾਇਬ੍ਰੇਰੀ ਪੋਪਰ 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹਨ। ਤੁਹਾਨੂੰ bootstrap.js ਤੋਂ ਪਹਿਲਾਂ popper.min.js
bootstrap.bundle.min.js
ਨੂੰ ਸ਼ਾਮਲ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ ਜਾਂ ਟੂਲਟਿਪਸ ਨੂੰ ਕੰਮ ਕਰਨ ਲਈbootstrap.bundle.js
ਕ੍ਰਮ ਵਿੱਚ ਪੌਪਰ ਸ਼ਾਮਲ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ। - ਟੂਲਟਿਪਸ ਪ੍ਰਦਰਸ਼ਨ ਦੇ ਕਾਰਨਾਂ ਲਈ ਚੁਣੀਆਂ ਜਾਂਦੀਆਂ ਹਨ, ਇਸਲਈ ਤੁਹਾਨੂੰ ਉਹਨਾਂ ਨੂੰ ਖੁਦ ਸ਼ੁਰੂ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ ।
- ਜ਼ੀਰੋ-ਲੰਬਾਈ ਦੇ ਸਿਰਲੇਖਾਂ ਵਾਲੇ ਟੂਲਟਿੱਪ ਕਦੇ ਵੀ ਪ੍ਰਦਰਸ਼ਿਤ ਨਹੀਂ ਹੁੰਦੇ ਹਨ।
container: 'body'
ਵਧੇਰੇ ਗੁੰਝਲਦਾਰ ਭਾਗਾਂ (ਜਿਵੇਂ ਸਾਡੇ ਇਨਪੁਟ ਸਮੂਹ, ਬਟਨ ਸਮੂਹ, ਆਦਿ) ਵਿੱਚ ਪੇਸ਼ਕਾਰੀ ਸਮੱਸਿਆਵਾਂ ਤੋਂ ਬਚਣ ਲਈ ਸਪਸ਼ਟ ਕਰੋ।- ਲੁਕਵੇਂ ਤੱਤਾਂ 'ਤੇ ਟੂਲਟਿੱਪਾਂ ਨੂੰ ਚਾਲੂ ਕਰਨਾ ਕੰਮ ਨਹੀਂ ਕਰੇਗਾ।
- ਲਈ ਟੂਲਟਿਪਸ
.disabled
ਜਾਂdisabled
ਐਲੀਮੈਂਟਸ ਨੂੰ ਰੈਪਰ ਐਲੀਮੈਂਟ 'ਤੇ ਚਾਲੂ ਕੀਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। - ਜਦੋਂ ਇੱਕ ਤੋਂ ਵੱਧ ਲਾਈਨਾਂ ਫੈਲਾਉਣ ਵਾਲੇ ਹਾਈਪਰਲਿੰਕਸ ਤੋਂ ਸ਼ੁਰੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਟੂਲਟਿਪਸ ਕੇਂਦਰਿਤ ਹੋਣਗੇ। ਇਸ ਵਿਵਹਾਰ ਤੋਂ ਬਚਣ ਲਈ
white-space: nowrap;
ਆਪਣੇ ਐੱਸ 'ਤੇ ਵਰਤੋਂ ।<a>
- ਟੂਲਟਿੱਪਾਂ ਨੂੰ ਉਹਨਾਂ ਦੇ ਅਨੁਸਾਰੀ ਤੱਤਾਂ ਨੂੰ DOM ਤੋਂ ਹਟਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਲੁਕਾਇਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ।
- ਟੂਲਟਿਪਸ ਨੂੰ ਇੱਕ ਸ਼ੈਡੋ DOM ਦੇ ਅੰਦਰ ਇੱਕ ਤੱਤ ਦੇ ਕਾਰਨ ਸ਼ੁਰੂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।
prefers-reduced-motion
ਮੀਡੀਆ ਪੁੱਛਗਿੱਛ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ। ਸਾਡੇ ਪਹੁੰਚਯੋਗਤਾ ਦਸਤਾਵੇਜ਼ਾਂ ਦੇ ਘਟਾਏ ਗਏ ਮੋਸ਼ਨ ਭਾਗ ਨੂੰ ਦੇਖੋ
।
ਇਹ ਸਭ ਮਿਲ ਗਿਆ? ਬਹੁਤ ਵਧੀਆ, ਆਓ ਦੇਖੀਏ ਕਿ ਉਹ ਕੁਝ ਉਦਾਹਰਣਾਂ ਨਾਲ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ।
ਉਦਾਹਰਨ: ਹਰ ਥਾਂ ਟੂਲਟਿੱਪਾਂ ਨੂੰ ਸਮਰੱਥ ਬਣਾਓ
ਇੱਕ ਪੰਨੇ 'ਤੇ ਸਾਰੇ ਟੂਲਟਿਪਸ ਨੂੰ ਸ਼ੁਰੂ ਕਰਨ ਦਾ ਇੱਕ ਤਰੀਕਾ ਉਹਨਾਂ ਦੀ data-bs-toggle
ਵਿਸ਼ੇਸ਼ਤਾ ਦੁਆਰਾ ਉਹਨਾਂ ਨੂੰ ਚੁਣਨਾ ਹੋਵੇਗਾ:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
ਉਦਾਹਰਨਾਂ
ਟੂਲਟਿਪਸ ਦੇਖਣ ਲਈ ਹੇਠਾਂ ਦਿੱਤੇ ਲਿੰਕਾਂ 'ਤੇ ਹੋਵਰ ਕਰੋ:
ਟੂਲਟਿਪਸ ਦੇ ਨਾਲ ਕੁਝ ਇਨਲਾਈਨ ਲਿੰਕਾਂ ਦਾ ਪ੍ਰਦਰਸ਼ਨ ਕਰਨ ਲਈ ਪਲੇਸਹੋਲਡਰ ਟੈਕਸਟ । ਇਹ ਹੁਣ ਸਿਰਫ਼ ਭਰਨ ਵਾਲਾ ਹੈ, ਕੋਈ ਕਾਤਲ ਨਹੀਂ। ਅਸਲ ਟੈਕਸਟ ਦੀ ਮੌਜੂਦਗੀ ਦੀ ਨਕਲ ਕਰਨ ਲਈ ਇੱਥੇ ਸਮੱਗਰੀ ਰੱਖੀ ਗਈ ਹੈ । ਅਤੇ ਇਹ ਸਭ ਤੁਹਾਨੂੰ ਇਹ ਵਿਚਾਰ ਦੇਣ ਲਈ ਕਿ ਅਸਲ-ਸੰਸਾਰ ਦੀਆਂ ਸਥਿਤੀਆਂ ਵਿੱਚ ਵਰਤੇ ਜਾਣ 'ਤੇ ਟੂਲਟਿਪਸ ਕਿਵੇਂ ਦਿਖਾਈ ਦੇਣਗੀਆਂ। ਇਸ ਲਈ ਉਮੀਦ ਹੈ ਕਿ ਤੁਸੀਂ ਹੁਣ ਦੇਖਿਆ ਹੈ ਕਿ ਲਿੰਕਾਂ 'ਤੇ ਇਹ ਟੂਲਟਿਪਸ ਅਭਿਆਸ ਵਿੱਚ ਕਿਵੇਂ ਕੰਮ ਕਰ ਸਕਦੇ ਹਨ, ਇੱਕ ਵਾਰ ਜਦੋਂ ਤੁਸੀਂ ਉਹਨਾਂ ਨੂੰ ਆਪਣੀ ਖੁਦ ਦੀ ਸਾਈਟ ਜਾਂ ਪ੍ਰੋਜੈਕਟ 'ਤੇ ਵਰਤਦੇ ਹੋ.
ਚਾਰ ਟੂਲਟਿੱਪ ਦਿਸ਼ਾਵਾਂ ਦੇਖਣ ਲਈ ਹੇਠਾਂ ਦਿੱਤੇ ਬਟਨਾਂ 'ਤੇ ਹੋਵਰ ਕਰੋ: ਉੱਪਰ, ਸੱਜੇ, ਹੇਠਾਂ ਅਤੇ ਖੱਬੇ। RTL ਵਿੱਚ ਬੂਟਸਟਰੈਪ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ ਦਿਸ਼ਾਵਾਂ ਪ੍ਰਤੀਬਿੰਬ ਕੀਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ।
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
Tooltip on left
</button>
ਅਤੇ ਕਸਟਮ HTML ਦੇ ਨਾਲ ਜੋੜਿਆ ਗਿਆ:
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
ਇੱਕ SVG ਨਾਲ:
ਸੱਸ
ਵੇਰੀਏਬਲ
$tooltip-font-size: $font-size-sm;
$tooltip-max-width: 200px;
$tooltip-color: $white;
$tooltip-bg: $black;
$tooltip-border-radius: $border-radius;
$tooltip-opacity: .9;
$tooltip-padding-y: $spacer * .25;
$tooltip-padding-x: $spacer * .5;
$tooltip-margin: 0;
$tooltip-arrow-width: .8rem;
$tooltip-arrow-height: .4rem;
$tooltip-arrow-color: $tooltip-bg;
ਵਰਤੋਂ
ਟੂਲਟਿਪ ਪਲੱਗਇਨ ਮੰਗ 'ਤੇ ਸਮੱਗਰੀ ਅਤੇ ਮਾਰਕਅੱਪ ਬਣਾਉਂਦਾ ਹੈ, ਅਤੇ ਡਿਫੌਲਟ ਤੌਰ 'ਤੇ ਉਹਨਾਂ ਦੇ ਟਰਿੱਗਰ ਤੱਤ ਦੇ ਬਾਅਦ ਟੂਲਟਿਪ ਰੱਖਦਾ ਹੈ।
JavaScript ਦੁਆਰਾ ਟੂਲਟਿਪ ਨੂੰ ਟਰਿੱਗਰ ਕਰੋ:
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, options)
ਓਵਰਫਲੋ auto
ਅਤੇscroll
ਟੂਲਟਿਪ ਪੋਜੀਸ਼ਨ ਆਪਣੇ ਆਪ ਬਦਲਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੀ ਹੈ ਜਦੋਂ ਕਿਸੇ ਪੇਰੈਂਟ ਕੰਟੇਨਰ ਕੋਲ ਸਾਡੇ . ਇਸ ਨੂੰ ਹੱਲ ਕਰਨ ਲਈ, ਡਿਫਾਲਟ ਮੁੱਲ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਨ ਲਈ ਕਿਸੇ ਵੀ HTMLElement ਲਈ ਵਿਕਲਪ (ਵਿਕਲਪ ਦੀ ਵਰਤੋਂ ਕਰਨ ਵਾਲੇ ਫਲਿੱਪ ਮੋਡੀਫਾਇਰ ਲਈ ) ਸੈੱਟ ਕਰੋ , ਜਿਵੇਂ ਕਿ :overflow: auto
overflow: scroll
.table-responsive
boundary
popperConfig
'clippingParents'
document.body
var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
boundary: document.body // or document.querySelector('#boundary')
})
ਮਾਰਕਅੱਪ
ਟੂਲਟਿਪ ਲਈ ਲੋੜੀਂਦਾ ਮਾਰਕਅੱਪ ਸਿਰਫ਼ ਇੱਕ data
ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ ਅਤੇ title
HTML ਤੱਤ 'ਤੇ ਤੁਸੀਂ ਟੂਲਟਿਪ ਲੈਣਾ ਚਾਹੁੰਦੇ ਹੋ। ਇੱਕ ਟੂਲਟਿਪ ਦਾ ਤਿਆਰ ਕੀਤਾ ਮਾਰਕਅੱਪ ਕਾਫ਼ੀ ਸਧਾਰਨ ਹੈ, ਹਾਲਾਂਕਿ ਇਸਨੂੰ ਇੱਕ ਸਥਿਤੀ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ (ਮੂਲ ਰੂਪ ਵਿੱਚ, top
ਪਲੱਗਇਨ ਦੁਆਰਾ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ)।
ਟੂਲਟਿੱਪ ਬਣਾਉਣਾ ਕੀਬੋਰਡ ਅਤੇ ਸਹਾਇਕ ਤਕਨਾਲੋਜੀ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਕੰਮ ਕਰਦਾ ਹੈ
ਤੁਹਾਨੂੰ ਸਿਰਫ਼ HTML ਤੱਤਾਂ ਵਿੱਚ ਟੂਲਟਿੱਪ ਸ਼ਾਮਲ ਕਰਨੀਆਂ ਚਾਹੀਦੀਆਂ ਹਨ ਜੋ ਰਵਾਇਤੀ ਤੌਰ 'ਤੇ ਕੀਬੋਰਡ-ਫੋਕਸ ਕਰਨ ਯੋਗ ਅਤੇ ਇੰਟਰਐਕਟਿਵ ਹਨ (ਜਿਵੇਂ ਕਿ ਲਿੰਕ ਜਾਂ ਫਾਰਮ ਨਿਯੰਤਰਣ)। ਹਾਲਾਂਕਿ ਆਰਬਿਟਰੇਰੀ HTML ਐਲੀਮੈਂਟਸ (ਜਿਵੇਂ ਕਿ <span>
s) ਨੂੰ tabindex="0"
ਐਟਰੀਬਿਊਟ ਜੋੜ ਕੇ ਫੋਕਸ ਕਰਨ ਯੋਗ ਬਣਾਇਆ ਜਾ ਸਕਦਾ ਹੈ, ਇਹ ਕੀਬੋਰਡ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਗੈਰ-ਇੰਟਰਐਕਟਿਵ ਐਲੀਮੈਂਟਸ 'ਤੇ ਸੰਭਾਵੀ ਤੌਰ 'ਤੇ ਤੰਗ ਕਰਨ ਵਾਲੇ ਅਤੇ ਉਲਝਣ ਵਾਲੇ ਟੈਬ ਸਟਾਪਾਂ ਨੂੰ ਜੋੜ ਦੇਵੇਗਾ, ਅਤੇ ਜ਼ਿਆਦਾਤਰ ਸਹਾਇਕ ਤਕਨੀਕਾਂ ਵਰਤਮਾਨ ਵਿੱਚ ਇਸ ਸਥਿਤੀ ਵਿੱਚ ਟੂਲਟਿਪ ਦਾ ਐਲਾਨ ਨਹੀਂ ਕਰਦੀਆਂ ਹਨ। ਇਸ ਤੋਂ ਇਲਾਵਾ, ਆਪਣੇ ਟੂਲਟਿਪ ਦੇ ਟਰਿੱਗਰ ਦੇ ਤੌਰ 'ਤੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਭਰੋਸਾ ਨਾ hover
ਕਰੋ, ਕਿਉਂਕਿ ਇਹ ਕੀਬੋਰਡ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਤੁਹਾਡੀਆਂ ਟੂਲਟਿੱਪਾਂ ਨੂੰ ਟ੍ਰਿਗਰ ਕਰਨਾ ਅਸੰਭਵ ਬਣਾ ਦੇਵੇਗਾ।
<!-- HTML to write -->
<a href="#" data-bs-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="tooltip-arrow"></div>
<div class="tooltip-inner">
Some tooltip text!
</div>
</div>
ਅਯੋਗ ਤੱਤ
ਵਿਸ਼ੇਸ਼ਤਾ ਵਾਲੇ ਤੱਤ disabled
ਇੰਟਰਐਕਟਿਵ ਨਹੀਂ ਹਨ, ਮਤਲਬ ਕਿ ਉਪਭੋਗਤਾ ਟੂਲਟਿਪ (ਜਾਂ ਪੌਪਓਵਰ) ਨੂੰ ਟ੍ਰਿਗਰ ਕਰਨ ਲਈ ਫੋਕਸ ਨਹੀਂ ਕਰ ਸਕਦੇ, ਹੋਵਰ ਨਹੀਂ ਕਰ ਸਕਦੇ ਜਾਂ ਉਹਨਾਂ 'ਤੇ ਕਲਿੱਕ ਨਹੀਂ ਕਰ ਸਕਦੇ। ਇੱਕ ਹੱਲ ਦੇ ਤੌਰ 'ਤੇ, ਤੁਸੀਂ ਇੱਕ ਰੈਪਰ ਤੋਂ ਟੂਲਟਿਪ ਨੂੰ ਟਰਿੱਗਰ ਕਰਨਾ ਚਾਹੋਗੇ <div>
ਜਾਂ <span>
, ਆਦਰਸ਼ ਰੂਪ ਵਿੱਚ ਕੀਬੋਰਡ-ਫੋਕਸ ਕਰਨ ਯੋਗ ਬਣਾਇਆ ਗਿਆ tabindex="0"
ਹੈ।
<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip">
<button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>
ਵਿਕਲਪ
ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ, ਵਿਕਲਪ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰੋ data-bs-
, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-bs-animation=""
। ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਰਾਹੀਂ ਵਿਕਲਪਾਂ ਨੂੰ ਪਾਸ ਕਰਦੇ ਸਮੇਂ ਵਿਕਲਪ ਨਾਮ ਦੀ ਕੇਸ ਕਿਸਮ ਨੂੰ ਕੈਮਲਕੇਸ ਤੋਂ ਕਬਾਬ-ਕੇਸ ਵਿੱਚ ਬਦਲਣਾ ਯਕੀਨੀ ਬਣਾਓ। ਉਦਾਹਰਨ ਲਈ, ਵਰਤਣ ਦੀ ਬਜਾਏ data-bs-customClass="beautifier"
, ਵਰਤੋ data-bs-custom-class="beautifier"
।
sanitize
,
sanitizeFn
, ਅਤੇ
allowList
ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸਪਲਾਈ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।
ਨਾਮ | ਟਾਈਪ ਕਰੋ | ਡਿਫਾਲਟ | ਵਰਣਨ |
---|---|---|---|
animation |
ਬੁਲੀਅਨ | true |
ਟੂਲਟਿਪ 'ਤੇ CSS ਫੇਡ ਤਬਦੀਲੀ ਲਾਗੂ ਕਰੋ |
container |
ਸਤਰ | ਤੱਤ | ਝੂਠਾ | false |
ਟੂਲਟਿਪ ਨੂੰ ਕਿਸੇ ਖਾਸ ਤੱਤ ਨਾਲ ਜੋੜਦਾ ਹੈ। ਉਦਾਹਰਨ: |
delay |
ਨੰਬਰ | ਵਸਤੂ | 0 |
ਟੂਲਟਿਪ (ms) ਨੂੰ ਦਿਖਾਉਣ ਅਤੇ ਲੁਕਾਉਣ ਵਿੱਚ ਦੇਰੀ - ਮੈਨੂਅਲ ਟਰਿੱਗਰ ਕਿਸਮ 'ਤੇ ਲਾਗੂ ਨਹੀਂ ਹੁੰਦਾ ਜੇਕਰ ਕੋਈ ਨੰਬਰ ਸਪਲਾਈ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਦੇਰੀ ਨੂੰ ਲੁਕਾਉਣ/ਸ਼ੋਅ ਦੋਵਾਂ ਲਈ ਲਾਗੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਵਸਤੂ ਬਣਤਰ ਹੈ: |
html |
ਬੁਲੀਅਨ | false |
ਟੂਲਟਿਪ ਵਿੱਚ HTML ਦੀ ਆਗਿਆ ਦਿਓ। ਜੇਕਰ ਸਹੀ ਹੈ, ਤਾਂ ਟੂਲਟਿਪ ਵਿੱਚ HTML ਟੈਗਸ ਨੂੰ ਟੂਲਟਿਪ ਜੇਕਰ ਤੁਸੀਂ XSS ਹਮਲਿਆਂ ਬਾਰੇ ਚਿੰਤਤ ਹੋ ਤਾਂ ਟੈਕਸਟ ਦੀ ਵਰਤੋਂ ਕਰੋ। |
placement |
ਸਤਰ | ਫੰਕਸ਼ਨ | 'top' |
ਟੂਲਟਿਪ ਦੀ ਸਥਿਤੀ ਕਿਵੇਂ ਕਰੀਏ - ਆਟੋ | ਸਿਖਰ | ਥੱਲੇ | ਖੱਬੇ | ਸਹੀ ਜਦੋਂ ਇੱਕ ਫੰਕਸ਼ਨ ਪਲੇਸਮੈਂਟ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਟੂਲਟਿਪ DOM ਨੋਡ ਨੂੰ ਇਸਦੇ ਪਹਿਲੇ ਆਰਗੂਮੈਂਟ ਵਜੋਂ ਅਤੇ ਟਰਿਗਰਿੰਗ ਐਲੀਮੈਂਟ DOM ਨੋਡ ਨੂੰ ਇਸਦੇ ਦੂਜੇ ਦੇ ਰੂਪ ਵਿੱਚ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ। |
selector |
ਸਤਰ | ਝੂਠਾ | false |
ਜੇਕਰ ਇੱਕ ਚੋਣਕਾਰ ਪ੍ਰਦਾਨ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਟੂਲਟਿਪ ਆਬਜੈਕਟ ਨਿਰਧਾਰਤ ਟੀਚਿਆਂ ਨੂੰ ਸੌਂਪੇ ਜਾਣਗੇ। jQuery.on ਅਭਿਆਸ ਵਿੱਚ, ਇਸਦੀ ਵਰਤੋਂ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਸ਼ਾਮਲ ਕੀਤੇ ਗਏ DOM ਐਲੀਮੈਂਟਸ ( ਸਪੋਰਟ) ਲਈ ਟੂਲਟਿੱਪਾਂ ਨੂੰ ਲਾਗੂ ਕਰਨ ਲਈ ਵੀ ਕੀਤੀ ਜਾਂਦੀ ਹੈ । ਇਹ ਅਤੇ ਇੱਕ ਜਾਣਕਾਰੀ ਭਰਪੂਰ ਉਦਾਹਰਨ ਦੇਖੋ । |
template |
ਸਤਰ | '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' |
ਟੂਲਟਿਪ ਬਣਾਉਣ ਵੇਲੇ ਵਰਤਣ ਲਈ ਆਧਾਰ HTML। ਟੂਲਟਿਪ
ਸਭ ਤੋਂ ਬਾਹਰੀ ਰੈਪਰ ਐਲੀਮੈਂਟ ਵਿੱਚ |
title |
ਸਤਰ | ਤੱਤ | ਫੰਕਸ਼ਨ | '' |
ਜੇਕਰ ਜੇਕਰ ਕੋਈ ਫੰਕਸ਼ਨ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਉਸ |
trigger |
ਸਤਰ | 'hover focus' |
ਟੂਲਟਿਪ ਨੂੰ ਕਿਵੇਂ ਚਾਲੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ - ਕਲਿੱਕ ਕਰੋ | ਹੋਵਰ | ਫੋਕਸ | ਮੈਨੁਅਲ ਤੁਸੀਂ ਕਈ ਟਰਿਗਰ ਪਾਸ ਕਰ ਸਕਦੇ ਹੋ; ਉਹਨਾਂ ਨੂੰ ਇੱਕ ਸਪੇਸ ਨਾਲ ਵੱਖ ਕਰੋ।
|
fallbackPlacements |
ਐਰੇ | ['top', 'right', 'bottom', 'left'] |
ਐਰੇ ਵਿੱਚ ਪਲੇਸਮੈਂਟਾਂ ਦੀ ਸੂਚੀ ਪ੍ਰਦਾਨ ਕਰਕੇ ਫਾਲਬੈਕ ਪਲੇਸਮੈਂਟ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ (ਤਰਜੀਹੀ ਦੇ ਕ੍ਰਮ ਵਿੱਚ)। ਵਧੇਰੇ ਜਾਣਕਾਰੀ ਲਈ ਪੌਪਰ ਦੇ ਵਿਵਹਾਰ ਦੇ ਦਸਤਾਵੇਜ਼ਾਂ ਨੂੰ ਵੇਖੋ |
boundary |
ਸਤਰ | ਤੱਤ | 'clippingParents' |
ਟੂਲਟਿਪ ਦੀ ਓਵਰਫਲੋ ਸੀਮਾ ਸੀਮਾ (ਸਿਰਫ਼ ਪੌਪਰ ਦੇ ਰੋਕਥਾਮ ਓਵਰਫਲੋ ਮੋਡੀਫਾਇਰ 'ਤੇ ਲਾਗੂ ਹੁੰਦੀ ਹੈ)। ਮੂਲ ਰੂਪ ਵਿੱਚ ਇਹ ਹੈ 'clippingParents' ਅਤੇ ਇੱਕ HTMLElement ਹਵਾਲੇ ਨੂੰ ਸਵੀਕਾਰ ਕਰ ਸਕਦਾ ਹੈ (ਸਿਰਫ਼ JavaScript ਰਾਹੀਂ)। ਵਧੇਰੇ ਜਾਣਕਾਰੀ ਲਈ Popper's detectOverflow ਡੌਕਸ ਵੇਖੋ । |
customClass |
ਸਤਰ | ਫੰਕਸ਼ਨ | '' |
ਟੂਲਟਿੱਪ ਵਿੱਚ ਕਲਾਸਾਂ ਸ਼ਾਮਲ ਕਰੋ ਜਦੋਂ ਇਹ ਦਿਖਾਇਆ ਜਾਂਦਾ ਹੈ। ਨੋਟ ਕਰੋ ਕਿ ਇਹ ਕਲਾਸਾਂ ਟੈਮਪਲੇਟ ਵਿੱਚ ਦਰਸਾਏ ਗਏ ਕਿਸੇ ਵੀ ਕਲਾਸ ਤੋਂ ਇਲਾਵਾ ਜੋੜੀਆਂ ਜਾਣਗੀਆਂ। ਕਈ ਕਲਾਸਾਂ ਜੋੜਨ ਲਈ, ਉਹਨਾਂ ਨੂੰ ਖਾਲੀ ਥਾਂਵਾਂ ਨਾਲ ਵੱਖ ਕਰੋ: ਤੁਸੀਂ ਇੱਕ ਫੰਕਸ਼ਨ ਵੀ ਪਾਸ ਕਰ ਸਕਦੇ ਹੋ ਜਿਸ ਵਿੱਚ ਵਾਧੂ ਕਲਾਸ ਨਾਮਾਂ ਵਾਲੀ ਸਿੰਗਲ ਸਤਰ ਵਾਪਸ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ। |
sanitize |
ਬੁਲੀਅਨ | true |
ਸੈਨੀਟਾਈਜ਼ੇਸ਼ਨ ਨੂੰ ਸਮਰੱਥ ਜਾਂ ਅਯੋਗ ਕਰੋ। ਜੇਕਰ ਕਿਰਿਆਸ਼ੀਲ ਹੈ 'template' ਅਤੇ 'title' ਵਿਕਲਪਾਂ ਨੂੰ ਰੋਗਾਣੂ-ਮੁਕਤ ਕੀਤਾ ਜਾਵੇਗਾ। ਸਾਡੇ JavaScript ਦਸਤਾਵੇਜ਼ਾਂ ਵਿੱਚ ਸੈਨੀਟਾਈਜ਼ਰ ਸੈਕਸ਼ਨ ਦੇਖੋ । |
allowList |
ਵਸਤੂ | ਪੂਰਵ-ਨਿਰਧਾਰਤ ਮੁੱਲ | ਉਹ ਵਸਤੂ ਜਿਸ ਵਿੱਚ ਪ੍ਰਵਾਨਿਤ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਅਤੇ ਟੈਗ ਸ਼ਾਮਲ ਹਨ |
sanitizeFn |
null | ਫੰਕਸ਼ਨ | null |
ਇੱਥੇ ਤੁਸੀਂ ਆਪਣੇ ਖੁਦ ਦੇ ਸੈਨੀਟਾਈਜ਼ ਫੰਕਸ਼ਨ ਦੀ ਸਪਲਾਈ ਕਰ ਸਕਦੇ ਹੋ। ਇਹ ਲਾਭਦਾਇਕ ਹੋ ਸਕਦਾ ਹੈ ਜੇਕਰ ਤੁਸੀਂ ਸਵੱਛਤਾ ਕਰਨ ਲਈ ਸਮਰਪਿਤ ਲਾਇਬ੍ਰੇਰੀ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਪਸੰਦ ਕਰਦੇ ਹੋ। |
offset |
ਐਰੇ | ਸਤਰ | ਫੰਕਸ਼ਨ | [0, 0] |
ਟੂਲਟਿਪ ਦਾ ਇਸ ਦੇ ਟੀਚੇ ਦੇ ਅਨੁਸਾਰੀ ਔਫਸੈੱਟ। ਤੁਸੀਂ ਕਾਮੇ ਨਾਲ ਵੱਖ ਕੀਤੇ ਮੁੱਲਾਂ ਨਾਲ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਵਿੱਚ ਇੱਕ ਸਤਰ ਪਾਸ ਕਰ ਸਕਦੇ ਹੋ ਜਿਵੇਂ ਕਿ: ਜਦੋਂ ਇੱਕ ਫੰਕਸ਼ਨ ਆਫਸੈੱਟ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਪੋਪਰ ਪਲੇਸਮੈਂਟ, ਸੰਦਰਭ, ਅਤੇ ਪੌਪਰ ਨੂੰ ਇਸਦੇ ਪਹਿਲੇ ਆਰਗੂਮੈਂਟ ਦੇ ਰੂਪ ਵਿੱਚ ਇੱਕ ਵਸਤੂ ਨਾਲ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ। ਟਰਿਗਰਿੰਗ ਐਲੀਮੈਂਟ DOM ਨੋਡ ਨੂੰ ਦੂਜੀ ਆਰਗੂਮੈਂਟ ਵਜੋਂ ਪਾਸ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਫੰਕਸ਼ਨ ਨੂੰ ਦੋ ਨੰਬਰਾਂ ਦੇ ਨਾਲ ਇੱਕ ਐਰੇ ਵਾਪਸ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ: . ਵਧੇਰੇ ਜਾਣਕਾਰੀ ਲਈ ਪੌਪਰ ਦੇ ਆਫਸੈੱਟ ਦਸਤਾਵੇਜ਼ਾਂ ਨੂੰ ਵੇਖੋ । |
popperConfig |
null | ਵਸਤੂ | ਫੰਕਸ਼ਨ | null |
ਬੂਟਸਟਰੈਪ ਦੀ ਡਿਫਾਲਟ ਪੋਪਰ ਕੌਂਫਿਗਰੇਸ਼ਨ ਨੂੰ ਬਦਲਣ ਲਈ, ਪੌਪਰ ਦੀ ਸੰਰਚਨਾ ਵੇਖੋ । ਜਦੋਂ ਇੱਕ ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਪੌਪਰ ਕੌਂਫਿਗਰੇਸ਼ਨ ਬਣਾਉਣ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਇੱਕ ਆਬਜੈਕਟ ਨਾਲ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਿਸ ਵਿੱਚ ਬੂਟਸਟਰੈਪ ਦੀ ਡਿਫੌਲਟ ਪੋਪਰ ਸੰਰਚਨਾ ਹੁੰਦੀ ਹੈ। ਇਹ ਤੁਹਾਡੀ ਆਪਣੀ ਸੰਰਚਨਾ ਨਾਲ ਡਿਫੌਲਟ ਨੂੰ ਵਰਤਣ ਅਤੇ ਅਭੇਦ ਕਰਨ ਵਿੱਚ ਤੁਹਾਡੀ ਮਦਦ ਕਰਦਾ ਹੈ। ਫੰਕਸ਼ਨ ਨੂੰ ਪੌਪਰ ਲਈ ਇੱਕ ਸੰਰਚਨਾ ਵਸਤੂ ਵਾਪਸ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ। |
ਵਿਅਕਤੀਗਤ ਟੂਲਟਿਪਸ ਲਈ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ
ਵਿਅਕਤੀਗਤ ਟੂਲਟਿੱਪਾਂ ਲਈ ਵਿਕਲਪਾਂ ਨੂੰ ਵਿਕਲਪਿਕ ਤੌਰ 'ਤੇ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਦੁਆਰਾ ਨਿਰਧਾਰਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਉੱਪਰ ਦੱਸਿਆ ਗਿਆ ਹੈ।
ਨਾਲ ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਨਾpopperConfig
var tooltip = new bootstrap.Tooltip(element, {
popperConfig: function (defaultBsPopperConfig) {
// var newPopperConfig = {...}
// use defaultBsPopperConfig if needed...
// return newPopperConfig
}
})
ਢੰਗ
ਅਸਿੰਕ੍ਰੋਨਸ ਵਿਧੀਆਂ ਅਤੇ ਪਰਿਵਰਤਨ
ਸਾਰੀਆਂ API ਵਿਧੀਆਂ ਅਸਿੰਕ੍ਰੋਨਸ ਹਨ ਅਤੇ ਇੱਕ ਤਬਦੀਲੀ ਸ਼ੁਰੂ ਕਰਦੀਆਂ ਹਨ । ਪਰਿਵਰਤਨ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹੀ ਉਹ ਕਾਲਰ ਕੋਲ ਵਾਪਸ ਆਉਂਦੇ ਹਨ ਪਰ ਇਸ ਦੇ ਖਤਮ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ । ਇਸ ਤੋਂ ਇਲਾਵਾ, ਪਰਿਵਰਤਨ ਕਰਨ ਵਾਲੇ ਹਿੱਸੇ 'ਤੇ ਇੱਕ ਢੰਗ ਕਾਲ ਨੂੰ ਅਣਡਿੱਠ ਕੀਤਾ ਜਾਵੇਗਾ ।
ਦਿਖਾਓ
ਇੱਕ ਤੱਤ ਦੇ ਟੂਲਟਿਪ ਨੂੰ ਪ੍ਰਗਟ ਕਰਦਾ ਹੈ। ਟੂਲਟਿਪ ਅਸਲ ਵਿੱਚ ਵਿਖਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਆਉਂਦੀ ਹੈ (ਭਾਵ shown.bs.tooltip
ਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)। ਇਸਨੂੰ ਟੂਲਟਿਪ ਦਾ "ਮੈਨੁਅਲ" ਟ੍ਰਿਗਰਿੰਗ ਮੰਨਿਆ ਜਾਂਦਾ ਹੈ। ਜ਼ੀਰੋ-ਲੰਬਾਈ ਦੇ ਸਿਰਲੇਖਾਂ ਵਾਲੇ ਟੂਲਟਿੱਪ ਕਦੇ ਵੀ ਪ੍ਰਦਰਸ਼ਿਤ ਨਹੀਂ ਹੁੰਦੇ ਹਨ।
tooltip.show()
ਓਹਲੇ
ਕਿਸੇ ਤੱਤ ਦੀ ਟੂਲਟਿਪ ਨੂੰ ਲੁਕਾਉਂਦਾ ਹੈ। ਟੂਲਟਿਪ ਨੂੰ ਅਸਲ ਵਿੱਚ ਲੁਕਾਉਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਕਰਦਾ ਹੈ (ਭਾਵ hidden.bs.tooltip
ਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)। ਇਸਨੂੰ ਟੂਲਟਿਪ ਦਾ "ਮੈਨੁਅਲ" ਟ੍ਰਿਗਰਿੰਗ ਮੰਨਿਆ ਜਾਂਦਾ ਹੈ।
tooltip.hide()
ਟੌਗਲ
ਕਿਸੇ ਤੱਤ ਦੀ ਟੂਲਟਿਪ ਨੂੰ ਟੌਗਲ ਕਰਦਾ ਹੈ। ਟੂਲਟਿਪ ਦੇ ਅਸਲ ਵਿੱਚ ਦਿਖਾਏ ਜਾਂ ਲੁਕਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਕੋਲ ਵਾਪਸ ਆ ਜਾਂਦਾ ਹੈ (ਭਾਵ shown.bs.tooltip
ਜਾਂ hidden.bs.tooltip
ਘਟਨਾ ਵਾਪਰਨ ਤੋਂ ਪਹਿਲਾਂ)। ਇਸਨੂੰ ਟੂਲਟਿਪ ਦਾ "ਮੈਨੁਅਲ" ਟ੍ਰਿਗਰਿੰਗ ਮੰਨਿਆ ਜਾਂਦਾ ਹੈ।
tooltip.toggle()
ਨਿਪਟਾਰਾ
ਇੱਕ ਤੱਤ ਦੀ ਟੂਲਟਿਪ ਨੂੰ ਲੁਕਾਉਂਦਾ ਹੈ ਅਤੇ ਨਸ਼ਟ ਕਰਦਾ ਹੈ (DOM ਐਲੀਮੈਂਟ ਉੱਤੇ ਸਟੋਰ ਕੀਤੇ ਡੇਟਾ ਨੂੰ ਹਟਾਉਂਦਾ ਹੈ)। ਟੂਲਟਿਪਸ ਜੋ ਡੈਲੀਗੇਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ (ਜੋ ਵਿਕਲਪ ਦੀ ਵਰਤੋਂ ਕਰਕੇselector
ਬਣਾਏ ਗਏ ਹਨ ) ਨੂੰ ਵੰਸ਼ਜ ਟਰਿੱਗਰ ਤੱਤਾਂ 'ਤੇ ਵਿਅਕਤੀਗਤ ਤੌਰ 'ਤੇ ਨਸ਼ਟ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।
tooltip.dispose()
ਯੋਗ ਕਰੋ
ਇੱਕ ਤੱਤ ਦੇ ਟੂਲਟਿਪ ਨੂੰ ਦਿਖਾਉਣ ਦੀ ਯੋਗਤਾ ਦਿੰਦਾ ਹੈ। ਟੂਲਟਿਪਸ ਪੂਰਵ-ਨਿਰਧਾਰਤ ਤੌਰ 'ਤੇ ਸਮਰਥਿਤ ਹਨ।
tooltip.enable()
ਅਯੋਗ
ਕਿਸੇ ਤੱਤ ਦੇ ਟੂਲਟਿਪ ਨੂੰ ਦਿਖਾਉਣ ਦੀ ਯੋਗਤਾ ਨੂੰ ਹਟਾਉਂਦਾ ਹੈ। ਟੂਲਟਿਪ ਤਾਂ ਹੀ ਦਿਖਾਈ ਜਾ ਸਕੇਗੀ ਜੇਕਰ ਇਹ ਮੁੜ-ਸਮਰੱਥ ਹੋਵੇ।
tooltip.disable()
toggleEnabled
ਕਿਸੇ ਤੱਤ ਦੇ ਟੂਲਟਿਪ ਨੂੰ ਦਿਖਾਉਣ ਜਾਂ ਲੁਕਾਏ ਜਾਣ ਦੀ ਯੋਗਤਾ ਨੂੰ ਟੌਗਲ ਕਰਦਾ ਹੈ।
tooltip.toggleEnabled()
ਅੱਪਡੇਟ
ਕਿਸੇ ਤੱਤ ਦੇ ਟੂਲਟਿਪ ਦੀ ਸਥਿਤੀ ਨੂੰ ਅੱਪਡੇਟ ਕਰਦਾ ਹੈ।
tooltip.update()
getInstance
ਸਥਿਰ ਵਿਧੀ ਜੋ ਤੁਹਾਨੂੰ ਇੱਕ DOM ਤੱਤ ਨਾਲ ਸੰਬੰਧਿਤ ਟੂਲਟਿਪ ਉਦਾਹਰਨ ਪ੍ਰਾਪਤ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
getOrCreateInstance
ਸਥਿਰ ਵਿਧੀ ਜੋ ਤੁਹਾਨੂੰ ਇੱਕ DOM ਤੱਤ ਨਾਲ ਸਬੰਧਿਤ ਟੂਲਟਿਪ ਉਦਾਹਰਨ ਪ੍ਰਾਪਤ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੀ ਹੈ, ਜਾਂ ਇੱਕ ਨਵਾਂ ਬਣਾਉਣ ਦੀ ਸਥਿਤੀ ਵਿੱਚ ਇਹ ਸ਼ੁਰੂ ਨਹੀਂ ਕੀਤਾ ਗਿਆ ਸੀ
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
ਸਮਾਗਮ
ਘਟਨਾ ਦੀ ਕਿਸਮ | ਵਰਣਨ |
---|---|
show.bs.tooltip |
ਇਹ ਘਟਨਾ ਤੁਰੰਤ ਫਾਇਰ ਹੋ ਜਾਂਦੀ ਹੈ ਜਦੋਂ show ਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ। |
shown.bs.tooltip |
ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਟੂਲਟਿਪ ਨੂੰ ਉਪਭੋਗਤਾ ਲਈ ਦ੍ਰਿਸ਼ਮਾਨ ਬਣਾਇਆ ਜਾਂਦਾ ਹੈ (CSS ਪਰਿਵਰਤਨ ਪੂਰਾ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)। |
hide.bs.tooltip |
ਇਸ ਇਵੈਂਟ ਨੂੰ ਤੁਰੰਤ ਫਾਇਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਜਦੋਂ hide ਉਦਾਹਰਨ ਵਿਧੀ ਨੂੰ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ। |
hidden.bs.tooltip |
ਇਹ ਇਵੈਂਟ ਉਦੋਂ ਚਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਟੂਲਟਿਪ ਨੂੰ ਉਪਭੋਗਤਾ ਤੋਂ ਲੁਕਾਇਆ ਜਾਣਾ ਖਤਮ ਹੋ ਜਾਂਦਾ ਹੈ (CSS ਪਰਿਵਰਤਨ ਪੂਰਾ ਹੋਣ ਦੀ ਉਡੀਕ ਕਰੇਗਾ)। |
inserted.bs.tooltip |
ਇਹ ਇਵੈਂਟ ਇਵੈਂਟ ਤੋਂ ਬਾਅਦ ਫਾਇਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ show.bs.tooltip ਜਦੋਂ ਟੂਲਟਿਪ ਟੈਂਪਲੇਟ ਨੂੰ DOM ਵਿੱਚ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ। |
var myTooltipEl = document.getElementById('myTooltip')
var tooltip = new bootstrap.Tooltip(myTooltipEl)
myTooltipEl.addEventListener('hidden.bs.tooltip', function () {
// do something...
})
tooltip.hide()