ਟੂਲਟਿੱਪ

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

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

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

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

ਉਦਾਹਰਨਾਂ

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

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

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))

ਲਿੰਕ 'ਤੇ ਟੂਲਟਿਪਸ

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

<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.
</p>

ਕਸਟਮ ਟੂਲਟਿਪਸ

ਤੁਸੀਂ CSS ਵੇਰੀਏਬਲ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਟੂਲਟਿਪਸ ਦੀ ਦਿੱਖ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰ ਸਕਦੇ ਹੋ । ਅਸੀਂ ਆਪਣੀ ਕਸਟਮ ਦਿੱਖ ਨੂੰ ਸਕੋਪ ਕਰਨ ਲਈ ਇੱਕ ਕਸਟਮ ਕਲਾਸ ਸੈਟ ਕਰਦੇ ਹਾਂ data-bs-custom-class="custom-tooltip"ਅਤੇ ਇੱਕ ਸਥਾਨਕ CSS ਵੇਰੀਏਬਲ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਨ ਲਈ ਇਸਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ।

.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="tooltip" data-bs-placement="top"
        data-bs-custom-class="custom-tooltip"
        data-bs-title="This top tooltip is themed via CSS variables.">
  Custom tooltip
</button>

ਦਿਸ਼ਾਵਾਂ

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

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Tooltip on left">
  Tooltip on left
</button>

ਅਤੇ ਕਸਟਮ HTML ਦੇ ਨਾਲ ਜੋੜਿਆ ਗਿਆ:

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

ਇੱਕ SVG ਨਾਲ:

CSS

ਵੇਰੀਏਬਲ

ਬੂਟਸਟਰੈਪ ਦੇ ਵਿਕਸਤ CSS ਵੇਰੀਏਬਲ ਪਹੁੰਚ ਦੇ ਹਿੱਸੇ ਵਜੋਂ, ਟੂਲਟਿਪਸ ਹੁਣ .tooltipਵਿਸਤ੍ਰਿਤ ਰੀਅਲ-ਟਾਈਮ ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ ਲਈ ਸਥਾਨਕ CSS ਵੇਰੀਏਬਲ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਨ। CSS ਵੇਰੀਏਬਲ ਲਈ ਮੁੱਲ Sass ਦੁਆਰਾ ਸੈੱਟ ਕੀਤੇ ਗਏ ਹਨ, ਇਸਲਈ Sass ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ ਅਜੇ ਵੀ ਸਮਰਥਿਤ ਹੈ।

  --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
  --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
  --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
  --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
  --#{$prefix}tooltip-margin: #{$tooltip-margin};
  @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
  --#{$prefix}tooltip-color: #{$tooltip-color};
  --#{$prefix}tooltip-bg: #{$tooltip-bg};
  --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
  --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
  --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
  --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
  

Sass ਵੇਰੀਏਬਲ

$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:                    null; // TODO: remove this in v6

$tooltip-arrow-width:               .8rem;
$tooltip-arrow-height:              .4rem;
// fusv-disable
$tooltip-arrow-color:               null; // Deprecated in Bootstrap 5.2.0 for CSS variables
// fusv-enable

ਵਰਤੋਂ

ਟੂਲਟਿਪ ਪਲੱਗਇਨ ਮੰਗ 'ਤੇ ਸਮੱਗਰੀ ਅਤੇ ਮਾਰਕਅੱਪ ਬਣਾਉਂਦਾ ਹੈ, ਅਤੇ ਡਿਫੌਲਟ ਤੌਰ 'ਤੇ ਉਹਨਾਂ ਦੇ ਟਰਿੱਗਰ ਤੱਤ ਦੇ ਬਾਅਦ ਟੂਲਟਿਪ ਰੱਖਦਾ ਹੈ।

JavaScript ਦੁਆਰਾ ਟੂਲਟਿਪ ਨੂੰ ਟਰਿੱਗਰ ਕਰੋ:

const exampleEl = document.getElementById('example')
const tooltip = new bootstrap.Tooltip(exampleEl, options)

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

ਮਾਰਕਅੱਪ

