ਮੁੱਖ ਸਮੱਗਰੀ ਤੇ ਜਾਓ ਡੌਕਸ ਨੈਵੀਗੇਸ਼ਨ 'ਤੇ ਜਾਓ
in English

ਟੂਲਟਿੱਪ

ਸਥਾਨਕ ਸਿਰਲੇਖ ਸਟੋਰੇਜ ਲਈ ਐਨੀਮੇਸ਼ਨਾਂ ਅਤੇ ਡੇਟਾ-ਬੀਐਸ-ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਲਈ CSS3 ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ CSS ਅਤੇ JavaScript ਨਾਲ ਕਸਟਮ ਬੂਟਸਟਰੈਪ ਟੂਲਟਿਪਸ ਨੂੰ ਜੋੜਨ ਲਈ ਦਸਤਾਵੇਜ਼ ਅਤੇ ਉਦਾਹਰਨਾਂ।

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

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

  • ਟੂਲਟਿੱਪ ਪੋਜੀਸ਼ਨਿੰਗ ਲਈ ਤੀਜੀ ਧਿਰ ਲਾਇਬ੍ਰੇਰੀ ਪੋਪਰ 'ਤੇ ਨਿਰਭਰ ਕਰਦੇ ਹਨ। ਤੁਹਾਨੂੰ bootstrap.js ਤੋਂ ਪਹਿਲਾਂ popper.min.jsbootstrap.bundle.min.js ਨੂੰ ਸ਼ਾਮਲ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ ਜਾਂ ਟੂਲਟਿਪਸ ਨੂੰ ਕੰਮ ਕਰਨ ਲਈ bootstrap.bundle.jsਕ੍ਰਮ ਵਿੱਚ ਪੌਪਰ ਸ਼ਾਮਲ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ।
  • ਟੂਲਟਿਪਸ ਪ੍ਰਦਰਸ਼ਨ ਦੇ ਕਾਰਨਾਂ ਲਈ ਚੁਣੀਆਂ ਜਾਂਦੀਆਂ ਹਨ, ਇਸਲਈ ਤੁਹਾਨੂੰ ਉਹਨਾਂ ਨੂੰ ਖੁਦ ਸ਼ੁਰੂ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ
  • ਜ਼ੀਰੋ-ਲੰਬਾਈ ਦੇ ਸਿਰਲੇਖਾਂ ਵਾਲੇ ਟੂਲਟਿੱਪ ਕਦੇ ਵੀ ਪ੍ਰਦਰਸ਼ਿਤ ਨਹੀਂ ਹੁੰਦੇ ਹਨ।
  • container: 'body'ਵਧੇਰੇ ਗੁੰਝਲਦਾਰ ਭਾਗਾਂ (ਜਿਵੇਂ ਸਾਡੇ ਇਨਪੁਟ ਸਮੂਹ, ਬਟਨ ਸਮੂਹ, ਆਦਿ) ਵਿੱਚ ਪੇਸ਼ਕਾਰੀ ਸਮੱਸਿਆਵਾਂ ਤੋਂ ਬਚਣ ਲਈ ਸਪਸ਼ਟ ਕਰੋ।
  • ਲੁਕਵੇਂ ਤੱਤਾਂ 'ਤੇ ਟੂਲਟਿੱਪਾਂ ਨੂੰ ਚਾਲੂ ਕਰਨਾ ਕੰਮ ਨਹੀਂ ਕਰੇਗਾ।
  • ਲਈ ਟੂਲਟਿਪਸ .disabledਜਾਂ disabledਐਲੀਮੈਂਟਸ ਨੂੰ ਰੈਪਰ ਐਲੀਮੈਂਟ 'ਤੇ ਚਾਲੂ ਕੀਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ।
  • ਜਦੋਂ ਇੱਕ ਤੋਂ ਵੱਧ ਲਾਈਨਾਂ ਫੈਲਾਉਣ ਵਾਲੇ ਹਾਈਪਰਲਿੰਕਸ ਤੋਂ ਸ਼ੁਰੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਟੂਲਟਿਪਸ ਕੇਂਦਰਿਤ ਹੋਣਗੇ। ਇਸ ਵਿਵਹਾਰ ਤੋਂ ਬਚਣ ਲਈ white-space: nowrap;ਆਪਣੇ ਐੱਸ 'ਤੇ ਵਰਤੋਂ ।<a>
  • ਟੂਲਟਿੱਪਾਂ ਨੂੰ ਉਹਨਾਂ ਦੇ ਅਨੁਸਾਰੀ ਤੱਤਾਂ ਨੂੰ DOM ਤੋਂ ਹਟਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਲੁਕਾਇਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ।
  • ਟੂਲਟਿਪਸ ਨੂੰ ਇੱਕ ਸ਼ੈਡੋ DOM ਦੇ ਅੰਦਰ ਇੱਕ ਤੱਤ ਦੇ ਕਾਰਨ ਸ਼ੁਰੂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ।
