Негізгі мазмұнға өту Құжаттар шарлауына өту
in English

Кеңестер

Анимациялар үшін CSS3 және жергілікті тақырыпты сақтау үшін деректер-bs-атрибуттары арқылы CSS және JavaScript көмегімен теңшелетін Bootstrap кеңестерін қосуға арналған құжаттама және мысалдар.

Шолу

Құралдар плагинін пайдалану кезінде білу керек нәрселер:

  • Кеңестер орналасу үшін үшінші тарап кітапханасының Попперіне сүйенеді . Кеңестер жұмыс істеуі үшін bootstrap.js алдында popper.min.js қосу керек немесе Popper бар bootstrap.bundle.min.js/ пайдалану керек bootstrap.bundle.js!
  • Құрал кеңестері өнімділік себептеріне байланысты қосылады, сондықтан оларды өзіңіз баптандыруыңыз керек .
  • Ұзындығы нөлдік тақырыптары бар құралдар кеңестері ешқашан көрсетілмейді.
  • container: 'body'Күрделі құрамдас бөліктерде (мысалы, енгізу топтары, түймелер топтары, т.б.) ақауларды көрсетпеу үшін көрсетіңіз .
  • Жасырын элементтерде кеңестерді іске қосу жұмыс істемейді.
  • .disabledОрау элементінде немесе элементтерге арналған құралдар кеңестері disabledіске қосылуы керек.
  • Бірнеше жолды қамтитын гиперсілтемелерден іске қос��лғанда, құралдар кеңестері ортаға қойылады. Бұл әрекетті болдырмау үшін s white-space: nowrap;on yours пайдаланыңыз .<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 жүйесінде Bootstrap пайдаланған кезде бағыттар шағылыстырылады.

<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

Түпнұсқалар кеңесінің орны негізгі контейнерде біз сияқты болған overflow: autoкезде автоматты түрде өзгертуге әрекет жасайды , бірақ бастапқы орналастыру орнын сақтайды. Мұны шешу үшін әдепкі мәнді қайта анықтау үшін опцияны (опцияны пайдаланатын флип модификаторы үшін ) кез келген HTMLElement параметріне орнатыңыз , мысалы :overflow: 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атрибут болып табылады және 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="". Опцияларды деректер атрибуттары арқылы өткізген кезде опция атауының регистр түрін camelCase-тан кебаб-капқа өзгертуді ұмытпаңыз. Мысалы, пайдаланудың орнына data-bs-customClass="beautifier"пайдаланыңыз data-bs-custom-class="beautifier".

Қауіпсіздік мақсатында sanitize, sanitizeFn, және allowListопциялары деректер атрибуттары арқылы қамтамасыз етілмейтінін ескеріңіз.
Аты Түр Әдепкі Сипаттама
animation логикалық true Құрал кеңесіне CSS өшіру көшуін қолданыңыз
container жол | элемент | жалған false

Құрал кеңесін белгілі бір элементке қосады. Мысалы: container: 'body'. Бұл опция әсіресе пайдалы, себебі ол құрал кеңесін құжаттың ағынында іске қосу элементінің жанында орналастыруға мүмкіндік береді - бұл терезе өлшемін өзгерту кезінде құрал кеңесінің іске қосу элементінен алыстап кетуіне жол бермейді.

delay саны | объект 0

Құрал кеңесін көрсету және жасыру кідірісі (мс) - қолмен іске қосу түріне қолданылмайды

Егер нөмір берілсе, кідіріс жасыру/көрсету үшін де қолданылады

Объектінің құрылымы – бұл: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' Құрал кеңесінің толып кету шектеуінің шекарасы (тек Поппердің preventOverflow модификаторына қолданылады). Әдепкі бойынша ол 'clippingParents'HTMLElement сілтемесін қабылдай алады (тек JavaScript арқылы). Қосымша ақпаратты Поппердің 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

Bootstrap әдепкі Popper конфигурациясын өзгерту үшін Поппер конфигурациясын қараңыз .

Функция Popper конфигурациясын жасау үшін пайдаланылғанда, ол Bootstrap әдепкі Popper конфигурациясын қамтитын нысанмен шақырылады. Ол әдепкі параметрді өзіңіздің конфигурацияңызбен пайдалануға және біріктіруге көмектеседі. Функция Popper үшін конфигурация нысанын қайтаруы керек.

Жеке кеңестер үшін деректер атрибуттары

Жеке кеңестерге арналған опцияларды жоғарыда түсіндірілгендей, деректер атрибуттарын пайдалану арқылы балама түрде көрсетуге болады.

функциясын пайдалану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.tooltiphidden.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()