ਟੂਲਟਿਪ ਲਈ ਲੋੜੀਂਦਾ ਮਾਰਕਅੱਪ ਸਿਰਫ਼ ਇੱਕ dataਵਿਸ਼ੇਸ਼ਤਾ ਹੈ ਅਤੇ titleHTML ਤੱਤ 'ਤੇ ਤੁਸੀਂ ਟੂਲਟਿਪ ਲੈਣਾ ਚਾਹੁੰਦੇ ਹੋ। ਇੱਕ ਟੂਲਟਿਪ ਦਾ ਤਿਆਰ ਕੀਤਾ ਮਾਰਕਅੱਪ ਕਾਫ਼ੀ ਸਧਾਰਨ ਹੈ, ਹਾਲਾਂਕਿ ਇਸਨੂੰ ਇੱਕ ਸਥਿਤੀ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ (ਮੂਲ ਰੂਪ ਵਿੱਚ, topਪਲੱਗਇਨ ਦੁਆਰਾ ਸੈੱਟ ਕੀਤਾ ਗਿਆ ਹੈ)।

<!-- HTML to write -->
<a href="#" data-bs-toggle="tooltip" data-bs-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" data-bs-title="Disabled tooltip">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

ਵਿਕਲਪ

ਜਿਵੇਂ ਕਿ ਵਿਕਲਪਾਂ ਨੂੰ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਾਂ JavaScript ਦੁਆਰਾ ਪਾਸ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਤੁਸੀਂ ਇੱਕ ਵਿਕਲਪ ਦਾ ਨਾਮ ਜੋੜ ਸਕਦੇ ਹੋ data-bs-, ਜਿਵੇਂ ਕਿ ਵਿੱਚ data-bs-animation="{value}"। ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੁਆਰਾ ਵਿਕਲਪਾਂ ਨੂੰ ਪਾਸ ਕਰਦੇ ਸਮੇਂ ਵਿਕਲਪ ਨਾਮ ਦੀ ਕੇਸ ਕਿਸਮ ਨੂੰ " ਕੈਮਲਕੇਸ " ਤੋਂ " ਕਬਾਬ-ਕੇਸ " ਵਿੱਚ ਬਦਲਣਾ ਯਕੀਨੀ ਬਣਾਓ । ਉਦਾਹਰਨ ਲਈ, ਦੀ data-bs-custom-class="beautifier"ਬਜਾਏ ਵਰਤੋ data-bs-customClass="beautifier".

ਬੂਟਸਟਰੈਪ 5.2.0 ਦੇ ਅਨੁਸਾਰ, ਸਾਰੇ ਭਾਗ ਇੱਕ ਪ੍ਰਯੋਗਾਤਮਕ ਰਿਜ਼ਰਵਡ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾ ਦਾ ਸਮਰਥਨ ਕਰਦੇ ਹਨ data-bs-configਜੋ ਇੱਕ JSON ਸਟ੍ਰਿੰਗ ਦੇ ਰੂਪ ਵਿੱਚ ਸਧਾਰਨ ਕੰਪੋਨੈਂਟ ਕੌਂਫਿਗਰੇਸ਼ਨ ਨੂੰ ਰੱਖ ਸਕਦਾ ਹੈ। ਜਦੋਂ ਇੱਕ ਤੱਤ data-bs-config='{"delay":0, "title":123}'ਅਤੇ data-bs-title="456"ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਹੁੰਦੀਆਂ ਹਨ, ਤਾਂ ਅੰਤਮ titleਮੁੱਲ ਹੋਵੇਗਾ 456ਅਤੇ ਵੱਖਰੇ ਡੇਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ 'ਤੇ ਦਿੱਤੇ ਗਏ ਮੁੱਲਾਂ ਨੂੰ ਓਵਰਰਾਈਡ ਕਰਨਗੀਆਂ data-bs-config। ਇਸ ਤੋਂ ਇਲਾਵਾ, ਮੌਜੂਦਾ ਡਾਟਾ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ JSON ਮੁੱਲਾਂ ਨੂੰ ਰੱਖਣ ਦੇ ਯੋਗ ਹਨ ਜਿਵੇਂ ਕਿ data-bs-delay='{"show":0,"hide":150}'.

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

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

ਢੰਗ

const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance

// setContent example
tooltip.setContent({ '.tooltip-inner': 'another title' })

ਸਮਾਗਮ

const myTooltipEl = document.getElementById('myTooltip')
const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl)

myTooltipEl.addEventListener('hidden.bs.tooltip', () => {
  // do something...
})

tooltip.hide()