ਡਿਫੌਲਟ ਰੂਪ ਵਿੱਚ, ਇਹ ਕੰਪੋਨੈਂਟ ਬਿਲਟ-ਇਨ ਕੰਟੈਂਟ ਸੈਨੀਟਾਈਜ਼ਰ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ, ਜੋ ਕਿਸੇ ਵੀ HTML ਐਲੀਮੈਂਟਸ ਨੂੰ ਬਾਹਰ ਕੱਢਦਾ ਹੈ ਜਿਸਦੀ ਸਪੱਸ਼ਟ ਤੌਰ 'ਤੇ ਇਜਾਜ਼ਤ ਨਹੀਂ ਹੈ। ਹੋਰ ਵੇਰਵਿਆਂ ਲਈ ਸਾਡੇ JavaScript ਦਸਤਾਵੇਜ਼ਾਂ ਵਿੱਚ ਸੈਨੀਟਾਈਜ਼ਰ ਸੈਕਸ਼ਨ ਦੇਖੋ ।
ਇਸ ਕੰਪੋਨੈਂਟ ਦਾ ਐਨੀਮੇਸ਼ਨ ਪ੍ਰਭਾਵ 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: autooverflow: scroll.table-responsiveboundarypopperConfig'clippingParents'document.body

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
  boundary: document.body // or document.querySelector('#boundary')
})

ਮਾਰਕਅੱਪ

ਟੂਲਟਿਪ ਲਈ ਲੋੜੀਂਦਾ ਮਾਰਕਅੱਪ ਸਿਰਫ਼ ਇੱਕ dataਵਿਸ਼ੇਸ਼ਤਾ ਹੈ ਅਤੇ titleHTML ਤੱਤ 'ਤੇ ਤੁਸੀਂ ਟੂਲਟਿਪ ਲੈਣਾ ਚਾਹੁੰਦੇ ਹੋ। ਇੱਕ ਟੂਲਟਿਪ ਦਾ ਤਿਆਰ ਕੀਤਾ ਮਾਰਕਅੱਪ ਕਾਫ਼ੀ ਸਧਾਰਨ ਹੈ, ਹਾਲਾਂਕਿ ਇਸਨੂੰ ਇੱਕ ਸਥਿਤੀ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ (ਮੂਲ ਰੂਪ ਵਿੱਚ, 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

ਟੂਲਟਿਪ ਨੂੰ ਕਿਸੇ ਖਾਸ ਤੱਤ ਨਾਲ ਜੋੜਦਾ ਹੈ। ਉਦਾਹਰਨ: container: 'body'. ਇਹ ਵਿਕਲਪ ਖਾਸ ਤੌਰ 'ਤੇ ਲਾਭਦਾਇਕ ਹੈ ਕਿਉਂਕਿ ਇਹ ਤੁਹਾਨੂੰ ਦਸਤਾਵੇਜ਼ ਦੇ ਪ੍ਰਵਾਹ ਵਿੱਚ ਟੂਲਟਿਪ ਨੂੰ ਟਰਿਗਰਿੰਗ ਐਲੀਮੈਂਟ ਦੇ ਨੇੜੇ ਰੱਖਣ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ - ਜੋ ਵਿੰਡੋ ਰੀਸਾਈਜ਼ ਦੌਰਾਨ ਟੂਲਟਿੱਪ ਨੂੰ ਟਰਿਗਰਿੰਗ ਐਲੀਮੈਂਟ ਤੋਂ ਦੂਰ ਜਾਣ ਤੋਂ ਰੋਕਦਾ ਹੈ।

delay ਨੰਬਰ | ਵਸਤੂ 0

ਟੂਲਟਿਪ (ms) ਨੂੰ ਦਿਖਾਉਣ ਅਤੇ ਲੁਕਾਉਣ ਵਿੱਚ ਦੇਰੀ - ਮੈਨੂਅਲ ਟਰਿੱਗਰ ਕਿਸਮ 'ਤੇ ਲਾਗੂ ਨਹੀਂ ਹੁੰਦਾ

