ინსტრუმენტების რჩევები

მიმოხილვა

რა უნდა იცოდეთ ხელსაწყოების მოდულის გამოყენებისას:

• ინსტრუმენტების რჩევები ეყრდნობა მესამე მხარის ბიბლიოთეკას Popper- ს პოზიციონირებისთვის. მანამდე უნდა შეიტანოთ popper.min.jsbootstrap.js ან გამოიყენოთ ის, bootstrap.bundle.min.jsრომელიც შეიცავს პოპერს.
• ინსტრუმენტების მინიშნებები დაშვებულია შესრულების მიზეზების გამო, ამიტომ თქვენ თავად უნდა მოაწყოთ ისინი .
• ინსტრუმენტების რჩევები ნულოვანი სიგრძის სათაურებით არასოდეს არის ნაჩვენები.
• მიუთითეთ container: 'body', რათა თავიდან აიცილოთ პრობლემები უფრო რთულ კომპონენტებში (როგორიცაა ჩვენი შეყვანის ჯგუფები, ღილაკების ჯგუფები და ა.შ.).
• დამალულ ელემენტებზე ხელსაწყოების ჩართვა არ იმუშავებს.
• ინსტრუმენტების რჩევები .disabledან disabledელემენტები უნდა იყოს ჩართული შეფუთვის ელემენტზე.
• როდესაც ამოქმედდება ჰიპერბმულებიდან, რომლებიც მოიცავს მრავალ ხაზს, ინსტრუმენტების რჩევები იქნება ცენტრში. გამოიყენეთ white-space: nowrap;თქვენი <a>s, რათა თავიდან აიცილოთ ეს ქცევა.
• ინსტრუმენტების მინიშნებები უნდა იყოს დამალული, სანამ მათი შესაბამისი ელემენტები 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-ში Bootstrap-ის გამოყენებისას მიმართულებები ასახულია.

<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

ცვლადები

როგორც Bootstrap-ის განვითარებადი CSS ცვლადების მიდგომის ნაწილი, ინსტრუმენტების რჩევები ახლა იყენებენ ადგილობრივ CSS ცვლადებს .tooltipრეალურ დროში გაუმჯობესებული პერსონალიზაციისთვის. 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

გამოყენება

Tooltip დანამატი წარმოქმნის შინაარსს და მარკირებას მოთხოვნისამებრ, და ნაგულისხმევად ათავსებს ინსტრუმენტების რჩევებს მათი ტრიგერის ელემენტის შემდეგ.

ჩართეთ ინსტრუმენტული მინიშნება 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არ არის ინტერაქტიული, რაც იმას ნიშნავს, რომ მომხმარებლებს არ შეუძლიათ ფოკუსირება, მაუსის გადატანა ან დაწკაპუნება მათზე, რათა გამოიწვიონ ინსტრუმენტების მინიშნება (ან popover). გამოსავლის გამოსავალად, თქვენ მოგინდებათ ჩართოთ ხელსაწყოს მინიშნება შეფუთვიდან <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}". დარწმუნდით, რომ შეცვალეთ ოფციის სახელის ქეისის ტიპი „ camelCase “-დან „ kebab-case “-ზე ოფციების მონაცემთა ატრიბუტების მეშვეობით გადაცემისას. მაგალითად, გამოიყენეთ data-bs-custom-class="beautifier"ნაცვლად data-bs-customClass="beautifier".

როგორც Bootstrap 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()