Source

ਟੂਲਟਿੱਪ

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

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

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

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

ਇਹ ਸਭ ਮਿਲ ਗਿਆ? ਬਹੁਤ ਵਧੀਆ, ਆਓ ਦੇਖੀਏ ਕਿ ਉਹ ਕੁਝ ਉਦਾਹਰਣਾਂ ਨਾਲ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ।

ਉਦਾਹਰਨ: ਹਰ ਥਾਂ ਟੂਲਟਿੱਪਾਂ ਨੂੰ ਸਮਰੱਥ ਬਣਾਓ

ਇੱਕ ਪੰਨੇ 'ਤੇ ਸਾਰੇ ਟੂਲਟਿਪਸ ਨੂੰ ਸ਼ੁਰੂ ਕਰਨ ਦਾ ਇੱਕ ਤਰੀਕਾ ਉਹਨਾਂ ਦੀ data-toggleਵਿਸ਼ੇਸ਼ਤਾ ਦੁਆਰਾ ਉਹਨਾਂ ਨੂੰ ਚੁਣਨਾ ਹੋਵੇਗਾ:

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

ਉਦਾਹਰਨਾਂ

ਟੂਲਟਿਪਸ ਦੇਖਣ ਲਈ ਹੇਠਾਂ ਦਿੱਤੇ ਲਿੰਕਾਂ 'ਤੇ ਹੋਵਰ ਕਰੋ:

ਤੰਗ ਪੈਂਟ ਅਗਲੇ ਪੱਧਰ ਦੇ ਕੇਫੀਯੇਹ ਤੁਸੀਂ ਸ਼ਾਇਦ ਉਹਨਾਂ ਬਾਰੇ ਨਹੀਂ ਸੁਣਿਆ ਹੋਵੇਗਾ। ਫੋਟੋ ਬੂਥ ਦਾੜ੍ਹੀ ਕੱਚੀ ਡੈਨੀਮ ਲੈਟਰਪ੍ਰੈਸ ਸ਼ਾਕਾਹਾਰੀ ਮੈਸੇਂਜਰ ਬੈਗ ਸਟੰਪਟਾਊਨ। ਫਾਰਮ-ਟੂ-ਟੇਬਲ ਸੀਟੈਨ, ਮੈਕਸਵੀਨੀ ਦੇ ਫਿਕਸੀ ਸਸਟੇਨੇਬਲ ਕਵਿਨੋਆ 8-ਬਿਟ ਅਮਰੀਕੀ ਲਿਬਾਸ ਵਿੱਚ ਟੈਰੀ ਰਿਚਰਡਸਨ ਵਿਨਾਇਲ ਚੈਂਬਰੇ ਹੈ। ਦਾੜ੍ਹੀ ਸਟੰਪਟਾਊਨ, ਕਾਰਡਿਗਨਸ ਬੈਨ ਮੀ ਲੋਮੋ ਥੰਡਰਕੇਟਸ। ਟੋਫੂ ਬਾਇਓਡੀਜ਼ਲ ਵਿਲੀਅਮਸਬਰਗ ਮਾਰਫਾ, ਚਾਰ ਲੋਕੋ ਮੈਕਸਵੀਨੀ ਦੀ ਕਲੀਨਜ਼ ਸ਼ਾਕਾਹਾਰੀ ਚੈਂਬਰੇ। ਇੱਕ ਸੱਚਮੁੱਚ ਵਿਅੰਗਾਤਮਕ ਕਾਰੀਗਰ ਜੋ ਵੀ ਕੀਟਾਰ, ਸੀਨਸਟਰ ਫਾਰਮ-ਟੂ-ਟੇਬਲ ਬੈਂਕਸੀ ਔਸਟਿਨ ਟਵਿੱਟਰ ਹੈਂਡਲ ਫ੍ਰੀਗਨ ਕ੍ਰੇਡ ਕੱਚਾ ਡੈਨੀਮ ਸਿੰਗਲ-ਓਰੀਜਨ ਕੌਫੀ ਵਾਇਰਲ।

ਚਾਰ ਟੂਲਟਿੱਪ ਦਿਸ਼ਾਵਾਂ ਦੇਖਣ ਲਈ ਹੇਠਾਂ ਦਿੱਤੇ ਬਟਨਾਂ 'ਤੇ ਹੋਵਰ ਕਰੋ: ਉੱਪਰ, ਸੱਜੇ, ਹੇਠਾਂ ਅਤੇ ਖੱਬੇ।

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

ਨਾਮ ਟਾਈਪ ਕਰੋ ਡਿਫਾਲਟ ਵਰਣਨ
ਐਨੀਮੇਸ਼ਨ ਬੁਲੀਅਨ ਸੱਚ ਹੈ ਟੂਲਟਿਪ 'ਤੇ CSS ਫੇਡ ਤਬਦੀਲੀ ਲਾਗੂ ਕਰੋ
ਕੰਟੇਨਰ ਸਤਰ | ਤੱਤ | ਝੂਠਾ ਝੂਠਾ

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

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

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

ਵਸਤੂ ਬਣਤਰ ਹੈ:delay: { "show": 500, "hide": 100 }
html ਬੁਲੀਅਨ ਝੂਠਾ

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

ਜੇਕਰ ਸਹੀ ਹੈ, ਤਾਂ ਟੂਲਟਿਪ ਵਿੱਚ HTML ਟੈਗਸ ਨੂੰ ਟੂਲਟਿਪ titleਵਿੱਚ ਰੈਂਡਰ ਕੀਤਾ ਜਾਵੇਗਾ। ਜੇਕਰ ਗਲਤ ਹੈ, ਤਾਂ jQuery ਦੀ textਵਿਧੀ DOM ਵਿੱਚ ਸਮੱਗਰੀ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਵਰਤੀ ਜਾਵੇਗੀ।