ਜੇਕਰ ਕੋਈ ਨੰਬਰ ਸਪਲਾਈ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਦੇਰੀ ਨੂੰ ਲੁਕਾਉਣ/ਸ਼ੋਅ ਦੋਵਾਂ ਲਈ ਲਾਗੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ

ਵਸਤੂ ਬਣਤਰ ਹੈ:delay: { "show": 500, "hide": 100 }

html ਬੁਲੀਅਨ false

ਟੂਲਟਿਪ ਵਿੱਚ HTML ਦੀ ਆਗਿਆ ਦਿਓ।

ਜੇਕਰ ਸਹੀ ਹੈ, ਤਾਂ ਟੂਲਟਿਪ ਵਿੱਚ HTML ਟੈਗਸ ਨੂੰ ਟੂਲਟਿਪ titleਵਿੱਚ ਰੈਂਡਰ ਕੀਤਾ ਜਾਵੇਗਾ। ਜੇਕਰ ਗਲਤ ਹੈ, ਤਾਂ innerTextਸੰਪੱਤੀ ਦੀ ਵਰਤੋਂ DOM ਵਿੱਚ ਸਮੱਗਰੀ ਪਾਉਣ ਲਈ ਕੀਤੀ ਜਾਵੇਗੀ।

ਜੇਕਰ ਤੁਸੀਂ XSS ਹਮਲਿਆਂ ਬਾਰੇ ਚਿੰਤਤ ਹੋ ਤਾਂ ਟੈਕਸਟ ਦੀ ਵਰਤੋਂ ਕਰੋ।

placement ਸਤਰ | ਫੰਕਸ਼ਨ 'top'

ਟੂਲਟਿਪ ਦੀ ਸਥਿਤੀ ਕਿਵੇਂ ਕਰੀਏ - ਆਟੋ | ਸਿਖਰ | ਥੱਲੇ | ਖੱਬੇ | ਸਹੀ
ਜਦੋਂ autoਨਿਸ਼ਚਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਇਹ ਟੂਲਟਿਪ ਨੂੰ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਮੁੜ ਦਿਸ਼ਾ ਦੇਵੇਗਾ।

ਜਦੋਂ ਇੱਕ ਫੰਕਸ਼ਨ ਪਲੇਸਮੈਂਟ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਟੂਲਟਿਪ DOM ਨੋਡ ਨੂੰ ਇਸਦੇ ਪਹਿਲੇ ਆਰਗੂਮੈਂਟ ਵਜੋਂ ਅਤੇ ਟਰਿਗਰਿੰਗ ਐਲੀਮੈਂਟ DOM ਨੋਡ ਨੂੰ ਇਸਦੇ ਦੂਜੇ ਦੇ ਰੂਪ ਵਿੱਚ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ। thisਸੰਦਰਭ ਟੂਲਟਿਪ ਉਦਾਹਰਨ ਲਈ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ ।

selector ਸਤਰ | ਝੂਠਾ false ਜੇਕਰ ਇੱਕ ਚੋਣਕਾਰ ਪ੍ਰਦਾਨ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਟੂਲਟਿਪ ਆਬਜੈਕਟ ਨਿਰਧਾਰਤ ਟੀਚਿਆਂ ਨੂੰ ਸੌਂਪੇ ਜਾਣਗੇ। jQuery.onਅਭਿਆਸ ਵਿੱਚ, ਇਸਦੀ ਵਰਤੋਂ ਗਤੀਸ਼ੀਲ ਤੌਰ 'ਤੇ ਸ਼ਾਮਲ ਕੀਤੇ ਗਏ DOM ਐਲੀਮੈਂਟਸ ( ਸਪੋਰਟ) ਲਈ ਟੂਲਟਿੱਪਾਂ ਨੂੰ ਲਾਗੂ ਕਰਨ ਲਈ ਵੀ ਕੀਤੀ ਜਾਂਦੀ ਹੈ । ਇਹ ਅਤੇ ਇੱਕ ਜਾਣਕਾਰੀ ਭਰਪੂਰ ਉਦਾਹਰਨ ਦੇਖੋ ।
template ਸਤਰ '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

ਟੂਲਟਿਪ ਬਣਾਉਣ ਵੇਲੇ ਵਰਤਣ ਲਈ ਆਧਾਰ HTML।

ਟੂਲਟਿਪ titleਨੂੰ ਵਿੱਚ ਇੰਜੈਕਟ ਕੀਤਾ ਜਾਵੇਗਾ .tooltip-inner

.tooltip-arrowਟੂਲਟਿਪ ਦਾ ਤੀਰ ਬਣ ਜਾਵੇਗਾ।

ਸਭ ਤੋਂ ਬਾਹਰੀ ਰੈਪਰ ਐਲੀਮੈਂਟ ਵਿੱਚ .tooltipਕਲਾਸ ਅਤੇ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ role="tooltip"

title ਸਤਰ | ਤੱਤ | ਫੰਕਸ਼ਨ ''

ਜੇਕਰ titleਵਿਸ਼ੇਸ਼ਤਾ ਮੌਜੂਦ ਨਹੀਂ ਹੈ ਤਾਂ ਪੂਰਵ-ਨਿਰਧਾਰਤ ਸਿਰਲੇਖ ਮੁੱਲ।

ਜੇਕਰ ਕੋਈ ਫੰਕਸ਼ਨ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਉਸ thisਤੱਤ ਦੇ ਸੰਦਰਭ ਦੇ ਨਾਲ ਬੁਲਾਇਆ ਜਾਵੇਗਾ ਜਿਸ ਨਾਲ ਟੂਲਟਿੱਪ ਜੁੜੀ ਹੈ।

trigger ਸਤਰ 'hover focus'

ਟੂਲਟਿਪ ਨੂੰ ਕਿਵੇਂ ਚਾਲੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ - ਕਲਿੱਕ ਕਰੋ | ਹੋਵਰ | ਫੋਕਸ | ਮੈਨੁਅਲ ਤੁਸੀਂ ਕਈ ਟਰਿਗਰ ਪਾਸ ਕਰ ਸਕਦੇ ਹੋ; ਉਹਨਾਂ ਨੂੰ ਇੱਕ ਸਪੇਸ ਨਾਲ ਵੱਖ ਕਰੋ।

'manual'.show()ਦਰਸਾਉਂਦਾ ਹੈ ਕਿ ਟੂਲਟਿਪ ਨੂੰ , .hide()ਅਤੇ .toggle()ਢੰਗਾਂ ਰਾਹੀਂ ਪ੍ਰੋਗਰਾਮੇਟਿਕ ਤੌਰ 'ਤੇ ਚਾਲੂ ਕੀਤਾ ਜਾਵੇਗਾ ; ਇਸ ਮੁੱਲ ਨੂੰ ਕਿਸੇ ਹੋਰ ਟਰਿੱਗਰ ਨਾਲ ਜੋੜਿਆ ਨਹੀਂ ਜਾ ਸਕਦਾ ਹੈ।

'hover'ਆਪਣੇ ਆਪ ਟੂਲਟਿਪਸ ਦੇ ਨਤੀਜੇ ਵਜੋਂ ਹੋਣਗੇ ਜੋ ਕੀਬੋਰਡ ਦੁਆਰਾ ਚਾਲੂ ਨਹੀਂ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ, ਅਤੇ ਕੇਵਲ ਤਾਂ ਹੀ ਵਰਤੇ ਜਾਣੇ ਚਾਹੀਦੇ ਹਨ ਜੇਕਰ ਕੀਬੋਰਡ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਉਹੀ ਜਾਣਕਾਰੀ ਪਹੁੰਚਾਉਣ ਦੇ ਵਿਕਲਪਿਕ ਤਰੀਕੇ ਮੌਜੂਦ ਹਨ।