ਜੇਕਰ ਤੁਸੀਂ XSS ਹਮਲਿਆਂ ਬਾਰੇ ਚਿੰਤਤ ਹੋ ਤਾਂ ਟੈਕਸਟ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਪਲੇਸਮੈਂਟ ਸਤਰ | ਫੰਕਸ਼ਨ 'ਸਿਖਰ'

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

ਜਦੋਂ ਇੱਕ ਫੰਕਸ਼ਨ ਪਲੇਸਮੈਂਟ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਟੂਲਟਿਪ DOM ਨੋਡ ਨੂੰ ਇਸਦੇ ਪਹਿਲੇ ਆਰਗੂਮੈਂਟ ਵਜੋਂ ਅਤੇ ਟਰਿਗਰਿੰਗ ਐਲੀਮੈਂਟ DOM ਨੋਡ ਨੂੰ ਇਸਦੇ ਦੂਜੇ ਦੇ ਰੂਪ ਵਿੱਚ ਬੁਲਾਇਆ ਜਾਂਦਾ ਹੈ। thisਸੰਦਰਭ ਟੂਲਟਿਪ ਉਦਾਹਰਨ ਲਈ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ ।
ਚੋਣਕਾਰ ਸਤਰ | ਝੂਠਾ ਝੂਠਾ ਜੇਕਰ ਇੱਕ ਚੋਣਕਾਰ ਪ੍ਰਦਾਨ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਟੂਲਟਿਪ ਆਬਜੈਕਟ ਨਿਰਧਾਰਤ ਟੀਚਿਆਂ ਨੂੰ ਸੌਂਪੇ ਜਾਣਗੇ। ਅਭਿਆਸ ਵਿੱਚ, ਇਸਦੀ ਵਰਤੋਂ ਗਤੀਸ਼ੀਲ HTML ਸਮੱਗਰੀ ਨੂੰ ਪੌਪਓਵਰ ਜੋੜਨ ਲਈ ਯੋਗ ਬਣਾਉਣ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਹ ਅਤੇ ਇੱਕ ਜਾਣਕਾਰੀ ਭਰਪੂਰ ਉਦਾਹਰਨ ਦੇਖੋ ।
ਟੈਮਪਲੇਟ ਸਤਰ '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'

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

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

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

ਸਭ ਤੋਂ ਬਾਹਰੀ ਰੈਪਰ ਐਲੀਮੈਂਟ ਵਿੱਚ .tooltipਕਲਾਸ ਅਤੇ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ role="tooltip"।
ਸਿਰਲੇਖ ਸਤਰ | ਤੱਤ | ਫੰਕਸ਼ਨ ''

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

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

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

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

'hover'ਆਪਣੇ ਆਪ ਟੂਲਟਿਪਸ ਦੇ ਨਤੀਜੇ ਵਜੋਂ ਹੋਣਗੇ ਜੋ ਕੀਬੋਰਡ ਦੁਆਰਾ ਚਾਲੂ ਨਹੀਂ ਕੀਤੇ ਜਾ ਸਕਦੇ ਹਨ, ਅਤੇ ਕੇਵਲ ਤਾਂ ਹੀ ਵਰਤੇ ਜਾਣੇ ਚਾਹੀਦੇ ਹਨ ਜੇਕਰ ਕੀਬੋਰਡ ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਉਹੀ ਜਾਣਕਾਰੀ ਪਹੁੰਚਾਉਣ ਦੇ ਵਿਕਲਪਿਕ ਤਰੀਕੇ ਮੌਜੂਦ ਹਨ।
ਆਫਸੈੱਟ ਨੰਬਰ | ਸਤਰ 0 ਟੂਲਟਿਪ ਦਾ ਇਸ ਦੇ ਟੀਚੇ ਦੇ ਅਨੁਸਾਰੀ ਔਫਸੈੱਟ। ਵਧੇਰੇ ਜਾਣਕਾਰੀ ਲਈ Popper.js ਦੇ ਆਫਸੈੱਟ ਡੌਕਸ ਵੇਖੋ ।
ਫਾਲਬੈਕ ਪਲੇਸਮੈਂਟ ਸਤਰ | ਐਰੇ 'ਫਲਿਪ' ਪੌਪਰ ਫਾਲਬੈਕ 'ਤੇ ਕਿਹੜੀ ਸਥਿਤੀ ਦੀ ਵਰਤੋਂ ਕਰੇਗਾ, ਇਹ ਨਿਰਧਾਰਤ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿਓ। ਵਧੇਰੇ ਜਾਣਕਾਰੀ ਲਈ Popper.js ਦੇ ਵਿਹਾਰ ਦਸਤਾਵੇਜ਼ਾਂ ਨੂੰ ਵੇਖੋ
ਸੀਮਾ ਸਤਰ | ਤੱਤ 'ਸਕ੍ਰੌਲ ਪੇਰੈਂਟ' ਟੂਲਟਿਪ ਦੀ ਓਵਰਫਲੋ ਸੀਮਾ ਸੀਮਾ। 'viewport', 'window', 'scrollParent', ਜਾਂ ਇੱਕ HTMLElement ਸੰਦਰਭ (ਸਿਰਫ਼ JavaScript) ਦੇ ਮੁੱਲਾਂ ਨੂੰ ਸਵੀਕਾਰ ਕਰਦਾ ਹੈ । ਵਧੇਰੇ ਜਾਣਕਾਰੀ ਲਈ Popper.js ਦੇ ਰੋਕਥਾਮ ਓਵਰਫਲੋ ਡੌਕਸ ਵੇਖੋ ।

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

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

ਢੰਗ

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

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

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

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