fallbackPlacements ਐਰੇ ['top', 'right', 'bottom', 'left'] ਐਰੇ ਵਿੱਚ ਪਲੇਸਮੈਂਟਾਂ ਦੀ ਸੂਚੀ ਪ੍ਰਦਾਨ ਕਰਕੇ ਫਾਲਬੈਕ ਪਲੇਸਮੈਂਟ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ (ਤਰਜੀਹੀ ਦੇ ਕ੍ਰਮ ਵਿੱਚ)। ਵਧੇਰੇ ਜਾਣਕਾਰੀ ਲਈ ਪੌਪਰ ਦੇ ਵਿਵਹਾਰ ਦੇ ਦਸਤਾਵੇਜ਼ਾਂ ਨੂੰ ਵੇਖੋ
boundary ਸਤਰ | ਤੱਤ 'clippingParents' ਟੂਲਟਿਪ ਦੀ ਓਵਰਫਲੋ ਸੀਮਾ ਸੀਮਾ (ਸਿਰਫ਼ ਪੌਪਰ ਦੇ ਰੋਕਥਾਮ ਓਵਰਫਲੋ ਮੋਡੀਫਾਇਰ 'ਤੇ ਲਾਗੂ ਹੁੰਦੀ ਹੈ)। ਮੂਲ ਰੂਪ ਵਿੱਚ ਇਹ ਹੈ 'clippingParents'ਅਤੇ ਇੱਕ HTMLElement ਹਵਾਲੇ ਨੂੰ ਸਵੀਕਾਰ ਕਰ ਸਕਦਾ ਹੈ (ਸਿਰਫ਼ JavaScript ਰਾਹੀਂ)। ਵਧੇਰੇ ਜਾਣਕਾਰੀ ਲਈ Popper's detectOverflow ਡੌਕਸ ਵੇਖੋ
customClass ਸਤਰ | ਫੰਕਸ਼ਨ ''

ਟੂਲਟਿੱਪ ਵਿੱਚ ਕਲਾਸਾਂ ਸ਼ਾਮਲ ਕਰੋ ਜਦੋਂ ਇਹ ਦਿਖਾਇਆ ਜਾਂਦਾ ਹੈ। ਨੋਟ ਕਰੋ ਕਿ ਇਹ ਕਲਾਸਾਂ ਟੈਮਪਲੇਟ ਵਿੱਚ ਦਰਸਾਏ ਗਏ ਕਿਸੇ ਵੀ ਕਲਾਸ ਤੋਂ ਇਲਾਵਾ ਜੋੜੀਆਂ ਜਾਣਗੀਆਂ। ਕਈ ਕਲਾਸਾਂ ਜੋੜਨ ਲਈ, ਉਹਨਾਂ ਨੂੰ ਖਾਲੀ ਥਾਂਵਾਂ ਨਾਲ ਵੱਖ ਕਰੋ: 'class-1 class-2'.

ਤੁਸੀਂ ਇੱਕ ਫੰਕਸ਼ਨ ਵੀ ਪਾਸ ਕਰ ਸਕਦੇ ਹੋ ਜਿਸ ਵਿੱਚ ਵਾਧੂ ਕਲਾਸ ਨਾਮਾਂ ਵਾਲੀ ਸਿੰਗਲ ਸਤਰ ਵਾਪਸ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ।

sanitize ਬੁਲੀਅਨ true ਸੈਨੀਟਾਈਜ਼ੇਸ਼ਨ ਨੂੰ ਸਮਰੱਥ ਜਾਂ ਅਯੋਗ ਕਰੋ। ਜੇਕਰ ਕਿਰਿਆਸ਼ੀਲ ਹੈ 'template'ਅਤੇ 'title'ਵਿਕਲਪਾਂ ਨੂੰ ਰੋਗਾਣੂ-ਮੁਕਤ ਕੀਤਾ ਜਾਵੇਗਾ। ਸਾਡੇ JavaScript ਦਸਤਾਵੇਜ਼ਾਂ ਵਿੱਚ ਸੈਨੀਟਾਈਜ਼ਰ ਸੈਕਸ਼ਨ ਦੇਖੋ ।
allowList ਵਸਤੂ ਪੂਰਵ-ਨਿਰਧਾਰਤ ਮੁੱਲ ਉਹ ਵਸਤੂ ਜਿਸ ਵਿੱਚ ਪ੍ਰਵਾਨਿਤ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਅਤੇ ਟੈਗ ਸ਼ਾਮਲ ਹਨ
sanitizeFn null | ਫੰਕਸ਼ਨ null ਇੱਥੇ ਤੁਸੀਂ ਆਪਣੇ ਖੁਦ ਦੇ ਸੈਨੀਟਾਈਜ਼ ਫੰਕਸ਼ਨ ਦੀ ਸਪਲਾਈ ਕਰ ਸਕਦੇ ਹੋ। ਇਹ ਲਾਭਦਾਇਕ ਹੋ ਸਕਦਾ ਹੈ ਜੇਕਰ ਤੁਸੀਂ ਸਵੱਛਤਾ ਕਰਨ ਲਈ ਸਮਰਪਿਤ ਲਾਇਬ੍ਰੇਰੀ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਪਸੰਦ ਕਰਦੇ ਹੋ।
offset ਐਰੇ | ਸਤਰ | ਫੰਕਸ਼ਨ [0, 0]

ਟੂਲਟਿਪ ਦਾ ਇਸ ਦੇ ਟੀਚੇ ਦੇ ਅਨੁਸਾਰੀ ਔਫਸੈੱਟ। ਤੁਸੀਂ ਕਾਮੇ ਨਾਲ ਵੱਖ ਕੀਤੇ ਮੁੱਲਾਂ ਨਾਲ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਵਿੱਚ ਇੱਕ ਸਤਰ ਪਾਸ ਕਰ ਸਕਦੇ ਹੋ ਜਿਵੇਂ ਕਿ:data-bs-offset="10,20"

ਜਦੋਂ ਇੱਕ ਫੰਕਸ਼ਨ ਆਫਸੈੱਟ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਪੋਪਰ ਪਲੇਸਮੈਂਟ, ਸੰਦਰਭ, ਅਤੇ ਪੌਪਰ ਨੂੰ ਇਸਦੇ ਪਹਿਲੇ ਆਰਗੂਮੈਂਟ ਦੇ ਰੂਪ ਵਿੱਚ ਇੱਕ ਵਸਤੂ ਨਾਲ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ। ਟਰਿਗਰਿੰਗ ਐਲੀਮੈਂਟ DOM ਨੋਡ ਨੂੰ ਦੂਜੀ ਆਰਗੂਮੈਂਟ ਵਜੋਂ ਪਾਸ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਫੰਕਸ਼ਨ ਨੂੰ ਦੋ ਨੰਬਰਾਂ ਦੇ ਨਾਲ ਇੱਕ ਐਰੇ ਵਾਪਸ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ: .[skidding, distance]

ਵਧੇਰੇ ਜਾਣਕਾਰੀ ਲਈ ਪੌਪਰ ਦੇ ਆਫਸੈੱਟ ਦਸਤਾਵੇਜ਼ਾਂ ਨੂੰ ਵੇਖੋ ।

popperConfig null | ਵਸਤੂ | ਫੰਕਸ਼ਨ null

ਬੂਟਸਟਰੈਪ ਦੀ ਡਿਫਾਲਟ ਪੋਪਰ ਕੌਂਫਿਗਰੇਸ਼ਨ ਨੂੰ ਬਦਲਣ ਲਈ, ਪੌਪਰ ਦੀ ਸੰਰਚਨਾ ਵੇਖੋ ।

ਜਦੋਂ ਇੱਕ ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਪੌਪਰ ਕੌਂਫਿਗਰੇਸ਼ਨ ਬਣਾਉਣ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਇੱਕ ਆਬਜੈਕਟ ਨਾਲ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ ਜਿਸ ਵਿੱਚ ਬੂਟਸਟਰੈਪ ਦੀ ਡਿਫੌਲਟ ਪੋਪਰ ਸੰਰਚਨਾ ਹੁੰਦੀ ਹੈ। ਇਹ ਤੁਹਾਡੀ ਆਪਣੀ ਸੰਰਚਨਾ ਨਾਲ ਡਿਫੌਲਟ ਨੂੰ ਵਰਤਣ ਅਤੇ ਅਭੇਦ ਕਰਨ ਵਿੱਚ ਤੁਹਾਡੀ ਮਦਦ ਕਰਦਾ ਹੈ। ਫੰਕਸ਼ਨ ਨੂੰ ਪੌਪਰ ਲਈ ਇੱਕ ਸੰਰਚਨਾ ਵਸਤੂ ਵਾਪਸ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ।

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

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

ਨਾਲ ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਨਾpopperConfig

var tooltip = new bootstrap.Tooltip(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

ਢੰਗ

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

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

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

ਦਿਖਾਓ

ਇੱਕ ਤੱਤ ਦੇ ਟੂਲਟਿਪ ਨੂੰ ਪ੍ਰਗਟ ਕਰਦਾ ਹੈ। ਟੂਲਟਿਪ ਅਸਲ ਵਿੱਚ ਵਿਖਾਏ ਜਾਣ ਤੋਂ ਪਹਿਲਾਂ ਕਾਲਰ ਨੂੰ ਵਾਪਸ ਆਉਂਦੀ ਹੈ (ਭਾਵ 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()