Π Π°Π·Π½ΠΎΠ΅

Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки js: ПовСдСниС «ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠ°»

12.07.2021

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

40+ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Ρ… скриптов Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… подсказок для CSS, JavaScript ΠΈ jQuery

Автор: Π•Π»ΠΈΠ·Π°Π²Π΅Ρ‚Π° Π“ΡƒΠΌΠ΅Π½ΡŽΠΊ ΠŸΡ€ΠΎΡΡ‚ΠΎ люблю ΠΏΠΈΡΠ°Ρ‚ΡŒ, ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΈ Π΄Π°Π²Π°Ρ‚ΡŒ людям Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Ρ‡ΠΈΡ‚Π°Ρ‚ΡŒ интСрСсный ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚. И ΠΏΡƒΡΡ‚ΡŒ я Π½Π΅ всСгда идСальна β€” Π΅ΡΡ‚ΡŒ ΠΊ Ρ‡Π΅ΠΌΡƒ ΡΡ‚Ρ€Π΅ΠΌΠΈΡ‚ΡŒΡΡ!!!

БущСствуСт интСрСсный элСмСнт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса, Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠ°ΠΊ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки (Ρ‚Π°ΠΊΠΆΠ΅ Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΡ‹Π΅ ΠΈΠ½Ρ„ΠΎ-записями), ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠΎΠ·Π΄Π°ΡŽΡ‚ нСбольшоС ΠΎΠΊΠ½ΠΎ с ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠ΅ΠΉ ΠΎΠ± элСмСнтС, ΠΊΠΎΠ³Π΄Π° курсор ΠΌΡ‹ΡˆΠΈ наводится Π½Π° ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ тСкст ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. Π‘ Ρ‚ΠΎΡ‡ΠΊΠΈ зрСния ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса, Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ самый быстрый ΠΈ простой источник ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ, Π±Π΅Π· нСобходимости ΠΊΠ»ΠΈΠΊΠ°Ρ‚ΡŒ Π½Π° Ρ‡Ρ‚ΠΎ-Π»ΠΈΠ±ΠΎ.

Π₯отя самый простой способ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки ΠΊ тСксту β€” ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π΅Π³ HTML <ACRONYM> ΠΈΠ»ΠΈ TITLE=””, ALT=””. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Π΅ΡΡ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ интСрСсныС Π΄ΠΈΠ·Π°ΠΉΠ½Ρ‹ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… подсказок ΠΈ стилСй, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ JavaScript ΠΈ CSS, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ скрипты. Π”Π°Π²Π°ΠΉΡ‚Π΅ взглянСм Π½Π° Π½ΠΈΡ….

Β 

CSS

Β 

Balloon.css β€” Balloon β€” это Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° CSS, состоящая ΠΈΠ· SasS ΠΈ LESS ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰Π°Ρ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΡƒΡŽ подсказку. Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ ΠΈ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°ΡŽΡ‚ΡΡ Ρ‡Π΅Ρ€Π΅Π· Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ data. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку слСва, справа ΠΈΠ»ΠΈ слСва Π½Π°ΠΏΡ€Π°Π²ΠΎ. Π’Ρ‹ Π΄Π°ΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ эмодТи ΠΊ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Ρƒ. Balloon.css ΠΌΠΎΠΆΠ½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ‡Π΅Ρ€Π΅Π· NPM ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ с CDNJS.

Simptip β€” сдСлано с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ SasS, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠΌ ΠΏΠ΅Ρ€Π΅Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΈ ΠΏΠ΅Ρ€Π΅ΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠ΄ Π² соотвСтствии с вашими трСбованиями. ΠŸΠΎΠ·ΠΈΡ†ΠΈΡ ΠΈ содСрТимоС подсказки Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°ΡŽΡ‚ΡΡ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΈΠΌΠ΅Π½ΠΈ класса ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° tooltip. Simptip доступСн Π² Π²ΠΈΠ΄Π΅ ΠΏΠ°ΠΊΠ΅Ρ‚Π° NPM, Yarn ΠΈ Bower.


Hint.css β€” ΠΎΠ΄Π½Π° ΠΈΠ· популярных Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ CSS для отобраТСния Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки, Hint.css ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΌΠ½ΠΎΠ³ΠΈΠΌΠΈ популярными Π²Π΅Π±-сайтами, Ρ‚Π°ΠΊΠΈΠΌΠΈ ΠΊΠ°ΠΊ Fiverr, Webflow ΠΈ Tridiv. Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ Π΄Π²ΡƒΡ… Π΄Ρ€ΡƒΠ³ΠΈΡ… Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ CSS, Hint.css ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ aria-label. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈ Ρ†Π²Π΅Ρ‚ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΈΠΌΠ΅Π½ классов с использованиСм ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ»ΠΎΠ³ΠΈΠΈ BEM. Hint.css доступСн Π½Π° NPM, Bower ΠΈ CDNJS.

Microtip β€” Π΅Ρ‰Π΅ ΠΎΠ΄Π½Π° ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰Π°Ρ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° CSS для создания Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки. Microtip ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ aria-label для хранСния содСрТимого Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ data для настройки Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΈ полоТСния Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки.

Π‘ΠΊΡ€ΠΈΠΏΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½ΡƒΡŽ CSS, которая позволяСт Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ простого Ρ„Π°ΠΉΠ»Π° CSS. ΠŸΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅ CSS ΡƒΠΆΠ΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ Π²ΠΎ ΠΌΠ½ΠΎΠ³ΠΈΡ… Π²Π΅Π±-ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…. Microtip доступСн Π½Π° NPM, Yarn ΠΈ CDN UNPkg.

Wenk– вСсит всСго 733 Π±Π°ΠΉΡ‚. БупСрлСгкая Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ°, написанная Π² супСрсоврСмСнном CSS с использованиСм CSSNext, LESS ΠΈ SCSS, позволяСт Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ ΠΈ ΠΏΠ΅Ρ€Π΅ΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ стили Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ Π²Π°ΠΌ нравится. Wenk ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ с NPM, Yarn ΠΈ Ρ‚Π°ΠΊΠΈΡ… бСсплатных CDN-сСрвисов, ΠΊΠ°ΠΊ rawgit.com ΠΈ unpkg.com.

Tooltippy β€” другая лСгкая Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° CSS Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ ΠΎΠΊΠΎΠ»ΠΎ 1 ΠšΠ‘. Tooltippy Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя нСсколько Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… Ρ‚Π΅ΠΌ для стилизации Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки. Она написана с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ прСпроцСссора CSS ΠΏΠΎΠ΄ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ΠΌ Stylus.

ElegantTips β€” эта Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° поставляСтся с нСсколькими ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ созданными Ρ‚Π΅ΠΌΠ°ΠΌΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ с прСдоставлСнными ΠΈΠΌΠ΅Π½Π°ΠΌΠΈ классов. Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³ΠΈΡ… Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ Π½Π° Π΄Π°Π½Π½Ρ‹Π΅ HTML5 ΠΈΠ»ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ aria-label, ElegantTips Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ добавлСния Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ элСмСнта для создания Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки. Π­Ρ‚ΠΎ позволяСт Π²Π°ΠΌ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π±ΡƒΠΊΠ²Π°Π»ΡŒΠ½ΠΎ любой ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π² подсказку ΠΊΡ€ΠΎΠΌΠ΅ простого тСкста.

Tootik β€” эта Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° CSS прСдоставляСт Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ стили Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ CSS, LESS ΠΈ SasS, Π° Ρ‚Π°ΠΊΠΆΠ΅ простой Π² использовании графичСский интСрфСйс для настройки Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ просто ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ HTML-ΠΊΠΎΠ΄, сгСнСрированный этим инструмСнтом. Π­Ρ‚ΠΎ Ρ‚Π°ΠΊ просто.

Β 

VanillaJS

Β 

TippyJS – Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‰Π°Ρ Π½Π° Popper.js, TippyJS поставляСтся с мноТСством ΠΎΠΏΡ†ΠΈΠΉ для настройки Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ, стрСлку Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки, ΡˆΠΈΡ€ΠΈΠ½Ρƒ, Ρ€Π°Π·ΠΌΠ΅Ρ€, Ρ‚Π΅ΠΌΡƒ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅. Π‘ΠΊΡ€ΠΈΠΏΡ‚ Ρ‚Π°ΠΊΠΆΠ΅ прСдоставляСт Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠ³ΠΎ Π²Ρ‹Π·ΠΎΠ²Π°, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ, ΠΊΠΎΠ³Π΄Π° Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка ΠΏΠΎΠΊΠ°Π·Π°Π½Π° ΠΈ скрыта. Π­Ρ‚ΠΈ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ Π΄Π΅Π»Π°ΡŽΡ‚ TippyJS ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· самых ΠΌΠΎΡ‰Π½Ρ‹Ρ… Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ JavaScript Π² нашСм спискС скриптов для создания Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки.

Darsain Tooltip β€” эта Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° обСспСчиваСт Π±Π°Π·ΠΎΠ²ΡƒΡŽ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΡŽ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, ΠΎΠ½Π° прСдоставляСт ΠΎΠ±ΡˆΠΈΡ€Π½Ρ‹Π΅ возмоТности для настройки повСдСния подсказки ΠΈ Π½Π°Π±ΠΎΡ€Π° ΠΈΠΌΠ΅Π½ классов для измСнСния внСшнСго Π²ΠΈΠ΄Π° Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки. Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка Ρ…ΠΎΡ€ΠΎΡˆΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π² старых Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ IE9 ΠΈ, Ссли это Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ, ΠΈ Π΄Π°ΠΆΠ΅ Π² IE8 с нСсколькими настройками.

Bubb β€” скрипт Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚Ρ‹Ρ… ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ JavaScript. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΎΠ±ΡˆΠΈΡ€Π½Ρ‹Π΅ API-интСрфСйсы, ΠΏΠΎΠΌΠΈΠΌΠΎ отобраТСния простого тСкста, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ слоТный HTML-ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π²ΠΎ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку. Π­Ρ‚ΠΎ довольно ΠΊΡ€ΡƒΡ‚ΠΎ; Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒΡΡ ΠΊ Π”ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°ΠΌ ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°ΠΌ.

Popper β€” содСрТит Ρ‚Π΅Ρ…Π½ΠΈΡ‡Π΅ΡΠΊΡƒΡŽ Π°Π±ΡΡ‚Ρ€Π°ΠΊΡ†ΠΈΡŽ для создания Ρ‡Π΅Π³ΠΎ-Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ появляСтся, ΠΊΠ°ΠΊ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка, Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ ΠΈ Π²Ρ‹ΠΏΠ°Π΄Π°ΡŽΡ‰ΠΈΠ΅ списки. TippyJS ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π΅Π³ΠΎ Π² качСствС основы Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ, ΠΊΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ скрипт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ извСстными ΠΈΠΌΠ΅Π½Π°ΠΌΠΈ Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅, Ρ‚Π°ΠΊΠΈΠΌΠΈ ΠΊΠ°ΠΊ Bootstrap, Microsoft ΠΈ Atlassian.

YY Tooltip β€” Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³ΠΈΡ… Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ, YY Tooltip Π½Π΅ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ добавлСния элСмСнтов ΠΈΠ»ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² HTML. Она ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с JavaScript, Π° ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Ρ†Π²Π΅Ρ‚Π° ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Ρ‹ Π² ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π΅, Π° Π½Π΅ Π² элСмСнтС HTML. ИдСально ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для использования с ΠΏΠΎΠ»Π½Ρ‹ΠΌ Π²Π΅Π±-ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ JavaScript.


Position.js β€” Π΅Ρ‰Π΅ ΠΎΠ΄Π½Π° отличная Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° JavaScript для создания Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… подсказок, Position.js прСдоставляСт графичСский интСрфСйс для настройки Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΈ просто ΠΊΠΎΠΏΠΈΡ€ΡƒΠ΅Ρ‚, Π° Π·Π°Ρ‚Π΅ΠΌ вставляСт созданный Ρ‚Π°ΠΌ ΠΊΠΎΠ΄. Position.js ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² сочСтании с React.js ΠΈΠ»ΠΈ Vue.js.

Bezet Tooltip β€” эта Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° прСдоставляСт 14 Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² отобраТСния Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки; Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, справа, слСва, снизу, слСва Π² Ρ†Π΅Π½Ρ‚Ρ€, снизу Π² Ρ†Π΅Π½Ρ‚Ρ€ ΠΈ Ρ‚. Π΄. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΎΠ½Π° Ρ‚Π°ΠΊΠΆΠ΅ достаточно ΡƒΠΌΠ½Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΌΠΎΠ³Π»Π° ΠΎΡ‚Ρ€Π΅Π³ΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки Π½Π° основС доступного пространства Π²ΠΎΠΊΡ€ΡƒΠ³ самой подсказки.

MouseTip β€” эта Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° JavaScrtipt создаст Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку, которая Π±ΡƒΠ΄Π΅Ρ‚ Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒΡΡ вмСстС с курсором. Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка настраиваСтся с нСстандартным Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ mousetip вмСсто использования Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° data Π² HTML5. Mousetip доступСн ΠΊΠ°ΠΊ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ NPM.

Internetips β€” ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎ MousetTip, Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка, гСнСрируСмая этой Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΎΠΉ, слСдуСт Π·Π° ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ курсора. ВсС настроСно Ρ‡Π΅Ρ€Π΅Π· ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ JavaScript вмСсто HTML, Π° Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ созданы для соврСмСнных Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ². Π‘ΠΊΡ€ΠΈΠΏΡ‚ Π»Π΅Π³ΠΊΠΈΠΉ ΠΈ быстрый.

MTip β€” Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° JavaScript для Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… подсказок с ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠΉ ΡΠΎΠ²ΠΌΠ΅ΡΡ‚ΠΈΠΌΠΎΡΡ‚ΡŒΡŽ с Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ. Она совмСстима с IE8, ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ настраиваСмая с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ², ΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ подсказку ΠΊ Π»ΡŽΠ±ΠΎΠΌΡƒ элСмСнту Π΄Π°ΠΆΠ΅ Π½Π° img (элСмСнт изобраТСния).

Bubblesee β€” лСгкая Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° JavaScript, которая обСспСчиваСт ΠΏΡ€ΡΠΌΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ «подсказки». Π›Π΅Π³ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ JavaScript Π±Π΅Π· слоТных ΠΎΠΏΡ†ΠΈΠΉ для настройки Π²Ρ‹Π²ΠΎΠ΄Π°. Π€Π°ΠΉΠ» Sass прСдоставляСтся, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ внСшний Π²ΠΈΠ΄ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки.

Tipfy β€” построСнный с использованиСм соврСмСнного синтаксиса JavaScript, ES6, Tipfy ΠΈΠΌΠ΅Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ всСго 2 ΠšΠ‘. Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° прСдоставляСт Π΄Π²Π΅ вСрсии Ρ„Π°ΠΉΠ»ΠΎΠ²: tipfy.min.js, ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°ΡŽΡ‰ΠΈΠΉ сцСнарий с соврСмСнным синтаксисом ES6 ΠΈ tipfy. es5.min.js, Ссли Π²Π°ΠΌ Π½ΡƒΠΆΠ½Π° ΡΠΎΠ²ΠΌΠ΅ΡΡ‚ΠΈΠΌΠΎΡΡ‚ΡŒ со старыми Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ. Π‘ΠΊΡ€ΠΈΠΏΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ data для настройки Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки; НапримСр, data-tipfy-side ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для установки направлСния Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки, Π° использования Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° data-tipfy-text для добавлСния содСрТимого Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки.

Β 

JQuery

Β 

Tooltipster β€” эта Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° прСдоставляСт ΠΎΠ±ΡˆΠΈΡ€Π½Ρ‹Π΅ возмоТности для настройки практичСски Π»ΡŽΠ±Ρ‹Ρ… элСмСнтов, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ Ρ‚Π΅ΠΌΠ°, анимация, сСнсорная ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ°, ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ/Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΈ Ρ‚. Π΄. Она Ρ‚Π°ΠΊΠΆΠ΅ прСдоставляСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΏΡ€ΠΎΡΠ»ΡƒΡˆΠΈΠ²Π°Ρ‚Π΅Π»ΡŒ событий ΠΈ ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹Π΅ Π²Ρ‹Π·ΠΎΠ²Ρ‹, позволяя Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ Ρ€Π°ΡΡˆΠΈΡ€ΡΡ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π±ΡƒΠ΄ΡƒΡ‡ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠΌ jQuery, Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π² Π±ΠΎΠ»Π΅Π΅ Ρ€Π°Π½Π½Π΅ΠΌ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, Ρ‚Π°ΠΊΠΎΠΌ ΠΊΠ°ΠΊ IE6, Π² зависимости ΠΎΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠΉ вСрсии jQuery.

Protip β€” Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½Ρ‹ΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery, Protip ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ 49 ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΉ, HTML для содСрТимого Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки, ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° ΠΈΠΊΠΎΠ½ΠΎΠΊ, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ ΠΎΠ±Ρ€Π°Ρ‚Π½Ρ‹Π΅ Π²Ρ‹Π·ΠΎΠ²Ρ‹ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅. Protip прСдоставляСт графичСский интСрфСйс, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠΉ Π»Π΅Π³ΠΊΠΎ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку.

PowerTip β€” этот ΠΏΠ»Π°Π³ΠΈΠ½ jQuery Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ ΠΎΠΏΡ†ΠΈΠΈ ΠΈ API-интСрфСйсы, прСдоставляя Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ ряд Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… способов Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… подсказок. Он ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Π½ΡƒΡŽ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΡŽ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π»ΠΎΡΡŒ ΠΏΡ€ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ элСмСнтов с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ Tab. PowereTip доступСн ΠΊΠ°ΠΊ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ NPM. Он ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ с RequireJS ΠΈ Browserify.

Accessible Aria Tooltip β€” ΠΏΠ»Π°Π³ΠΈΠ½ jQuery со встроСнной Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠ΅ΠΉ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… возмоТностСй, Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π° для отобраТСния Π΄ΠΈΠ°Π»ΠΎΠ³ΠΎΠ²ΠΎΠ³ΠΎ ΠΎΠΊΠ½Π° с Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ, многострочным тСкстом ΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΎΠΉ закрытия.

TipsJS β€” простой ΠΏΠ»Π°Π³ΠΈΠ½ jQuery, Π½ΠΎ ΠΎΠ½ ΠΈΠΌΠ΅Π΅Ρ‚ довольно ΠΎΡ‚Π»ΠΈΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ особСнности. Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки задаСтся Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ data-tooltip. для Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°.

Dark Tooltip β€” эта Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° прСдоставляСт Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ для Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки. НапримСр, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ подтвСрТдСния β€” Β«Π”Π°Β» ΠΈ «НСт», ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ Π²ΠΎ врСмя отобраТСния Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ элСмСнты HTML Π² ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚.

Aria Tooltip β€” Π΅Ρ‰Π΅ ΠΎΠ΄Π½Π° подсказка со встроСнной Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠ΅ΠΉ доступности, этот ΠΏΠ»Π°Π³ΠΈΠ½ jQuery совмСстим с WAI-ARIA 1.1. Он Ρ€Π΅Π°Π³ΠΈΡ€ΡƒΠ΅Ρ‚ Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ для Ρ€Π°Π·Π½Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² Π²ΠΈΠ΄ΠΎΠ²ΠΎΠ³ΠΎ экрана. Aria Tooltip доступСн ΠΊΠ°ΠΊ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ NPM с ΠΈΠΌΠ΅Π½Π΅ΠΌ t-aria-tooltip.

Toolbar.js. β€” Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ простой тСкст ΠΈΠ»ΠΈ HTML-ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π²ΠΎ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказкС, этот ΠΏΠ»Π°Π³ΠΈΠ½ jQuery создаСт панСль инструмСнтов. Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ Π΄Π²Π΅ ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ ссылки с ΠΈΠΊΠΎΠ½ΠΊΠΎΠΉ, которая ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ выполняСт дСйствиС ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ, ΠΊΠ°ΠΊ ΠΈ любая панСль инструмСнтов.

Β 

VueJS

Β 

V-Tooltip β€” это ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Vue.js, Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‰ΠΈΠΉ ΠΎΡ‚ Popper.js. Он прСдоставляСт Π½ΠΎΠ²ΡƒΡŽ Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΈΠ²Ρƒ с ΠΈΠΌΠ΅Π½Π΅ΠΌ v-tooltip, которая ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π° ΠΊ Π»ΡŽΠ±ΠΎΠΌΡƒ элСмСнту для создания Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки. V-tooltip ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки ΠΈΠ»ΠΈ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹. Помимо ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠΉ Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΈΠ²Ρ‹ v-tooltip Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° v-popover. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ этого ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ слоТный ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Π²ΠΎ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку с ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠΌ Vue.js ΠΈΠ»ΠΈ HTML.

Vue-Bulma Tooltip β€” ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Vue.js для создания Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки, основанной Π½Π° ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅ UML Bulma. Π­Ρ‚Π° Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° являСтся Ρ‡Π°ΡΡ‚ΡŒΡŽ Vue Bulma. Но ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ tooltip доступСн ΠΊΠ°ΠΊ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ NPM с ΠΈΠΌΠ΅Π½Π΅ΠΌ vue-bulma-tooltip, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΊ Π°Π²Ρ‚ΠΎΠ½ΠΎΠΌΠ½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚.

Vue-Directive-Tooltip β€” Π² Ρ†Π΅Π»ΠΎΠΌ ΠΎΠ½ ΠΏΠΎΡ…ΠΎΠΆ Π½Π° ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ V-Tooltip Π½Π° основС Popper. js ΠΈ прСдоставляСт Ρ‚Ρƒ ΠΆΠ΅ Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΈΠ²Ρƒ, Ρ‡Ρ‚ΠΎ ΠΈ v-tooltip. Однако ΠΎΠ½ Π½Π΅ обСспСчиваСт ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ v-popover.

Vue-Tippy β€” эта Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° ΠΎΠ±ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Π΅Ρ‚ Tippy.js Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Vue.js. Она ΠΈΠΌΠ΅Π΅Ρ‚ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Π΅ΠΌΡƒΡŽ Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΈΠ²Ρƒ Vue.js, Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΡƒΡŽ v-tippy, которая Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΊΠ°ΠΊ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ HTML; Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ для Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки ΠΈΠ»ΠΈ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ для Π΅Π΅ настройки. Π‘ΠΊΡ€ΠΈΠΏΡ‚ Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Vue.js Π² содСрТимом Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° html.

VueJS-Popover β€” ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ Vue.js с настраиваСмой Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΈΠ²ΠΎΠΉ, Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΠΎΠΉ v-popover, ΠΈ двумя настраиваСмыми ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ <popover> ΠΈ <tooltip>, ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΠΌΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Vue.js.

Vue-Hint β€” ΠΏΠ»Π°Π³ΠΈΠ½ Vue.js, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ распаковыввСт Hint.css. Π’ ΠΏΠ»Π°Π³ΠΈΠ½Π΅ имССтся Π΄ΠΈΡ€Π΅ΠΊΡ‚ΠΈΠ²Π° v-hint-css для добавлСния Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки. Он прСдоставляСт Ρ‚ΠΎΡ‚ ΠΆΠ΅ Π½Π°Π±ΠΎΡ€ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ², Ρ‡Ρ‚ΠΎ ΠΈ Hint.css, поэтому Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΈΡ… ΠΊΠ°ΠΊ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ JavaScript ΠΈΠ»ΠΈ ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ Vue.js.

ReactJS

React Joyride β€” ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ React, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ Π½Π°Π±ΠΎΡ€ подсказок, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π½ΠΎΠ²Ρ‹ΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ с вашим Π½ΠΎΠ²Ρ‹ΠΌ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ.

React Floater β€” эта Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° ΠΎΠ±ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Π΅Ρ‚ Popper.js Π² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ React с ΠΈΠΌΠ΅Π½Π΅ΠΌ Floater, поэтому ΠΎΠ½ ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ‚ Ρ‚Π°ΠΊΠΈΠΌΠΈ ΠΆΠ΅ Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ функциями, ΠΊΠ°ΠΊ ΠΈ Ρƒ Floater. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки ΠΈ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ ΠΎΠΊΠ½Π°, ΠΈ Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ³Ρ€Π°Ρ‚ΡŒ с этим ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠΌ Ρ‡Π΅Ρ€Π΅Π· эту пСсочницу.

React Autotip β€” простой ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ React с Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠ΅ΠΉ автоматичСского позиционирования, React Autotip автоматичСски ΠΎΡ‚Ρ€Π΅Π³ΡƒΠ»ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ доступного пространства Π²ΠΎΠΊΡ€ΡƒΠ³ Π½Π΅Π³ΠΎ.

React Tippy β€” построСн Π½Π° Π±Π°Π·Π΅ Tippy.js ΠΈ Popover.js. Π’ этой Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ΅ прСдставлСн ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Tooltip, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ React.

React Hint β€” ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ React, Ρ€Π°ΡΡˆΠΈΡ€ΡΡŽΡ‰ΠΈΠΉ Hint.css. ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Ρ‹ Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ нСсколько Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ, нСдоступных Π² Hint.css, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ автоматичСскоС ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅, Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠ° ΠΈ функция ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠ³ΠΎ Π²Ρ‹Π·ΠΎΠ²Π°.

Π‘ΠΎΠ»ΡŒΡˆΠ΅

Ember Tooltips β€” ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Ember.js для создания Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… подсказок, ΠΎΠ½ построСн Π½Π° Π±Π°Π·Π΅ Popper.js. ΠšΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Ρ‚Π°ΠΊΠΆΠ΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ с ΡƒΡ‡Π΅Ρ‚ΠΎΠΌ доступности ΠΈ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Π΅Ρ‚ ΡƒΠ»ΡƒΡ‡ΡˆΠ°Ρ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ трСбованиям 508 ΠΏΠΎ Π΄Π°Π½Π½ΠΎΠΌΡƒ вопросу.

D3 Tip β€” ΠΏΠ»Π°Π³ΠΈΠ½ D3.js. D3.js β€” это Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° JavaScript для Π²ΠΈΠ·ΡƒΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Π΄Π°Π½Π½Ρ‹Ρ…, такая ΠΊΠ°ΠΊ схСмы, ΠΊΠ°Ρ€Ρ‚Ρ‹, Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹ ΠΈ Ρ‚. Π΄. Π­Ρ‚ΠΎΡ‚ ΠΏΠ»Π°Π³ΠΈΠ½ позволяСт Π²Π°ΠΌ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку ΠΏΠΎΠ²Π΅Ρ€Ρ… этих Π΄Π°Π½Π½Ρ‹Ρ….

ВсСм ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎΠΉ Ρ€Π°Π±ΠΎΡ‚Ρ‹!

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ

Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки Β· Bootstrap v5.0

ΠžΠ±Π·ΠΎΡ€

Π§Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ Π·Π½Π°Ρ‚ΡŒ ΠΏΡ€ΠΈ использовании ΠΏΠ»Π°Π³ΠΈΠ½Π° Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки:

  • Подсказки ΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ Π½Π° ΡΡ‚ΠΎΡ€ΠΎΠ½Π½ΡŽΡŽ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ Popper для позиционирования. Π’Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ popper.min.js ΠΏΠ΅Ρ€Π΅Π΄ bootstrap.js ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ bootstrap.bundle.min.js / bootstrap.bundle.js, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ содСрТит Popper, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ!
  • Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΠΏΠΎ сообраТСниям ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ, поэтому **Π’Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΠ½ΠΈΡ†ΠΈΠ°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ **.
  • Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки с Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌΠΈ Π½ΡƒΠ»Π΅Π²ΠΎΠΉ Π΄Π»ΠΈΠ½Ρ‹ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ.
  • Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅ container: 'body', Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ с Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³ΠΎΠΌ Π² Π±ΠΎΠ»Π΅Π΅ слоТных ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°Ρ… (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π² Π½Π°ΡˆΠΈΡ… Π³Ρ€ΡƒΠΏΠΏΠ°Ρ… Π²Π²ΠΎΠ΄Π°, Π³Ρ€ΡƒΠΏΠΏΠ°Ρ… ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈ Ρ‚.Π΄.).
  • Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки для скрытых элСмСнтов Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚.
  • Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки для элСмСнтов .disabled ΠΈΠ»ΠΈ disabled Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π·Π°ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒΡΡ для элСмСнта ΠΎΠ±ΠΎΠ»ΠΎΡ‡ΠΊΠΈ.
  • ΠŸΡ€ΠΈ запускС ΠΎΡ‚ гипСрссылок, ΠΎΡ…Π²Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… нСсколько строк, Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки Π±ΡƒΠ΄ΡƒΡ‚ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ white-space: nowrap; Π½Π° Π’Π°ΡˆΠΈΡ… <a>, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΎΠ³ΠΎ повСдСния.
  • Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ Π΄ΠΎ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ элСмСнты Π±ΡƒΠ΄ΡƒΡ‚ ΡƒΠ΄Π°Π»Π΅Π½Ρ‹ ΠΈΠ· ΠΌΠΎΠ΄Π΅Π»ΠΈ DOM.
  • Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки ΠΌΠΎΠ³ΡƒΡ‚ Π·Π°ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒΡΡ благодаря элСмСнту Π²Π½ΡƒΡ‚Ρ€ΠΈ Ρ‚Π΅Π½Π΅Π²ΠΎΠΉ ΠΌΠΎΠ΄Π΅Π»ΠΈ DOM.
По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ этот ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ встроСнноС срСдство очистки содСрТимого, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ удаляСт всС элСмСнты HTML, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½Ρ‹ явно. Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ свСдСния смотритС Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ очистки Π² нашСй Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ ΠΏΠΎ JavaScript. По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ этот ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ встроСнноС срСдство очистки содСрТимого, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ удаляСт всС элСмСнты HTML, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½Ρ‹ явно. Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ свСдСния смотритС Π² Ρ€Π°Π·Π΄Π΅Π»Π΅ очистки Π² нашСй Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ ΠΏΠΎ JavaScript.

ΠŸΠΎΠ»ΡƒΡ‡ΠΈΠ» всС это? ΠžΡ‚Π»ΠΈΡ‡Π½ΠΎ, посмотрим, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚, Π½Π° Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ….

ΠŸΡ€ΠΈΠΌΠ΅Ρ€: Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки Π²Π΅Π·Π΄Π΅

Один ΠΈΠ· способов ΠΈΠ½ΠΈΡ†ΠΈΠ°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ всС Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки Π½Π° страницС — это Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΈΡ… ΠΏΠΎ ΠΈΡ… Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρƒ data-bs-toggle:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new bootstrap.Tooltip(tooltipTriggerEl)
})

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹

НавСдитС курсор Π½Π° ссылки Π½ΠΈΠΆΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки:

НавСдитС курсор Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½ΠΈΠΆΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ направлСния подсказок: Π²Π²Π΅Ρ€Ρ…, Π²ΠΏΡ€Π°Π²ΠΎ, Π²Π½ΠΈΠ·Ρƒ ΠΈ Π²Π»Π΅Π²ΠΎ. НаправлСния Π·Π΅Ρ€ΠΊΠ°Π»ΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΏΡ€ΠΈ использовании Bootstrap Π² RTL.

<button type="button" data-bs-toggle="tooltip" data-bs-placement="top" title="Подсказка Π²Π²Π΅Ρ€Ρ…Ρƒ">
  Подсказка Π²Π²Π΅Ρ€Ρ…Ρƒ
</button>
<button type="button" data-bs-toggle="tooltip" data-bs-placement="right" title="Подсказка справа">
  Подсказка справа
</button>
<button type="button" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Подсказка Π²Π½ΠΈΠ·Ρƒ">
  Подсказка Π²Π½ΠΈΠ·Ρƒ
</button>
<button type="button" data-bs-toggle="tooltip" data-bs-placement="left" title="Подсказка слСва">
  Подсказка слСва
</button>

И с Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½Ρ‹ΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΌ HTML:

<button type="button" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Подсказка</em> <u>с</u> <b>HTML</b>">
  Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка с HTML
</button>

Π‘ SVG:

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 / 4;
$tooltip-padding-x:                 $spacer / 2;
$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 ΠΈΠ»ΠΈ overflow: scroll, ΠΊΠ°ΠΊ наш .table-responsive, Π½ΠΎ ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ сохраняСт исходноС располоТСниС размСщСния. Π§Ρ‚ΠΎΠ±Ρ‹ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ эту ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ, установитС для ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° boundary Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅, ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠ΅ ΠΎΡ‚ значСния ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, 'scrollParent', Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, 'window':

var exampleEl = document.getElementById('example')
var tooltip = new bootstrap.Tooltip(exampleEl, {
  boundary: 'window'
})

Π Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ°

ВрСбуСмая Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° для Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки — это Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ data ΠΈ title HTML-элСмСнта, для ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π’Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΠΌΠ΅Ρ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку. БгСнСрированная Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки довольно проста, хотя для Π½Π΅Π΅ трСбуСтся позиция (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠΌ установлСно Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ top).

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… подсказок для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ ΠΈ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ

Π’Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊ HTML-элСмСнтам, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ‚Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½ΠΎ ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹ Π½Π° ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρƒ ΠΈ ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ссылки ΠΈΠ»ΠΈ элСмСнты управлСния Ρ„ΠΎΡ€ΠΌΡ‹). Π₯отя ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½Ρ‹Π΅ элСмСнты HTML (Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ <span>) ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ доступными для фокусировки, Π΄ΠΎΠ±Π°Π²ΠΈΠ² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ tabindex="0", это Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ Ρ€Π°Π·Π΄Ρ€Π°ΠΆΠ°ΡŽΡ‰ΠΈΠ΅ ΠΈ ΡΠ±ΠΈΠ²Π°ΡŽΡ‰ΠΈΠ΅ с Ρ‚ΠΎΠ»ΠΊΡƒ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ табуляции Π½Π° Π½Π΅ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… элСмСнтах для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹, ΠΈ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ Π’ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ Π² настоящСС врСмя Π½Π΅ ΠΎΠ±ΡŠΡΠ²Π»ΡΡŽΡ‚ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку Π² этой ситуации. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π½Π΅ ΠΏΠΎΠ»Π°Π³Π°ΠΉΡ‚Π΅ΡΡŒ ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π° hover Π² качСствС Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€Π° для Π’Π°ΡˆΠ΅ΠΉ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ это сдСлаСт Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹ΠΌ запуск Π²Π°ΡˆΠΈΡ… Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… подсказок для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹.

<!-- HTML для записи -->
<a href="#" data-bs-toggle="tooltip" title="ВСкст Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки!">НавСдитС Π½Π° мСня</a>

<!-- Π Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ°, созданная ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠΌ -->
<div role="tooltip">
  <div></div>
  <div>
    ВСкст Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки!
  </div>
</div>

ΠžΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Π½Ρ‹Π΅ элСмСнты

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ с Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ disabled Π½Π΅ ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΡΡ„ΠΎΠΊΡƒΡΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ, навСсти Π½Π° Π½ΠΈΡ… курсор ΠΈΠ»ΠΈ Ρ‰Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ ΠΈΡ…, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку (ΠΈΠ»ΠΈ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ). Π’ качСствС ΠΎΠ±Ρ…ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΡƒΡ‚ΠΈ Π’Ρ‹ Π·Π°Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку ΠΈΠ· ΠΎΠ±ΠΎΠ»ΠΎΡ‡ΠΊΠΈ <div> ΠΈΠ»ΠΈ <span>, Π² ΠΈΠ΄Π΅Π°Π»Π΅ сдСланной с фокусировкой Π½Π° ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Π΅, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ tabindex="0".

ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹

ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Ρ‚ΡŒΡΡ Ρ‡Π΅Ρ€Π΅Π· Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ Π΄Π°Π½Π½Ρ‹Ρ… ΠΈΠ»ΠΈ JavaScript. Для Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² Π΄Π°Π½Π½Ρ‹Ρ… Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ имя ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° ΠΊ data-bs-, ΠΊΠ°ΠΊ Π² data-bs-animation="". ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚Π΅ Ρ‚ΠΈΠΏ case ΠΈΠΌΠ΅Π½ΠΈ ΠΎΠΏΡ†ΠΈΠΈ с camelCase Π½Π° kebab-case ΠΏΡ€ΠΈ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡Π΅ Ρ‡Π΅Ρ€Π΅Π· Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ Π΄Π°Π½Π½Ρ‹Ρ…. НапримСр: вмСсто использования data-bs-customClass="beautifier" ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ data-bs-custom-class="beautifier".

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΏΠΎ сообраТСниям бСзопасности ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ sanitize, sanitizeFn ΠΈ allowList Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ прСдоставлСны с использованиСм Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² Π΄Π°Π½Π½Ρ‹Ρ….

НаимСнованиСВипПо ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽΠžΠΏΠΈΡΠ°Π½ΠΈΠ΅
animationbooleantrueΠŸΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ CSS fade ΠΊ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказкС
containerstring | element | falsefalse

ДобавляСт Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку ΠΊ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌΡƒ элСмСнту. ΠŸΡ€ΠΈΠΌΠ΅Ρ€: container: 'body'. Π­Ρ‚ΠΎΡ‚ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ особСнно ΠΏΠΎΠ»Π΅Π·Π΅Π½ Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ позволяСт Π’Π°ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку Π² ΠΏΠΎΡ‚ΠΎΠΊΠ΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° рядом с элСмСнтом запуска, Ρ‡Ρ‚ΠΎ ΠΏΡ€Π΅Π΄ΠΎΡ‚Π²Ρ€Π°Ρ‚ΠΈΡ‚ ΠΎΡ‚Ρ€Ρ‹Π² Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки ΠΎΡ‚ элСмСнта запуска Π²ΠΎ врСмя измСнСния Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΎΠΊΠ½Π°.

delaynumber | object0

Π—Π°Π΄Π΅Ρ€ΠΆΠΊΠ° ΠΏΠΎΠΊΠ°Π·Π° ΠΈ скрытия Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки (мс) — Π½Π΅ относится ΠΊ Ρ€ΡƒΡ‡Π½ΠΎΠΌΡƒ Ρ‚ΠΈΠΏΡƒ Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€Π°

Если ΡƒΠΊΠ°Π·Π°Π½ Π½ΠΎΠΌΠ΅Ρ€, Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠ° примСняСтся ΠΊΠ°ΠΊ ΠΊ ΡΠΊΡ€Ρ‹Ρ‚ΠΈΡŽ, Ρ‚Π°ΠΊ ΠΈ ΠΊ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ.

Π‘Ρ‚Ρ€ΡƒΠΊΡ‚ΡƒΡ€Π° ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°: delay: { "show": 500, "hide": 100 }

htmlbooleanfalse

Π Π°Π·Ρ€Π΅ΡˆΠΈΡ‚ΡŒ HTML Π²ΠΎ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказкС.

Если `true`, HTML-Ρ‚Π΅Π³ΠΈ Π² title Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π²ΠΎ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказкС. Если `false`, свойство innerText Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ для вставки содСрТимого Π² DOM.

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ тСкст, Ссли Вас бСспокоят XSS-Π°Ρ‚Π°ΠΊΠΈ.

placementstring | function'top'

Как Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку — auto | top | bottom | left | right.
Если Π·Π°Π΄Π°Π½ΠΎ auto Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка Π±ΡƒΠ΄Π΅Ρ‚ динамичСски ΠΏΠ΅Ρ€Π΅ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π°.

Когда функция ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для опрСдСлСния размСщСния, ΠΎΠ½Π° вызываСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΡƒΠ·Π»Π° DOM Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки Π² качСствС ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚Π° ΠΈ ΡƒΠ·Π»Π° DOM Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€Π½ΠΎΠ³ΠΎ элСмСнта Π² качСствС Π²Ρ‚ΠΎΡ€ΠΎΠ³ΠΎ. ΠšΠΎΠ½Ρ‚Π΅ΠΊΡΡ‚ this установлСн Π½Π° экзСмпляр Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки.

selectorstring | falsefalseЕсли прСдусмотрСн сСлСктор, ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки Π±ΡƒΠ΄ΡƒΡ‚ Π΄Π΅Π»Π΅Π³ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹ ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΌ цСлям. На ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅ это Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для примСнСния Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… подсказок ΠΊ динамичСски добавляСмым элСмСнтам DOM (ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° jQuery. on). Π‘ΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ это ΠΈ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€.
templatestring'<div role="tooltip"><div></div><div></div></div>'

Π‘Π°Π·ΠΎΠ²Ρ‹ΠΉ HTML для использования ΠΏΡ€ΠΈ создании Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки.

title Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки Π±ΡƒΠ΄Π΅Ρ‚ вставлСн Π² .tooltip-inner.

.tooltip-arrow станСт стрСлкой Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки.

Π‘Π°ΠΌΡ‹ΠΉ внСшний элСмСнт ΠΎΠ±ΠΎΠ»ΠΎΡ‡ΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅Ρ‚ΡŒ класс .tooltip ΠΈ role="tooltip".

titlestring | element | function''

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, Ссли Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ title отсутствуСт.

Если Π·Π°Π΄Π°Π½Π° функция, ΠΎΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π·Ρ‹Π²Π°Ρ‚ΡŒΡΡ со ссылкой this, установлСнной Π½Π° элСмСнт, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»Π΅Π½Π° Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка.

triggerstring'hover focus'

Как запускаСтся Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка — click | hover | focus | manual. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ нСсколько Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€ΠΎΠ²; Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ ΠΈΡ… ΠΏΡ€ΠΎΠ±Π΅Π»ΠΎΠΌ.

'manual' ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒΡΡ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎ Ρ‡Π΅Ρ€Π΅Π· .tooltip('show'), .tooltip('hide') ΠΈ ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ .tooltip('toggle'); это Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ нСльзя ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€Π°ΠΌΠΈ.

Π‘Π°ΠΌΠΎ ΠΏΠΎ сСбС 'hover' ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Ρ‚ ΠΊ появлСнию Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… подсказок, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ нСльзя Π·Π°ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒ с ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹, ΠΈ ΠΈΡ… слСдуСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€ΠΈ Π½Π°Π»ΠΈΡ‡ΠΈΠΈ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ Ρ‚ΠΎΠΉ ΠΆΠ΅ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹.

fallbackPlacementsarray['top', 'right', 'bottom', 'left']ΠžΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚Π΅ Ρ€Π΅Π·Π΅Ρ€Π²Π½Ρ‹Π΅ мСста размСщСния, прСдоставив список мСст размСщСния Π² массивС (Π² порядкС прСдпочтСния). Для получСния Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ смотритС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ ΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠΈ Popper.
boundarystring | element'clippingParents'Π“Ρ€Π°Π½ΠΈΡ†Π° ограничСния пСрСполнСния Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки. По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ это 'clippingParents' ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒ ссылку HTMLElement (Ρ‚ΠΎΠ»ΡŒΠΊΠΎ JavaScript). Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ смотритС Π² Popper Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ preventOverflow.
customClassstring | function''

ДобавляйтС классы Π²ΠΎ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½Π° отобраТаСтся. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ эти классы Π±ΡƒΠ΄ΡƒΡ‚ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ‹ Π² Π΄ΠΎΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅ ΠΊ Π»ΡŽΠ±Ρ‹ΠΌ классам, ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΌ Π² шаблонС. Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ нСсколько классов, Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅ ΠΈΡ… ΠΏΡ€ΠΎΠ±Π΅Π»Π°ΠΌΠΈ: 'class-1 class-2'.

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ, которая Π΄ΠΎΠ»ΠΆΠ½Π° Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Ρ‚ΡŒ ΠΎΠ΄Π½Ρƒ строку, ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‰ΡƒΡŽ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΈΠΌΠ΅Π½Π° классов.

sanitizebooleantrueΠ’ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ ΠΈΠ»ΠΈ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ Π΄Π΅Π·ΠΈΠ½Ρ„Π΅ΠΊΡ†ΠΈΡŽ. Если Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ 'template' ΠΈ 'title' , Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ‡ΠΈΡ‰Π΅Π½Ρ‹. Π‘ΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Ρ€Π°Π·Π΄Π΅Π» очистки Π² нашСй Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ ΠΏΠΎ JavaScript.
allowListobjectΠ—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽΠžΠ±ΡŠΠ΅ΠΊΡ‚, содСрТащий Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½Π½Ρ‹Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ ΠΈ Ρ‚Π΅Π³ΠΈ
sanitizeFnnull | functionnullΠ—Π΄Π΅ΡΡŒ Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ свою ΡΠΎΠ±ΡΡ‚Π²Π΅Π½Π½ΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ Π΄Π΅Π·ΠΈΠ½Ρ„Π΅ΠΊΡ†ΠΈΠΈ. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ, Ссли Π’Ρ‹ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°Π΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΡƒΡŽ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ для выполнСния очистки.
offsetarray | string | function[0, 0]

Π‘ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ†Π΅Π»ΠΈ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ строку Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°Ρ… Π΄Π°Π½Π½Ρ‹Ρ… со значСниями, Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌΠΈ запятыми, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€: data-bs-offset="10,20"

Когда функция ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для опрСдСлСния смСщСния, ΠΎΠ½Π° вызываСтся с ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠΌ, содСрТащим Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ popper, ссылку ΠΈ popper rects Π² качСствС ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚Π°. Π£Π·Π΅Π» DOM Π·Π°ΠΏΡƒΡΠΊΠ°ΡŽΡ‰Π΅Π³ΠΎ элСмСнта пСрСдаСтся Π² качСствС Π²Ρ‚ΠΎΡ€ΠΎΠ³ΠΎ Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚Π°. Ѐункция Π΄ΠΎΠ»ΠΆΠ½Π° Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Ρ‚ΡŒ массив с двумя числами: [skidding, distance].

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ смотритС Π² offset Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ Popper.

offsetarray | string | function[0, 0]

Π‘ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ†Π΅Π»ΠΈ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ строку Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°Ρ… Π΄Π°Π½Π½Ρ‹Ρ… со значСниями, Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌΠΈ запятыми, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€: data-bs-offset="10,20"

Когда функция ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для опрСдСлСния смСщСния, ΠΎΠ½Π° вызываСтся с ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠΌ, содСрТащим Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ popper, ссылку ΠΈ popper rects Π² качСствС ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚Π°. Π£Π·Π΅Π» DOM Π·Π°ΠΏΡƒΡΠΊΠ°ΡŽΡ‰Π΅Π³ΠΎ элСмСнта пСрСдаСтся Π² качСствС Π²Ρ‚ΠΎΡ€ΠΎΠ³ΠΎ Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚Π°. Ѐункция Π΄ΠΎΠ»ΠΆΠ½Π° Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Ρ‚ΡŒ массив с двумя числами: [skidding, distance].

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ смотритС Π² offset Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ Popper.

popperConfignull | object | functionnull

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΡŽ Popper ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для Bootstrap, смотритС ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΡŽ Popper.

Когда функция ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для создания ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ Popper, ΠΎΠ½Π° вызываСтся с ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ содСрТит ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΡŽ Popper ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для Bootstrap. Π­Ρ‚ΠΎ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½ΠΈΡ‚ΡŒ настройки ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ с вашСй собствСнной ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠ΅ΠΉ. Ѐункция Π΄ΠΎΠ»ΠΆΠ½Π° Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Ρ‚ΡŒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ для Popper.

Атрибуты Π΄Π°Π½Π½Ρ‹Ρ… для ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… подсказок

Π’ качСствС Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Ρ‹ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ для ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… подсказок ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² Π΄Π°Π½Π½Ρ‹Ρ…, ΠΊΠ°ΠΊ описано Π²Ρ‹ΡˆΠ΅.

ИспользованиС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ с
popperConfig
var tooltip = new bootstrap.Tooltip(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {. ..}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

ΠœΠ΅Ρ‚ΠΎΠ΄Ρ‹

show

ΠŸΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку элСмСнта. Π’ΠΎΠ·Π²Ρ€Π°Ρ‚ ΠΊ Π²Ρ‹Π·Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ сторонС Π΄ΠΎ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка Π±Ρ‹Π»Π° фактичСски ΠΏΠΎΠΊΠ°Π·Π°Π½Π° (Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π΄ΠΎ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ‚ событиС shown.bs.tooltip). Π­Ρ‚ΠΎ считаСтся β€œΡ€ΡƒΡ‡Π½Ρ‹ΠΌβ€ запуском Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки. Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки с Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌΠΈ Π½ΡƒΠ»Π΅Π²ΠΎΠΉ Π΄Π»ΠΈΠ½Ρ‹ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ.

hide

Π‘ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку элСмСнта. Π’ΠΎΠ·Π²Ρ€Π°Ρ‚ ΠΊ Π²Ρ‹Π·Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ сторонС Π΄ΠΎ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка Π±Ρ‹Π»Π° фактичСски скрыта (Ρ‚.Π΅. Π΄ΠΎ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ‚ событиС hidden.bs.tooltip). Π­Ρ‚ΠΎ считаСтся β€œΡ€ΡƒΡ‡Π½Ρ‹ΠΌβ€ запуском Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки.

toggle

ΠŸΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку элСмСнта. Π’ΠΎΠ·Π²Ρ€Π°Ρ‚ ΠΊ Π²Ρ‹Π·Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ сторонС Π΄ΠΎ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка Π±Ρ‹Π»Π° фактичСски ΠΏΠΎΠΊΠ°Π·Π°Π½Π° ΠΈΠ»ΠΈ скрыта (Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π΄ΠΎ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ‚ событиС shown.bs.tooltip ΠΈΠ»ΠΈ hidden.bs.tooltip). Π­Ρ‚ΠΎ считаСтся β€œΡ€ΡƒΡ‡Π½Ρ‹ΠΌβ€ запуском Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки.

dispose

Π‘ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ ΠΈ ΡƒΠ½ΠΈΡ‡Ρ‚ΠΎΠΆΠ°Π΅Ρ‚ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку элСмСнта (УдаляСт сохранСнныС Π΄Π°Π½Π½Ρ‹Π΅ Π² элСмСнтС DOM). Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠ΅ Π΄Π΅Π»Π΅Π³ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ (ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠΎΠ·Π΄Π°ΡŽΡ‚ΡΡ с использованиСм ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° selector), Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΡƒΠ½ΠΈΡ‡Ρ‚ΠΎΠΆΠ΅Π½Ρ‹ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½ΠΎ для Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΡ… элСмСнтов Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€Π°.

enable

Π”Π°Π΅Ρ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ отобраТСния Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки элСмСнта. Подсказки Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Ρ‹ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.

disable

Π£Π±ΠΈΡ€Π°Π΅Ρ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ отобраТСния Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки элСмСнта. Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ссли ΠΎΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Π°.

toggleEnabled

ΠŸΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ отобраТСния ΠΈΠ»ΠΈ скрытия Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки элСмСнта.

update

ΠžΠ±Π½ΠΎΠ²Π»ΡΠ΅Ρ‚ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки элСмСнта.

getInstance

БтатичСский ΠΌΠ΅Ρ‚ΠΎΠ΄, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠΉ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ экзСмпляр Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки, связанный с элСмСнтом DOM.

var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(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 () {
  // Π΄Π΅Π»Π°ΠΉΡ‚Π΅ Ρ‡Ρ‚ΠΎ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ...
})

tooltip.hide()

CSS Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки. Π£Ρ€ΠΎΠΊΠΈ для Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ…. W3Schools Π½Π° русском


Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS?


Π”Π΅ΠΌΠΎ: ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ подсказок

Подсказка часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для указания Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎ Ρ‡Π΅ΠΌ-Π»ΠΈΠ±ΠΎ, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ Π½Π° элСмСнт:

Π’Π²Π΅Ρ€Ρ…Ρƒ ВСкст подсказки

Π‘ΠΏΡ€Π°Π²Π° ВСкст подсказки

Π’Π½ΠΈΠ·Ρƒ ВСкст подсказки

Π‘Π»Π΅Π²Π° ВСкст подсказки


Основная подсказка

Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку, которая появляСтся, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ Π½Π° элСмСнт:

ΠŸΡ€ΠΈΠΌΠ΅Ρ€


/* ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ подсказок */
. tooltip {
Β Β position: relative;
Β  display: inline-block;
Β  border-bottom: 1px dotted black; /* Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Ρ‚ΠΎΡ‡ΠΊΠΈ ΠΏΠΎΠ΄ тСкстом ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΌΡ‹ΡˆΠΈ */
}

/* ВСкст подсказки */
.tooltip .tooltiptext {
Β Β visibility: hidden;
Β Β width: 120px;
Β  background-color: black;
Β Β color: #fff;
Β Β text-align: center;
Β  padding: 5px 0;
Β  border-radius: 6px;
Β 
Β  /* РазмСститС тСкст Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки — см. ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π½ΠΈΠΆΠ΅! */
Β  position: absolute;
Β  z-index: 1;
}

/* ΠŸΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ тСкст Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ указатСля ΠΌΡ‹ΡˆΠΈ Π½Π° ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки */
.tooltip:hover .tooltiptext {
Β Β visibility: visible;
}
</style>

<div>НавСдитС Π½Π° мСня
Β  <span>ВСкст подсказки</span>
</div>

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»

ОбъяснСниС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°

HTML: Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ элСмСнт ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ <div>) ΠΈ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π² Π½Π΅Π³ΠΎ класс "tooltip". Когда ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°Π²Π΅Π΄Π΅Ρ‚ курсор Π½Π° этот <div>, ΠΎΠ½ ΠΏΠΎΠΊΠ°ΠΆΠ΅Ρ‚ тСкст Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки.

ВСкст Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки помСщаСтся Π²Π½ΡƒΡ‚Ρ€ΠΈ встроСнного элСмСнта (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, <span>) с class="tooltiptext".

CSS: Класс tooltip примСняСтся position:relative, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌ для позиционирования тСкста Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки (position:absolute). ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: НиТС ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Ρ€Π°ΡΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ подсказку.

Класс tooltiptext содСрТит фактичСский тСкст Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки. По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΎΠ½ скрыт ΠΈ Π±ΡƒΠ΄Π΅Ρ‚ Π²ΠΈΠ΄Π΅Π½ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ (см. Π²Ρ‹ΡˆΠ΅). ΠœΡ‹ Ρ‚Π°ΠΊΠΆΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΠ»ΠΈ Π² Π½Π΅Π³ΠΎ нСсколько основных стилСй: ΡˆΠΈΡ€ΠΈΠ½Ρƒ 120px, Ρ†Π²Π΅Ρ‚ Ρ‡Π΅Ρ€Π½ΠΎΠ³ΠΎ Ρ„ΠΎΠ½Π°, Ρ†Π²Π΅Ρ‚ Π±Π΅Π»ΠΎΠ³ΠΎ тСкста, Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ тСкст, Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΉ отступы 5px.

CSS свойство border-radius ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для добавлСния Π·Π°ΠΊΡ€ΡƒΠ³Π»Π΅Π½Π½Ρ‹Ρ… ΡƒΠ³Π»ΠΎΠ² ΠΊ тСксту Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки.

Π‘Π΅Π»Π΅ΠΊΡ‚ΠΎΡ€ :hover ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для отобраТСния тСкста Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ Π½Π° <div> с class="tooltip".


ΠŸΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… подсказок

Π’ этом ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка находится справа (left:105%) ΠΎΡ‚ «Π½Π°Π²Π΅Π΄Π΅Π½Π½ΠΎΠ³ΠΎ» тСкста (<div>). Π’Π°ΠΊΠΆΠ΅ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ top:-5px ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для размСщСния Π΅Π³ΠΎ Π² сСрСдинС элСмСнта ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°. ΠœΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ число 5, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ тСкст Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки ΠΈΠΌΠ΅Π΅Ρ‚ Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ ΠΈ Π½ΠΈΠΆΠ½ΠΈΠΉ отступы 5px. Если Π²Ρ‹ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚Π΅ Π΅Π³ΠΎ отступ, Ρ‚Π°ΠΊΠΆΠ΅ ΡƒΠ²Π΅Π»ΠΈΡ‡ΡŒΡ‚Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ свойства top, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΎ ΠΎΡΡ‚Π°Π²Π°Π»ΠΎΡΡŒ посСрСдинС (Ссли это Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ). Π’ΠΎ ΠΆΠ΅ самоС Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ подсказка Π±Ρ‹Π»Π° располоТСна слСва.

Подсказка справа

.tooltip .tooltiptext {
Β  top: -5px;
Β  left: 105%;
}

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

НавСдитС Π½Π° мСня ВСкст подсказки

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»

Подсказка слСва

.tooltip .tooltiptext {
Β  top: -5px;
Β  right: 105%;
}

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

НавСдитС Π½Π° мСня ВСкст подсказки

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка появлялась свСрху ΠΈΠ»ΠΈ снизу, см. ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π½ΠΈΠΆΠ΅. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ свойство margin-left со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ минус 60 пиксСлСй. Π­Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку Π²Ρ‹ΡˆΠ΅ / Π½ΠΈΠΆΠ΅ тСкста, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½ΡƒΠΆΠ½ΠΎ навСсти тСкст. УстанавливаСтся Π½Π° ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρƒ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки (120/2 = 60).

Подсказка Π²Π²Π΅Ρ€Ρ…Ρƒ

.tooltip .tooltiptext {
Β  width: 120px;
Β  bottom: 100%;
Β  left: 50%;
Β Β margin-left: -60px; /* Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρƒ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ (120/2 = 60), Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ подсказку */
}

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

НавСдитС Π½Π° мСня ВСкст подсказки

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»

Подсказка Π²Π½ΠΈΠ·Ρƒ

. tooltip .tooltiptext {
Β  width: 120px;
Β  top: 100%;
Β  left: 50%;
Β Β margin-left: -60px; /* Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Ρƒ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ (120/2 = 60), Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ подсказку */
}

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

НавСдитС Π½Π° мСня ВСкст подсказки

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»

Подсказка со стрСлкой

Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ стрСлку, которая Π΄ΠΎΠ»ΠΆΠ½Π° ΠΏΠΎΡΠ²Π»ΡΡ‚ΡŒΡΡ с ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ стороны Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки, Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ «ΠΏΡƒΡΡ‚ΠΎΠ΅» содСрТимоС послС Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки с классом псСвдоэлСмСнта ::after вмСстС со свойством content. Π‘Π°ΠΌΠ° стрСлка создана с использованиСм Π³Ρ€Π°Π½ΠΈΡ†. Π­Ρ‚ΠΎ сдСлаСт подсказку ΠΏΠΎΡ…ΠΎΠΆΠ΅ΠΉ Π½Π° Ρ€Π΅Ρ‡Π΅Π²ΠΎΠΉ ΠΏΡƒΠ·Ρ‹Ρ€ΡŒ.

Π­Ρ‚ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ дСмонстрируСт, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ стрСлку Π²Π½ΠΈΠ·Ρƒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки:

НиТняя стрСлка

.tooltip .tooltiptext::after {
Β  content: » «;
Β  position: absolute;
Β  top: 100%; /* Π’ Π½ΠΈΠΆΠ½Π΅ΠΉ части Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки */
Β  left: 50%;
Β  margin-left: -5px;
Β  border-width: 5px;
Β  border-style: solid;
Β  border-color: black transparent transparent transparent;
}

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

НавСдитС Π½Π° мСня ВСкст подсказки

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»

ОбъяснСниС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°

ΠŸΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚Π΅ стрСлку Π²Π½ΡƒΡ‚Ρ€ΠΈ подсказки: top: 100% помСстит стрСлку Π²Π½ΠΈΠ·Ρƒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки. left: 50% Π±ΡƒΠ΄Π΅Ρ‚ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ стрСлку.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Бвойство border-width опрСдСляСт Ρ€Π°Π·ΠΌΠ΅Ρ€ стрСлки. Если Π²Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚Π΅ Π΅Π³ΠΎ, Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚Π΅ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ margin-left Π½Π° Ρ‚ΠΎ ΠΆΠ΅ самоС. Π­Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒ стрСлку Π² Ρ†Π΅Π½Ρ‚Ρ€Π΅.

Бвойство border-color ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для прСобразования содСрТимого Π² стрСлку. ΠœΡ‹ устанавливаСм Π²Π΅Ρ€Ρ…Π½ΡŽΡŽ Π³Ρ€Π°Π½ΠΈΡ†Ρƒ Ρ‡Π΅Ρ€Π½Ρ‹ΠΌ, Π° ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΌ. Если Π±Ρ‹ всС стороны Π±Ρ‹Π»ΠΈ Ρ‡Π΅Ρ€Π½Ρ‹ΠΌΠΈ, Π²Ρ‹ Π±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»ΠΈ Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚.

Π­Ρ‚ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ дСмонстрируСт, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ стрСлку Π² Π²Π΅Ρ€Ρ…Π½ΡŽΡŽ Ρ‡Π°ΡΡ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Π½Π° этот Ρ€Π°Π· ΠΌΡ‹ установили Ρ†Π²Π΅Ρ‚ Π½ΠΈΠΆΠ½Π΅ΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹:

ВСрхняя стрСлка

.tooltip .tooltiptext::after {
Β Β content: » «;
Β Β position: absolute;
Β Β bottom: 100%;Β  /* Π’ Π²Π΅Ρ€Ρ…Π½Π΅ΠΉ части Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки */
Β  left: 50%;
Β  margin-left: -5px;
Β  border-width: 5px;
Β  border-style: solid;
Β  border-color: transparent transparent black transparent;
}

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

НавСдитС Π½Π° мСня ВСкст подсказки

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»

Π­Ρ‚ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ дСмонстрируСт, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ стрСлку слСва ΠΎΡ‚ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки:

Π‘Ρ‚Ρ€Π΅Π»ΠΊΠ° слСва

.tooltip .tooltiptext::after {
Β  content: » «;
Β Β position: absolute;
Β Β top: 50%;
Β  right: 100%; /* Π‘Π»Π΅Π²Π° ΠΎΡ‚ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки */
Β  margin-top: -5px;
Β  border-width: 5px;
Β  border-style: solid;
Β  border-color: transparent black transparent transparent;
}

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

НавСдитС Π½Π° мСня ВСкст подсказки

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»

Π­Ρ‚ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ дСмонстрируСт, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ стрСлку справа ΠΎΡ‚ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки:

Π‘Ρ‚Ρ€Π΅Π»ΠΊΠ° справа

.tooltip .tooltiptext::after {
Β  content: » «;
Β  position: absolute;
Β  top: 50%;
Β  left: 100%; /* Π‘ΠΏΡ€Π°Π²Π° ΠΎΡ‚ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки */
Β  margin-top: -5px;
Β  border-width: 5px;
Β  border-style: solid;
Β  border-color: transparent transparent transparent black;
}

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

НавСдитС Π½Π° мСня ВСкст подсказки

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами Β»

Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки (анимация)

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π·Π°Ρ‚Π΅ΠΌΠ½ΠΈΡ‚ΡŒ тСкст Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ собираСтся Π±Ρ‹Ρ‚ΡŒ Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ свойство CSS transition вмСстС со свойством opacity, ΠΈ ΠΎΠ½ΠΎ становится ΠΎΡ‚ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΠΎΠ³ΠΎ Π΄ΠΎ 100% Π²ΠΈΠ΄ΠΈΠΌΡ‹ΠΌ Π·Π° ΡƒΠΊΠ°Π·Π°Π½Π½ΠΎΠ΅ количСство сСкунд (Π² нашСм ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ это 1 сСкунда):


Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки

3 685 Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ / Tooltip

Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки

БСмь стилСвых ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠΉ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… подсказок (tooltip) Π½Π° jQuery ΠΈ CSS3 для вашСго сайта.

3 307 Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ / Tooltip

Tooltip Π½Π° jQuery ΠΈ CSS

Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ jQuery ΠΈ CSS. Π’ΡƒΡ‚ Π½Π΅Ρ‚ Π½ΠΈΠΊΠ°ΠΊΠΈΡ… ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ², просто ΠΎΠ΄Π½Π° функция ΠΈ Π΅Ρ‘ Π²Ρ‹Π·ΠΎΠ².

1 763 Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ / Tooltip

Подсказки с ΠΏΡƒΠ·Ρ‹Ρ€ΡŒΠΊΠ°ΠΌΠΈ

Плагин для Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Mootools — bubbles — подсказки с ΠΏΡƒΠ·Ρ‹Ρ€ΡŒΠΊΠ°ΠΌΠΈ. Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΊ соТалСнию Π½Π° ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠ΅ΠΉ вСрсии Mootools 1.1.2, Π½ΠΎ смотрится ΠΎΡ‡Π΅Π½ΡŒ красиво.

2 092 Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ / Tooltip

CSS3 Ρ‚ΡƒΠ»Ρ‚ΠΈΠΏΡ‹ — подсказки

Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π½Ρ‹Π΅ Π½Π° CSS. К подсказкС ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠΈΡ‚ΡŒ ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

1 977 Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ / Tooltip

Плагин подсказок MopTip

Плагин Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… подсказок MopTip. Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ mopBox ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ DIV, изобраТСния, Ρ„Π»Π΅ΡˆΠΊΠΈ, Π²ΠΈΠ΄Π΅ΠΎ ΠΈ Ρ‚.Π΄. Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π²: Safari 4+, Firefox 3+, Opera 9+, IE6, IE7, IE8+, Chrome.

6 541 Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ / Tooltip

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅-подсказка ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

Π­Ρ„Ρ„Π΅ΠΊΡ‚ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки — изобраТСния ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΈΠΊΠΎΠ½ΠΊΡƒ — ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Ρƒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ.

2 209 Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ / Tooltip

CSS3 tooltips (подсказки)

Π Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π½Ρ‹Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° CSS Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки для ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… элСмСнтов сайта.

1 913 Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ / Tooltip

ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ tooltip — just the tip

ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ Π² использовании Ρ‚ΡƒΠ»Ρ‚ΠΈΠΏ Just The Tip, Ссли Π²Ρ‹ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ хотя Π±Ρ‹ Π½Π΅ΠΌΠ½ΠΎΠΆΠΊΠΎ Π·Π½Π°Π΅Ρ‚Π΅ html ΠΈ jΠ°vascript. Π’ подсказкС ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ, ΠΊΠ°ΠΊ тСкст, Ρ‚Π°ΠΊ ΠΈ изобраТСния ΠΈ Π΄Π°ΠΆΠ΅ Π²ΠΈΠ΄Π΅ΠΎ.

2 231 Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ / Tooltip

ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ tooltip ΠΏΠ»Π°Π³ΠΈΠ½

Плагин подсказок (tooltip) ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ всСх Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² ΠΈ прост Π² ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠΈ. Гибкая настройка ΠΏΠΎΠ΄ любой ваш ΠΏΡ€ΠΎΠ΅ΠΊΡ‚.

2 010 Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ / Tooltip

Подсказка ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ — vTip

Β  ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ ΠΈ ΠΎΡ‡Π΅Π½ΡŒ Π»Π΅Π³ΠΊΠΈΠΉ ΠΏΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ эффСкт Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки.

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ подсказки ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

ΠžΠ±Π½ΠΎΠ²Π»ΡΠ΅Ρ‚ΡΡ!!! Π‘ΠΏΡ€Π°Π²ΠΎΡ‡Π½ΠΈΠΊ JavaScript


Π£Π·Π½Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ подсказки ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS.


НавСдитС курсор Π½Π° тСкст Π½ΠΈΠΆΠ΅:

БвСрхуВСкст подсказки

БправаВСкст подсказки

БнизуВСкст подсказки

БлСваВСкст подсказки

Π Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ ΠΊΠΎΠ΄Π° Β»


Подсказки ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ

Π¨Π°Π³ 1) Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ HTML:

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

<div>НавСдитС курсор Π½Π° мСня
Β  <span>ВСкст подсказки</span>
</div>



Π¨Π°Π³ 2) Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ CSS:

ΠŸΡ€ΠΈΠΌΠ΅Ρ€

/* ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ подсказок */
.tooltip {
Β Β position: relative;
Β  display: inline-block;
Β Β border-bottom: 1px dotted black; /* Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ‚ΠΎΡ‡ΠΊΠΈ ΠΏΠΎΠ΄ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Π΅ΠΌΡ‹ΠΌ тСкстом */
}

/* ВСкст подсказки */
.tooltip .tooltiptext {
Β  visibility: hidden;
Β  width: 120px;
Β  background-color: #555;
Β  color: #fff;
Β  text-align: center;
Β Β padding: 5px 0;
Β  border-radius: 6px;

Β  /* РасполоТитС тСкст подсказки */
Β  position: absolute;
Β  z-index: 1;
Β  bottom: 125%;
Β Β left: 50%;
Β  margin-left: -60px;

Β Β /* Π˜ΡΡ‡Π΅Π·Π°ΡŽΡ‚ Π² подсказкС */
Β Β opacity: 0;
Β Β transition: opacity 0.3s;
}

/* Подсказка стрСлка */
.tooltip .tooltiptext::after {
Β Β content: «»;
Β  position: absolute;
Β  top: 100%;
Β  left: 50%;
Β Β margin-left: -5px;
Β  border-width: 5px;
Β Β border-style: solid;
Β Β border-color: #555 transparent transparent transparent;
}

/* ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ тСкста подсказки ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ курсора ΠΌΡ‹ΡˆΠΈ Π½Π° ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ подсказки */
. tooltip:hover .tooltiptext {
Β  visibility: visible;
Β Β opacity: 1;
}

Π Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ ΠΊΠΎΠ΄Π° Β»

Π‘ΠΎΠ²Π΅Ρ‚: Π—Π°ΠΉΠ΄ΠΈΡ‚Π΅ Π½Π° наш ΡƒΡ‡Π΅Π±Π½ΠΈΠΊ CSS Подсказки Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС ΠΎ подсказках.

Π‘ΠΎΠ²Π΅Ρ‚: Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ «ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡŒΠ½Ρ‹Π΅» подсказки, ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π½Π° наш ΡƒΡ‡Π΅Π±Π½ΠΈΠΊ Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ — Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ ΠΎΠΊΠ½Π°

Π‘ΠΎΠ²Π΅Ρ‚: МодСли Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠΎΡ…ΠΎΠΆΠΈ Π½Π° подсказки. Π—Π°ΠΉΠ΄ΠΈΡ‚Π΅ Π½Π° наш ΡƒΡ‡Π΅Π±Π½ΠΈΠΊ Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ — МодСль Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ ΠΎ модСлях.


Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки Π½Π° jquery Β« Π‘Π»ΠΎΠ³ вСбмастСра Π ΠΎΠΌΠ°Π½Π° Π§Π΅Ρ€Π½Ρ‹ΡˆΠΎΠ²Π°

Π Π°Π½ΠΎ ΠΈΠ»ΠΈ ΠΏΠΎΠ·Π΄Π½ΠΎ любой Π²Π΅Π±-мастСр Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚ Π·Π°Π΄ΡƒΠΌΡ‹Π²Π°Ρ‚ΡŒΡΡ ΠΎ ΡŽΠ·Π°Π±ΠΈΠ»ΠΈΡ‚ΠΈ своСго сайта. Π₯очСтся с Π΄Π΅Π»Π°Ρ‚ΡŒ свой ΠΌΠ΅Π³Π° сайт ΠΈΠ»ΠΈ простой Π±Π»ΠΎΠ³ ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Ρ‚Π΅Π»ΡŒΠ½Π΅Π΅ ΠΈ ΡƒΠ΄ΠΎΠ±Π½Π΅Π΅ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ. БущСствуСт мноТСство Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Ρ„ΠΈΡˆΠ΅ΠΊ примСняСмых для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ Β«ΡŽΠ·Π°Π±Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈΒ» сайта, ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· Ρ‚Π°ΠΊΠΈΡ… являСтся созданиС Π½Π° сайтС Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… подсказок, ΠΌΠΎΠΆΠ½ΠΎ ограничится простыми подсказками прописанных Π² ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π΅ title, Π° ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒΡΡ ΠΊ ΡƒΠ΄ΠΎΠ±Π½ΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ΅ jQuery ΠΈ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ собствСнныС.

НаиболСС самой ΠΈ часто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠΉ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΎΠΉ для создания спСц. эффСктов для подсказок являСтся jQuery Tooltip Plugin.

И Ρ‚Π°ΠΊ вставляСм Π² ΡˆΠ°ΠΏΠΊΡƒ HTML Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°, ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄:

&lt;script type="text/javascript" src="js/jquery-compressed.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.dimensions.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.tooltip.min.js"&gt;&lt;/script&gt;

Π΄Π°Π»Π΅Π΅ для создания подсказки Π½Π° страницС, просто прописываСм ΠΎΠ΄Π½Ρƒ ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ

&lt;script type="text/javascript"&gt
$('#element_id').tooltip();
&lt;/script&gt;;

#element_id β€” Π˜Π΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ Π±Π»ΠΎΠΊΠ°, для ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ ΠΌΡ‹ Π΄Π΅Π»Π°Π΅ΠΌ подсказку. ВСкс подсказки Π±ΡƒΠ΄Π΅Ρ‚ взят автоматичСски ΠΈΠ· ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° title.

Π₯ΠΎΡ‡Ρƒ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ссли подсказка создаСтся для ссылки ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊ тСксту подсказки добавится Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΈΠ· ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° SRC ΠΈΠ»ΠΈ HREF, Ρ‡Ρ‚ΠΎΠ±Ρ‹ этого Π½Π΅ происходило слСдуСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ подсказку с ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠΌ:

&lt;script type="text/javascript"&gt;
$('#element_id'). tooltip({showURL: false});
&lt;/script&gt;

Π•Ρ‰Π΅ нСсколько способов созданиС подсказок с Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹ΠΌΠΈ эффСктами.

Показ Π±Π΅Π· Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΈ Π²ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, ΠΈΠ»ΠΈ ΠΆΠ΅ Π½Π°ΠΎΠ±ΠΎΡ€ΠΎΡ‚ ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎΠ΅ ΠΏΠ»Π°Π²Π½ΠΎΠ΅ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅

&lt;script type="text/javascript"&gt;
$('#element_id').tooltip({delay: 0});
&lt;/script&gt;

Живая подсказка, Π±ΡƒΠ΄Π΅Ρ‚ Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒΡΡ Π·Π° курсором ΠΌΡ‹ΡˆΠΊΠΈ, Π² области ΠΎΠ±ΡŒΠ΅ΠΊΡ‚Π° для ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π±Ρ‹Π»Π° Π·Π°Π΄Π°Π½Π½Π° подсказка:

&lt;script type="text/javascript"&gt;
$('#element_id').tooltip({track: true});
&lt;/script&gt;

МоТно Π·Π°Π΄Π°Ρ‚ΡŒ смСщСниС подсказки ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ курсора ΠΌΡ‹ΡˆΠΊΠΈ:

&lt;script type="text/javascript"&gt;
$('#element_id').tooltip({top: -20, left: -30});
&lt;/script&gt;

Π‘ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΏΠΎ этому ΠΏΠ»Π°Π³ΠΈΠ½Ρƒ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ Π½Π° сайтС Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°, Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ с использованиСм Ρ€Π°Π·Π½Ρ‹Ρ… настроСк ΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… эффСктов. пСрСйдя ΠΏΠΎ Π΄Π°Π½Π½ΠΎΠΉ ссылкС.

ΠŸΠΎΡ…ΠΎΠΆΠΈΠ΅ записи

Π›ΡƒΡ‡ΡˆΠΈΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ для javascript ΠΈ jQuery

5. Tipso

Github

Tipso β€” это Π»Π΅Π³ΠΊΠΈΠΉ ΠΈ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery Tooltip. ΠžΡ‡Π΅Π½ΡŒ Π»Π΅Π³ΠΊΠΎ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS.

4. Tipped.js

ДокумСнтация

Tipped β€” это ΠΏΠΎΠ»Π½ΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ для Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки Π½Π° JavaScript, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π΅Π³ΠΎ для создания Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… подсказок, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ прСкрасно Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚ Π² любом Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ Π½Π° любом устройствС.

3. html5tooltipsjs

Github

ΠΠ°ΡΠ»Π°ΠΆΠ΄Π°ΠΉΡ‚Π΅ΡΡŒ подсказками, написанными Π½Π° чистом JavaScript, с Π³Π»Π°Π΄ΠΊΠΎΠΉ Ρ‚Ρ€Π΅Ρ…ΠΌΠ΅Ρ€Π½ΠΎΠΉ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ, Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Π½ΠΎΠΉ Π² CSS. НСт Ρ€Π°ΠΌΠΎΡ‡Π½Ρ‹Ρ… зависимостСй.

2. Protip

Github

Protip β€” это Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ для jQuery. ΠŸΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ мноТСство доступных настроСк для настройки ΠΏΠ»Π°Π³ΠΈΠ½Π° ΠΏΠΎΠ΄ наши Π½ΡƒΠΆΠ΄Ρ‹:

  • 49 ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΉ (располоТСниС Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки)
  • ОбновлСниС подсказок Π² Ρ€Π΅ΠΆΠΈΠΌΠ΅ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ.
  • ΠŸΡ€ΠΎΠ²Π΅Ρ€ΠΊΠ° ΠΆΠΈΠ²ΠΎΠ³ΠΎ элСмСнта (элСмСнт ΡƒΠ΄Π°Π»Π΅Π½? -> подсказка Π΄ΠΎΠ»ΠΆΠ½Π° ΠΈΡΡ‡Π΅Π·Π½ΡƒΡ‚ΡŒ).
  • Гравитация: Π½Π°ΠΉΠ΄ΠΈΡ‚Π΅ Π»ΡƒΡ‡ΡˆΡƒΡŽ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ, Ссли ΠΎΠ½Π° Π½Π΅ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ ΠΊ экрану.
  • Π¦Π΅Π»ΠΈ DOM: Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ΡΡ Π² ΠΊΠΎΡ€Π΅Π½ΡŒ ΠΈΠ»ΠΈ Π² Π΄Ρ€ΡƒΠ³ΠΎΠΉ Ρ†Π΅Π»Π΅Π²ΠΎΠΉ элСмСнт.
  • Π Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅: снаруТи, Π²Π½ΡƒΡ‚Ρ€ΠΈ, Π±ΠΎΡ€Π΄ΡŽΡ€, Ρ†Π΅Π½Ρ‚Ρ€
  • НаТмитС Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ ΠΈ Π»ΠΈΠΏΠΊΠΈΠ΅ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки.
  • ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ HTML
  • Π˜Π½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Π΅ подсказки
  • Π—Π°Π΄Π΅Ρ€ΠΆΠΊΠΈ Π²Ρ…ΠΎΠ΄Π° / Π²Ρ‹Ρ…ΠΎΠ΄Π°
  • Авто-скрытиС
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π·Π½Π°Ρ‡ΠΊΠΎΠ²
  • Π‘ΠΊΠΈΠ½Ρ‹, Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹, схСмы
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ
  • Mixins (Ρ‚ΠΎΠ»ΡŒΠΊΠΎ CSS, скоро появится JS)
  • ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ события ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎΠ³ΠΎ Π²Ρ‹Π·ΠΎΠ²Π°
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° UMD

1.Tooltipster

Github

Tooltipster β€” это ΠΌΠΎΡ‰Π½Ρ‹ΠΉ, Π³ΠΈΠ±ΠΊΠΈΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт Π»Π΅Π³ΠΊΠΎ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ сСмантичСскиС, соврСмСнныС Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки, ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½Π½Ρ‹Π΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS.

ΠžΠΏΡ†ΠΈΠΈ Tooltipster Π΄Π°ΡŽΡ‚ Π²Π°ΠΌ ΡˆΠΈΡ€ΠΎΠΊΠΈΠΉ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Ρ…, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ подсказку Π² соотвСтствии с вашим сСрдцСм.

Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉBalloon.css

Github

Balloon.css позволяСт Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки ΠΊ элСмСнтам Π±Π΅Π· JavaScript ΠΈ всСго Π² нСсколько строк CSS. Π”Π°, хотя этот ΠΏΠ»Π°Π³ΠΈΠ½ Π½Π΅ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ javascript ΠΈΠ»ΠΈ jQuery, заслуТиваСт упоминания, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ довольно ΠΏΠΎΠ»Π΅Π·Π΅Π½ ΠΈ прост Π² использовании.

Если Π²Ρ‹ Π΄ΡƒΠΌΠ°Π΅Ρ‚Π΅, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ Π·Π°Π±Ρ‹Π»ΠΈ Π΅Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки, Π½Π΅ ΡΡ‚Π΅ΡΠ½ΡΠΉΡ‚Π΅ΡΡŒ ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ ΠΈΠΌ с Π½Π°ΠΌΠΈ Π² ΠΏΠΎΠ»Π΅ для ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠ΅Π².

Tooltip, Popover, Dropdown ΠΈ Menu Library

Tippy.js — это ΠΏΠΎΠ»Π½ΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ для Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… подсказок, Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… ΠΎΠΊΠΎΠ½, Ρ€Π°ΡΠΊΡ€Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ…ΡΡ списков ΠΈ мСню для web Π½Π° ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅ Popper.

Π­Ρ‚ΠΎ общая абстракция для Π»ΠΎΠ³ΠΈΠΊΠΈ ΠΈ стиля Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… элСмСнтов. ΠΈΠ· ΠΏΠΎΡ‚ΠΎΠΊΠ° Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° ΠΈ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ рядом со ссылочным элСмСнтом, Π½Π°Π»ΠΎΠΆΠ΅Π½Π½Ρ‹ΠΌ Π½Π° вСрхняя Ρ‡Π°ΡΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса.

Π“ΠΎΡ‚ΠΎΠ²Ρ‹ Π½Π°Ρ‡Π°Ρ‚ΡŒ? ΠŸΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅ Ρ€Π°Π·Π΄Π΅Π» «ΠΠ°Ρ‡Π°Π»ΠΎ Ρ€Π°Π±ΠΎΡ‚Ρ‹» ΠΈΠ»ΠΈ просмотритС Π΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€Π°Ρ†ΠΈΡŽ Π₯арактСристики Π’ΠΈΠΏΠΏΠΈ Π½ΠΈΠΆΠ΅.


# По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ

Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ выглядит Ρ‚Π°ΠΊ:

Моя кнопка

Она ΠΈΠΌΠ΅Π΅Ρ‚ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° # 333 ΠΈ стрСлку, ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ Π½Π° элСмСнт, ΠΈ запускаСтся событиями mouseenter ΠΈΠ»ΠΈ focus , поэтому ΠΎΠ½ появляСтся, ΠΊΠΎΠ³Π΄Π° зависал, фокусировался с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ ΠΈΠ»ΠΈ касался ΠΏΡ€ΠΈ использовании сСнсорного устройства.

Π‘ элСмСнтом ΠΊΠ½ΠΎΠΏΠΊΠΈ Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

 

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ½ΠΈΡ†ΠΈΠ°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

 

tippy ('# myButton', { content: "Π― Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка Π’ΠΈΠΏΠΏΠΈ!", });


#Placement

Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Ρ‡Π΅Ρ‚Ρ‹Ρ€ΡŒΠΌΡ основными способами ΠΏΠΎ ΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΡŽ ΠΊ ссылочному элСмСнту. Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку ΠΌΠΎΠΆΠ½ΠΎ ΡΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ ΠΏΠΎ оси с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ суффикса - Π½Π°Ρ‡Π°Π»ΠΎ ΠΈΠ»ΠΈ - ΠΊΠΎΠ½Π΅Ρ† .

Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ

Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ ΠΏΡ€Π΅Π΄Π΅Π»

Π²Π΅Ρ€Ρ…Π½ΠΈΠΉ ΠΊΠΎΠ½Π΅Ρ†

ΠΏΡ€Π°Π²Ρ‹ΠΉ

ΠΏΡ€Π°Π²Ρ‹ΠΉ старт

ΠΏΡ€Π°Π²Ρ‹ΠΉ ΠΊΠΎΠ½Π΅Ρ†

Π½ΠΈΠΆΠ½ΠΈΠΉ

Π½ΠΈΠΆΠ½ΠΈΠΉ старт

Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ½Π΅Ρ†

Π»Π΅Π²Ρ‹ΠΉ

Π»Π΅Π²Ρ‹ΠΉ старт Π»Π΅Π²Ρ‹ΠΉ

-end

Если Ρ‚ΠΈΠΏΠΏΠΈ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒΡΡ Π² ΠΆΠ΅Π»Π°Π΅ΠΌΠΎΠ΅ мСсто, ΠΎΠ½ пСрСвСрнСтся Π½Π° ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½ΠΎΠ΅. Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅, Ссли мСста ΠΌΠ°Π»ΠΎ. Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹Ρ… Π²Ρ‹ΡˆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ… ΠΏΠ΅Ρ€Π΅Π²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΏΡ€ΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ мСсто размСщСния.


#Arrows

Π‘Ρ‚Ρ€Π΅Π»ΠΊΠ°, ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰Π°Ρ Π½Π° элСмСнт, ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ Π΅Π³ΠΎ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ ΠΈΠ»ΠΈ Ρ„ΠΎΡ€ΠΌΡƒ. ΠΈΠ·ΠΌΠ΅Π½Π΅Π½Ρ‹ ΠΈΠ»ΠΈ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Ρ‹.

DefaultRoundLargeSmallWideNarrow


#Animations

Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Ρ‚ΠΈΠΏΡ‹ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π°. По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ это простой fade (ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ нСпрозрачности).

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Π½Ρ‹Π΅ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ

Π­Ρ‚ΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Ρ‹ Π² ΠΏΠ°ΠΊΠ΅Ρ‚ ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ.

сдвиг

ΠΌΠ°Π»ΠΎΠ·Π°ΠΌΠ΅Ρ‚Π½Ρ‹ΠΉ

ΠΊΡ€Π°ΠΉΠ½ΠΈΠΉ сдвиг

сдвиг

ΠΌΠ°Π»ΠΎΠ·Π°ΠΌΠ΅Ρ‚Π½Ρ‹ΠΉ сдвиг

ΠΊΡ€Π°ΠΉΠ½ΠΈΠΉ сдвиг

шкала

тонкая шкала

шкала- крайняя

пСрспСктива

тонкая пСрспСктива

крайняя пСрспСктива

# Π­Ρ„Ρ„Π΅ΠΊΡ‚ заполнСния ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π°

ВСкст

# Π˜Π½Π΅Ρ€Ρ†ΠΈΡ / эффСкт упругости Ρ€ΠΎΠ³Π°Ρ‚ΠΊΠΈ

Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Ρ„ΠΈΠ·ΠΈΠΊΡƒ ΠΏΡ€ΡƒΠΆΠΈΠ½Ρ‹ CSS Π² Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΡŽ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ синхронизации ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° .

scalecale-subtlescale-extreme

#CSS-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… ΠΊΠ°Π΄Ρ€ΠΎΠ²

Для Π±ΠΎΠ»Π΅Π΅ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠ½ΡƒΡ‚ΠΎΠ³ΠΎ уровня Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ настоящиС CSS-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ (ΠΏΡ€Π°Π²ΠΈΠ»Π° @keyframes ) Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠ°ΠΊΠ΅Ρ‚Π° animate.css :

rubberBandtada

#Duration

01000 [0, 500] [500, 0]


#Themes

Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ настраиваСмый ΡΡ‚ΠΈΠ»ΡŒ.

# Π’ΠΊΠ»ΡŽΡ‡Π΅Π½Π½Ρ‹Π΅ Ρ‚Π΅ΠΌΡ‹

Π­Ρ‚ΠΈ Ρ‚Π΅ΠΌΡ‹ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Ρ‹ Π² ΠΏΠ°ΠΊΠ΅Ρ‚ ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ.

lightlight-bordermaterialtranslucent

# Custom themes

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ‚Π΅ΠΌΡ‹ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ любой CSS ΠΊ ΡˆΠ°Π±Π»ΠΎΠ½Ρƒ.

gradientretroforest


#Triggers

Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π²Ρ‹Π·Π²Π°Π½Ρ‹ Ρ‰Π΅Π»Ρ‡ΠΊΠΎΠΌ ΠΈΠ»ΠΈ событиями фокусировки .

ClickFocus


#Interactivity

Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ, позволяя навСсти Π½Π° Π½ΠΈΡ… курсор ΠΈ Ρ‰Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ ΠΌΡ‹ΡˆΡŒΡŽ Π²Π½ΡƒΡ‚Ρ€ΠΈ Π½ΠΈΡ….

Π˜Π½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ


#HTML Content

Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки ΠΌΠΎΠ³ΡƒΡ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ HTML.

HTML ContentDropdown


#Delay

Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки ΠΌΠΎΠ³ΡƒΡ‚ Π·Π°Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ скрытиС ΠΈΠ»ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ послС Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€Π°.

500 [800, 0] [0, 800]


#Follow Cursor

Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки ΠΌΠΎΠ³ΡƒΡ‚ ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ Π·Π° курсором ΠΌΡ‹ΡˆΠΈ ΠΈ ΠΏΡ€ΠΈΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΉ оси. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚ΡŒ Π·Π° курсором, ΠΏΠΎΠΊΠ° Π½Π΅ отобразится, послС Ρ‡Π΅Π³ΠΎ ΠΎΠ½Π° остановится ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ (Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹Π΅).

DefaultHorizontalVerticalInitial


#SVGs

Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½Ρ‹ Π½Π° ΡƒΠ·Π»Π°Ρ… SVG, Π³Π΄Π΅ followCursor: 'initial' становится ΠΎΡ‡Π΅Π½ΡŒ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ прямо Π½Π° Π»ΠΈΠ½ΠΈΠΈ.


#Singleton

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΎΠ΄Π½Ρƒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку для мноТСства Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… ссылочных элСмСнтов. Π­Ρ‚ΠΎ позволяСт Π²Π°ΠΌ «Π³Ρ€ΡƒΠΏΠΏΠΎΠ²Ρ‹Π΅» Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки с ΠΎΠ±Ρ‰ΠΈΠΌ Ρ‚Π°ΠΉΠΌΠ΅Ρ€ΠΎΠΌ для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ UX, ΠΊΠΎΠ³Π΄Π° элСмСнты располоТСны рядом Π΄Ρ€ΡƒΠ³ с Π΄Ρ€ΡƒΠ³ΠΎΠΌ. Π΅ΡΡ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки с Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ prop.

ΠžΠ΄Π½ΠΎΡΠ»Π΅ΠΌΠ΅Π½Ρ‚Π½Ρ‹ΠΉ tippy с Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ : 500 :

TextTextTextText

Singleton tippy для Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ сообщСния с Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ : 500 :

TextTextTextText

TextTextTextText

Singleton tippy 910Text

000 с ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠΌ 910Text

Π’ΠΈΠΏΠΏΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π²Π»ΠΎΠΆΠ΅Π½ Π² Π΄Ρ€ΡƒΠ³ΠΎΠΉ.

Π£Ρ€ΠΎΠ²Π΅Π½ΡŒ 0

ΠŸΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ‚ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ систСму Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎ мСню.

# Много большС …

Бписок возмоТностСй Π²Ρ‹ΡˆΠ΅ Π½Π΅ являСтся ΠΏΠΎΠ»Π½Ρ‹ΠΌ. Π’ΠΈΠΏΠΏΠΈ способСн Π½Π° ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅ Π²Π΅Ρ‰ΠΈ.

Начало Ρ€Π°Π±ΠΎΡ‚Ρ‹ | Tippy.js

Начало Ρ€Π°Π±ΠΎΡ‚Ρ‹

Π•ΡΡ‚ΡŒ Π΄Π²Π° способа ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΠ°ΠΊΠ΅Ρ‚.

β„–1. ΠœΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ€ ΠΏΠ°ΠΊΠ΅Ρ‚ΠΎΠ²

 

# npm npm я tippy.js # ΠŸΡ€ΡΠΆΠ° yarn add tippy.js

Π’ своСм ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ tippy ΠΈ основной CSS:

 

import tippy from 'tippy.js '; ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ 'tippy.js / dist / tippy.css'; // Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ для стилизации

ΠŸΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅Ρ‚ΡΡ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ ΠΏΠ°ΠΊΠ΅Ρ‚ ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ webpack, Rollup ΠΈΠ»ΠΈ Parcel. Если Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚Π΅ сообщСниС ΠΎΠ± ошибкС , процСсс Π²Π½ΡƒΡ‚Ρ€ΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°, см. FAQ для получСния ΠΏΠΎΠΌΠΎΡ‰ΠΈ.

Π―Π΄Ρ€ΠΎ CSS Π½Π΅ трСбуСтся, Π½ΠΎ прСдоставляСт Π²Π°ΠΌ Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ ΡΡ‚ΠΈΠ»ΡŒ для использования. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Tippy «Π±Π΅Π· Π³ΠΎΠ»ΠΎΠ²Ρ‹» Π±Π΅Π· отрисовки элСмСнтов ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΈΠ»ΠΈ CSS, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Headless Tippy.

β„–2. CDN

 

РазмСститС ΠΈΡ… Π² самом Π½ΠΈΠ·Ρƒ , ΡƒΠ±Π΅Π΄ΠΈΠ²ΡˆΠΈΡΡŒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½Ρ‹ ΠΏΠ΅Ρ€Π΅Π΄ свои собствСнныС скрипты. НомСра вСрсий послС @ Π²Π°ΠΆΠ½Ρ‹, ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Π½Π΅ ΡƒΠ΄Π°Π»ΡΠΉΡ‚Π΅ΡΡŒ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅

CSS автоматичСски вводится Π² с CDN ( Ρ‚ΠΈΠΏΠΏΠΈ-связка ). ΠŸΡ€ΠΈ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Π½ΠΎΠΌ CSP Π²Π°ΠΌ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΡ‚Ρ€Π΅Π±ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Π°Ρ ссылка dist / tippy.css ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ вмСсто Π½Π΅Π³ΠΎ dist / tippy.umd.min.js .

#Usage

 

Π’ΠΈΠΏΠΏΠΈ <сцСнарий> // ПослС Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Π²Ρ‹ΡˆΠ΅ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Ρ… скриптов Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ `tippy ()` с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS // сСлСктор ΠΈ ΠΎΠΏΠΎΡ€Π° `content`: Ρ‚ΠΈΠΏΠΏΠΈ ('# myButton', { content: 'Моя подсказка!', });

#React

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ React? Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΠ°ΠΊΠ΅Ρ‚ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ…ΠΎΡ€ΠΎΡˆΠΎ интСгрируСтся с React, Ρ‡Ρ‚ΠΎ позволяСт Π΄Π΅ΠΊΠ»Π°Ρ€Π°Ρ‚ΠΈΠ²Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Tippy.

ΠΠ΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΈΠΌΠΏΠΎΡ€Ρ‚

Для краткости Π² этой Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ ΠΏΠΎΠΊΠ°Π·Π°Π½ ΠΈΠΌΠΏΠΎΡ€Ρ‚ Ρ‡Π΅Ρ€Π΅Π· сборщик ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ Π² Node. Если Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ CDN, вмСсто этого Π²Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚Π΅Π³ΠΈ .

Π­Ρ‚ΠΎΡ‚ Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΈΠΌΠΏΠΎΡ€Ρ‚ Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ:

 

import 'tippy.js / animations / scale.css';

Π­ΠΊΠ²ΠΈΠ²Π°Π»Π΅Π½Ρ‚Π½ΠΎ этому с использованиСм CDN Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅:

 

<ссылка rel = "Ρ‚Π°Π±Π»ΠΈΡ†Π° стилСй" href = "https: // unpkg.com/tippy.js@6/animations/scale.css " />

ВсС Ρ€Π΅ΠΊΠ²ΠΈΠ·ΠΈΡ‚Ρ‹ | Tippy.js

All Props

Β«PropsΒ» — это настраиваСмыС свойства, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ Π² tippy () конструктор.

 

Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { // Ρ€Π΅ΠΊΠ²ΠΈΠ·ΠΈΡ‚Ρ‹ });


#allowHTML

ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚, Π°Π½Π°Π»ΠΈΠ·ΠΈΡ€ΡƒΡŽΡ‚ΡΡ Π»ΠΈ строки содСрТимого ΠΊΠ°ΠΊ HTML, Π° Π½Π΅ ΠΊΠ°ΠΊ тСкст.

ΠŸΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠ΅

Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΎΡ‡ΠΈΡ‰Π°Π΅Ρ‚Π΅ всС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ Π΄Π°Π½Π½Ρ‹Π΅ ΠΏΡ€ΠΈ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π΅ HTML для прСдотвращСния XSS Π°Ρ‚Π°ΠΊΠΈ.

 

Ρ‚ΠΈΠΏΠΏΡ‹ (Ρ†Π΅Π»ΠΈ, { // По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ allowHTML: false, // Ρ€Π°Π·Π±ΠΈΡ€Π°Π΅ΠΌ строки `content` ΠΊΠ°ΠΊ HTML allowHTML: true, });

allowHTML: trueallowHTML: false


#animateFill

ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚, Π½ΡƒΠΆΠ½ΠΎ Π»ΠΈ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ†Π²Π΅Ρ‚ Π·Π°Π»ΠΈΠ²ΠΊΠΈ Ρ„ΠΎΠ½Π° подсказки.

 

Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { // По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ animateFill: false, // Π²ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ animateFill: true, });

Плагин

ΠŸΡ€ΠΈ использовании ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ (ESM) Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ этот ΠΏΠ»Π°Π³ΠΈΠ½, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ.

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ dist / backdrop.css, ΠΈ / shift-away.css . Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй для Ρ€Π°Π±ΠΎΡ‚Ρ‹.

 

ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΈΠΏΠΏΠΈ, {animateFill} ΠΈΠ· 'tippy.js'; ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ 'tippy.js / dist / backdrop.css'; ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ 'tippy.js / animations / shift-away.css'; Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { animateFill: true, ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹: [animateFill], });

animateFill: trueanimateFill: false


#animation

Π’ΠΈΠΏ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π°.ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ см. Анимация.

 

Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { // По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ анимация: 'Π·Π°Ρ‚ΡƒΡ…Π°Π½ΠΈΠ΅', });

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅

Π­Ρ‚ΠΎ false ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΏΡ€ΠΈ использовании Headless Tippy.


#appendTo

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ подсказку. Если interactive: true , ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ — это appendTo: "parent" . Π‘ΠΌ. Π”ΠΎΡΡ‚ΡƒΠΏΠ½ΠΎΡΡ‚ΡŒ для Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ.

Иногда подсказку Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π² Π΄Ρ€ΡƒΠ³ΠΎΠΉ контСкст DOM ΠΈΠ·-Π·Π° ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с Π΄ΠΎΡΡ‚ΡƒΠΏΠ½ΠΎΡΡ‚ΡŒΡŽ, ΠΎΠ±Ρ€Π΅Π·ΠΊΠΎΠΉ ΠΈΠ»ΠΈ z-индСксом.

 

Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { // ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ (ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ ссылку Π² качСствС Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚Π°) appendTo: () => document.body, // добавляСм ΠΊ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠΌΡƒ ΡƒΠ·Π»Ρƒ ссылки appendTo: 'Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ', // добавляСм ΠΊ элСмСнту appendTo: element, });


#aria

ΠšΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΡ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° aria. Оба свойства ΡΠ²Π»ΡΡŽΡ‚ΡΡ Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ:

  • content : Атрибут aria- * , ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½Π½Ρ‹ΠΉ ΠΊ ссылочному элСмСнту для объявлСния ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠ΅ содСрТаниС.
  • Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½Ρ‹ΠΉ : Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Π»ΠΈ Π² ссылку Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ aria-extended элСмСнт.
 

Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { // По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ aria: { // `null` Π² ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΌ Ρ€Π΅ΠΆΠΈΠΌΠ΅: true, Π² ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС -" описано " content: 'Π°Π²Ρ‚ΠΎ', // совпадаСт с логичСским Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ `interactive` Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½: 'Π°Π²Ρ‚ΠΎ', }, // объявляСм ΠΊΠ°ΠΊ ΠΌΠ΅Ρ‚ΠΊΡƒ, Π° Π½Π΅ ΠΊΠ°ΠΊ описаниС // ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ Ρ‚Π°ΠΊΠΆΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ объявлСн с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ `interactive: true` aria: { content: 'labelledby', }, // ΡΠΎΠ±Π»ΡŽΠ΄Π°Ρ‚ΡŒ строгиС ΠΏΡ€Π°Π²ΠΈΠ»Π° WCAG 2.1 с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ `interactive: true`, Ρ‡Ρ‚ΠΎΠ±Ρ‹ // ΠΌΠΎΠΆΠ½ΠΎ Π»Π΅Ρ‚Π°Ρ‚ΡŒ, Ссли ΠΎΠ½ Π½Π° самом Π΄Π΅Π»Π΅ Π½Π΅ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π΅Π½, Π½ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ всС Ρ€Π°Π²Π½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ // объявлСно aria: { content: 'описано ΠΏΠΎ', }, // ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ, ΠΎΡΡ‚Π°Π²ΡŒΡ‚Π΅ Π½Π° вашС усмотрСниС aria: { содСрТаниС: Π½ΡƒΠ»ΡŒ, Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΎ: false, }, });


#arrow

ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚, Π΅ΡΡ‚ΡŒ Π»ΠΈ Π½Π° Ρ‚ΠΈΠΏΠΏΠΈ стрСлка.

 

Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { // По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ стрСлка: ΠΏΡ€Π°Π²Π΄Π°, // ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ стрСлку стрСлка: лоТь, // настраиваСмая строка стрСлки стрСлка: ' ... ', // настраиваСмый элСмСнт стрСлки стрСлка: svgElement, });

ΠŸΡ€Π΅Π΄ΡƒΠΏΡ€Π΅ΠΆΠ΄Π΅Π½ΠΈΠ΅

Π‘Ρ‚Ρ€ΠΎΠΊΠ° анализируСтся ΠΊΠ°ΠΊ .innerHTML . НС ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π² этот Ρ€Π΅ΠΊΠ²ΠΈΠ·ΠΈΡ‚ нСизвСстныС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠ΅ Π΄Π°Π½Π½Ρ‹Π΅.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΡ€ΡƒΠ³Π»ΡƒΡŽ стрСлку ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΡƒΠΉΡ‚Π΅ roundArrow ΠΈΠ· ΠΏΠ°ΠΊΠ΅Ρ‚Π° ( Ρ‚ΠΈΠΏΠΏΠΈ.roundArrow Π² вСрсии umd ) ΠΈ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ Π΅Π³ΠΎ Π² качСствС значСния.

Π’Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ dist / svg-arrow.css ΠΏΡ€ΠΈ использовании SVG-стрСлок для стилизации Π Π°Π±ΠΎΡ‚Π°.

 

ΠΈΠΌΠΏΠΎΡ€Ρ‚ Ρ‚ΠΈΠΏΠΏΠΈ, {roundArrow} ΠΈΠ· 'tippy.js'; ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ 'tippy.js / dist / svg-arrow.css'; Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { стрСлка: roundArrow, });

arrow: truearrow: false


#content

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅ подсказки.

 

Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { // По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ содСрТаниС: '', // Π½ΠΈΡ‚ΡŒ content: 'ΠŸΡ€ΠΈΠ²Π΅Ρ‚', // Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ содСрТаниС: Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚.createElement ('div'), // (ссылка) => строка | Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ content: (ссылка) => reference.getAttribute ('title'), });

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ строки ΠΊΠ°ΠΊ HTML, установитС allowHTML: true . Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Π²Π°ΠΌ XSS Π°Ρ‚Π°ΠΊ, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Π±ΡƒΠ΄ΡŒΡ‚Π΅ остороТны.


#delay

Π—Π°Π΄Π΅Ρ€ΠΆΠΊΠ° Π² мс послС срабатывания Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€Π½ΠΎΠ³ΠΎ события Π΄ΠΎ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Ρ‚ΠΈΠΏΠΏΠΈ отобразится ΠΈΠ»ΠΈ скроСтся.

 

Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { // По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠ°: 0, // ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΈ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ Π·Π°Π΄Π΅Ρ€ΠΆΠΊΡƒ 100 мс Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠ°: 100, // Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠ° ΠΏΠΎΠΊΠ°Π·Π° 100 мс, Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠ° скрытия 200 мс Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠ°: [100, 200], // Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠ° ΠΏΠΎΠΊΠ°Π·Π° составляСт 100 мс, Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠ° скрытия - ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠ°: [100, null], });

delay: 400delay: [500, 250]


#duration

ΠŸΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° Π² мс.

 

Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { // По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ: [300, 250], // ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΈ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ Π΄Π»ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ 100 мс ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ: 100, // Π΄Π»ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΏΠΎΠΊΠ°Π·Π° 100 мс, Π΄Π»ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ скрытия 200 мс ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ: [100, 200], // Π΄Π»ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΏΠΎΠΊΠ°Π·Π° 100 мс, Π΄Π»ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ скрытия - ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ: [100, null], });

duration: 1000duration: [500, 0]


#followCursor

ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚, слСдуСт Π»ΠΈ подсказка Π·Π° курсором ΠΌΡ‹ΡˆΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.

 

Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { // По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ followCursor: false, // слСдуСм ΠΏΠΎ осям x ΠΈ y followCursor: true, // слСдуСм ΠΏΠΎ оси x followCursor: 'horizontal', // слСдуСм ΠΏΠΎ оси y followCursor: 'vertical', // слСдуСм, ΠΏΠΎΠΊΠ° ΠΎΠ½ Π½Π΅ появится (с ΡƒΡ‡Π΅Ρ‚ΠΎΠΌ `delay`) followCursor: 'Π½Π°Ρ‡Π°Π»ΡŒΠ½Ρ‹ΠΉ', });

Плагин

ΠŸΡ€ΠΈ использовании ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ (ESM) Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ этот ΠΏΠ»Π°Π³ΠΈΠ½, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ.

 

import tippy, {followCursor} ΠΈΠ· 'tippy.js'; Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { followCursor: true, ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹: [followCursor], });

followCursor: truefollowCursor: «horizontal» followCursor: «initial»


#getReferenceClientRect

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π² качСствС ссылки позиционирования для tippy.

 

Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { // ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ (ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ссылка, пСрСданная Π² качСствС ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚Π°) getReferenceClientRect: Π½ΡƒΠ»ΡŒ, // функция, Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°ΡŽΡ‰Π°Ρ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ ClientRect getReferenceClientRect: () => ({ ΡˆΠΈΡ€ΠΈΠ½Π°: 100, высота: 100, ΠΎΡΡ‚Π°Π»ΠΎΡΡŒ: 100, справа: 200, Π²Π΅Ρ€Ρ…: 100, Π½ΠΈΠ·: 200, }), });


#hideOnClick

ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚, скрываСтся Π»ΠΈ подсказка ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° ссылку ΠΈΠ»ΠΈ Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ Ρ‚ΠΈΠΏΠΏΠΈ.ПовСдСниС ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π°Π²ΠΈΡΠ΅Ρ‚ΡŒ ΠΎΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… событий trigger .

 

Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { // По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ hideOnClick: ΠΏΡ€Π°Π²Π΄Π°, // Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΡΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒΡΡ ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ hideOnClick: лоТь, // скрытиС Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° ссылку, Π½ΠΎ Π½Π΅ Π·Π° Π΅Π΅ ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ hideOnClick: 'ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚Π΅Π»ΡŒ', });

hideOnClick: true с click :

Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€: Β«Π½Π°ΠΆΠΌΠΈΡ‚Π΅Β»

hideOnClick: «toggle» с click :

Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€: Β«Π½Π°ΠΆΠΌΠΈΡ‚Π΅Β»

hideOnClick: false с mouseenter (Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€ click Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ скроСтся):

trigger: «mouseenter»


#ignoreAttributes

ΠŸΡ€ΠΈ использовании Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ UI (ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ΠΎΠ²), Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ React, ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Π² этом Π½Π΅Ρ‚ нСобходимости. ΠΈ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ замСдляСт ΠΈΠ½ΠΈΡ†ΠΈΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΡŽ.

 

Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { // По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ignoreAttributes: false, // Π½Π΅ ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ data-tippy- * Π² ссылочном элСмСнтС ignoreAttributes: true, });


#inertia

ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚, примСняСтся Π»ΠΈ (настраиваСмая) пруТинная анимация CSS ΠΊ пСрСходная анимация.

ΠŸΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ ΠΏΠΎΠΊΠ°Π·Π° Π½Π° Π±ΠΎΠ»Π΅Π΅ высокоС Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ это выглядит Π»ΡƒΡ‡ΡˆΠ΅.

 

Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { // По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ инСрция: лоТь, // Π²ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ инСрция: ΠΏΡ€Π°Π²Π΄Π°, });

 

.tippy-box [инСрция Π΄Π°Π½Π½Ρ‹Ρ…] [data-state = 'visible'] { врСмСнная функция ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π°: кубичСская Π‘Π΅Π·ΡŒΠ΅ (...); }

анимация: Β«ΠΌΠ°ΡΡˆΡ‚Π°Π±Β»


#inlinePositioning

ΠžΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΠ²Π°Π΅Ρ‚ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½ΡƒΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ для элСмСнтов display: inline . Он Π²Ρ‹Π±Π΅Ρ€Π΅Ρ‚ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ подходящий ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ Π² зависимости ΠΎΡ‚ мСста размСщСния.

 

Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { // По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ inlinePositioning: false, // Π²ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ inlinePositioning: true, });

Плагин

ΠŸΡ€ΠΈ использовании ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ (ESM) Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ этот ΠΏΠ»Π°Π³ΠΈΠ½, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ.

 

ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΈΠΏΠΏΠΈ, {inlinePositioning} ΠΈΠ· 'tippy.js'; Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { inlinePositioning: true, ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹: [inlinePositioning], });


#interactive

ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚, Π΅ΡΡ‚ΡŒ Π»ΠΈ Π²Π½ΡƒΡ‚Ρ€ΠΈ подсказки ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ завис ΠΈ Ρ‰Π΅Π»ΠΊΠ½ΡƒΠ» Π²Π½ΡƒΡ‚Ρ€ΠΈ, Π½Π΅ ΡΠΊΡ€Ρ‹Π²Π°ΡΡΡŒ.

 

Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { // По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ: лоТь, // Π²ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΉ: ΠΏΡ€Π°Π²Π΄Π°, });

interactive: falseinteractive: true


#interactiveBorder

ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π½Π΅Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ Π²ΠΎΠΊΡ€ΡƒΠ³ Π½Π°ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΈΠΊΠ°, которая ΠΏΡ€Π΅Π΄ΠΎΡ‚Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ ΠΎΠ½ Π½Π΅ скрывался, Ссли курсор оставил Π΅Π³ΠΎ.

 

Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { // По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ InteractiveBorder: 2, // 30 пиксСлСй InteractiveBorder: 30, });

interactiveBorder: 5interactiveBorder: 30


#interactiveDebounce

ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ врСмя Π² мсСк для отклонСния ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° скрытия, ΠΊΠΎΠ³Π΄Π° курсор ΠΏΠΎΠΊΠΈΠ΄Π°Π΅Ρ‚ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ подсказки.

ΠŸΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ Π²Ρ€Π΅ΠΌΠ΅Π½Π½ΡƒΡŽ (Π° Π½Π΅ ΠΏΡ€ΠΎΡΡ‚Ρ€Π°Π½ΡΡ‚Π²Π΅Π½Π½ΡƒΡŽ) Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Ρƒ interactiveBorder , хотя Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ вмСстС с Π½ΠΈΠΌ.

 

Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { // По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ InteractiveDebounce: 0, // 75 мс InteractiveDebounce: 75, });

interactiveDebounce: 0interactiveDebounce: 75


#maxWidth

Π—Π°Π΄Π°Π΅Ρ‚ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡŒΠ½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ подсказки. ПолСзно, Ρ‡Ρ‚ΠΎΠ±Ρ‹ это Π½Π΅ Π±Ρ‹Π»ΠΎ слишком ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ для чтСния.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅

Π­Ρ‚ΠΎ примСняСтся ΠΊ .tippy-box (Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΉ элСмСнт), Π° Π½Π΅ ΠΊ ΠΊΠΎΡ€Π½ΡŽ позиционируСтся ΠΏΠΎΠΏΠΏΠ΅Ρ€-ΡƒΠ·Π΅Π».Основной CSS примСняСт max-width: calc (100vw - 10px) Π½Π° ΠΊΠΎΡ€Π½Π΅Π²ΠΎΠΌ ΡƒΠ·Π»Π΅ popper, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅Π΄ΠΎΡ‚Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ ΠΏΡ€Π΅Π²Ρ‹ΡˆΠ΅Π½ΠΈΠ΅ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ области просмотра Π½Π° малСнькиС экраны.

 

Ρ‚ΠΈΠΏΠΏΡ‹ (мишСни, { // По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ maxWidth: 350, // Π½Π΅Ρ‚ maxWidth maxWidth: 'Π½Π΅Ρ‚', });

maxWidth: «none» maxWidth: 200


#moveTransition

ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄, примСняСмый ΠΊ ΠΊΠΎΡ€Π½Π΅Π²ΠΎΠΌΡƒ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠΌΡƒ ΡƒΠ·Π»Ρƒ popper. Π­Ρ‚ΠΎΡ‚ описываСт ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΌΠ΅ΠΆΠ΄Ρƒ «Ρ…ΠΎΠ΄Π°ΠΌΠΈ» (ΠΈΠ»ΠΈ обновлСниями ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ) ΠΏΠΎΠΏΠΏΠ΅Ρ€Π° элСмСнт, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ e.Π³Ρ€Π°ΠΌΠΌ. ΠΏΠ΅Ρ€Π΅Π²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Π΅Ρ‚ ΠΈΠ»ΠΈ мСняСт Ρ†Π΅Π»Π΅Π²ΠΎΠ΅ мСстополоТСниС.

 

Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { // По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ moveTransition: '', // настраиваСмый ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ moveTransition: 'Π»Π΅Π³ΠΊΠΎΡΡ‚ΡŒ прСобразования 0,2 с', });


#offset смСщаСт Tippy ΠΎΡ‚ Π΅Π³ΠΎ ΠΎΠΏΠΎΡ€Π½ΠΎΠ³ΠΎ элСмСнта Π² пиксСлях (скольТСния ΠΈ расстояниС).

Π‘ΠΌ. Π”ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ ΠŸΠΎΠΏΠΏΠ΅Ρ€Π° для подробности.

 

Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { // ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ [занос, расстояниС] смСщСниС: [0, 10], });

смСщСниС: [20, 5] смСщСниС: [10, 20]


#onAfterUpdate

ВызываСтся послС обновлСния подсказки (Ρ‡Π΅Ρ€Π΅Π· .setProps () ).

 

Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { onAfterUpdate (instance, partialProps) { // ... }, });


#onBeforeUpdate

ВызываСтся ΠΏΠ΅Ρ€Π΅Π΄ ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅ΠΌ подсказки (Ρ‡Π΅Ρ€Π΅Π· .setProps () ).

 

Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { onBeforeUpdate (instance, partialProps) { // ... }, });


#onClickOutside

ВызываСтся, ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ Ρ‰Π΅Π»ΠΊΠ°Π΅Ρ‚ Π² любом мСстС Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ элСмСнта подсказки ΠΈΠ»ΠΈ ссылки.

 

Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { onClickOutside (instance, event) { // ... }, });


#onCreate

ВызываСтся послС создания подсказки.

 

Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { onCreate (instance) { // ... }, });


#onDestroy

ВызываСтся послС уничтоТСния Ρ‚ΠΈΠΏΠΏΠΈ.

 

Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { onDestroy (instance) { // ... }, });


#onHidden

ВызываСтся, ΠΊΠΎΠ³Π΄Π° tippy ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ скрыт ΠΈ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ ΠΎΡ‚ DOM.

 

Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { onHidden (instance) { // ... }, });


#onHide

ВызываСтся, ΠΊΠΎΠ³Π΄Π° Ρ‚ΠΈΠΏΠΏΠΈ Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚ ΡΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒΡΡ.

 

Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { onHide (instance) { // ... }, });

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ false ΠΈΠ· этого ΠΆΠΈΠ·Π½Π΅Π½Π½ΠΎΠ³ΠΎ Ρ†ΠΈΠΊΠ»Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ скрытиС Π½Π° основС Π½Π° условии.


#onMount

ВызываСтся послС монтирования tippy Π² DOM (ΠΈ popperInstance созданный).

 

Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { onMount (instance) { // ... }, });


#onShow

ВызываСтся, ΠΊΠΎΠ³Π΄Π° Ρ‚ΠΈΠΏΠΏΠΈ Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ.

 

Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { onShow (instance) { // ... }, });

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ false ΠΈΠ· этого ΠΆΠΈΠ·Π½Π΅Π½Π½ΠΎΠ³ΠΎ Ρ†ΠΈΠΊΠ»Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΏΠΎΠΊΠ°Π· Π½Π° основС Π½Π° условии.


#onShown

ВызываСтся послС ΠΏΠΎΠ»Π½ΠΎΠ³ΠΎ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° Ρ‚ΠΈΠΏΠΏΠΈ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ это достигаСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS transitionend , ΠΎΠ½ΠΎ зависит ΠΎΡ‚ вашСго собствСнного события ΡΠ»ΡƒΡˆΠ°Ρ‚Π΅Π»ΠΈ ΠΏΡ€ΠΈ использовании ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠΉ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ render . Π’Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ·Π²ΠΎΠ½ΠΈΡ‚ΡŒ Π² ΠΆΠΈΠ·Π½Π΅Π½Π½Ρ‹ΠΉ Ρ†ΠΈΠΊΠ» Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ Π² этом случаС.

 

Ρ‚ΠΈΠΏΠΏΡ‹ (мишСни, { onShown (instance) { // ... }, });


#onTrigger

ВызываСтся, ΠΊΠΎΠ³Π΄Π° tippy запускаСтся событиСм DOM (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, mouseenter ).

 

Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { onTrigger (экзСмпляр, событиС) { //... }, });


#onUntrigger

ВызываСтся, ΠΊΠΎΠ³Π΄Π° tippy Π½Π΅ запускаСтся событиСм DOM (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, mouseleave ).

 

Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { onUntrigger (экзСмпляр, событиС) { // ... }, });


#placement

ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Π΅Π» Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ Ρ‚ΠΈΠΏΠΏΠΈ. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ ΠŸΠΎΠΏΠΏΠ΅Ρ€Π° flip ΠΌΠΎΠΆΠ΅Ρ‚ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚Π΅ это ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΠΏΠΎΠ»ΠΎΠΆΠ½ΠΎΠ΅, Ссли Ρ‚Π°ΠΌ большС мСста.

 

Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { // По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅: 'Π²Π²Π΅Ρ€Ρ…Ρƒ', // ΠŸΠΎΠ»Π½Ρ‹ΠΉ список: Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅: 'top-start', Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅: 'Ρ‚ΠΎΠΏΠΎΠ²ΠΎΠ΅', Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅: 'справа', Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅: 'ΠΏΡ€Π°Π²Ρ‹ΠΉ старт', Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅: 'ΠΏΡ€Π°Π²ΠΎΠ΅', Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅: 'снизу', Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅: 'Π½Π°Ρ‡Π°Π»ΠΎ-снизу', Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅: 'Π½ΠΈΠΆΠ½ΠΈΠΉ ΠΊΠΎΠ½Π΅Ρ†', Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅: 'слСва', Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅: 'Π½Π°Ρ‡Π°Π»ΠΎ слСва', Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅: 'Π»Π΅Π²Ρ‹ΠΉ ΠΊΠΎΠ½Π΅Ρ†', // Π²Ρ‹Π±ΠΈΡ€Π°Π΅ΠΌ сторону с наибольшим пространством Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅: 'Π°Π²Ρ‚ΠΎ', Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅: 'автозапуск', Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅: 'auto-end', });


#plugins

ΠŸΠ»Π°Π³ΠΈΠ½Ρ‹ для использования.ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ см. ΠŸΠ»Π°Π³ΠΈΠ½Ρ‹.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅

ΠŸΡ€ΠΈ использовании tippy.setDefaultProps () , ΡƒΠΊΠ°Π·Π°Π½ΠΈΠ΅ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹Ρ… ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½Π΅Π½Ρ‹ с ΠΏΠ»Π°Π³ΠΈΠ½Π°ΠΌΠΈ, ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΌΠΈ Π² конструкторС tippy () Π·Π²ΠΎΠ½ΠΊΠΈ.

 

Ρ‚ΠΈΠΏΠΏΡ‹ (Ρ†Π΅Π»ΠΈ, { // По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹: [], });


#popperOptions

Π—Π°Π΄Π°Π΅Ρ‚ настраиваСмыС ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Popper. Π­Ρ‚ΠΎ Π΄Π°Π΅Ρ‚ Π²Π°ΠΌ ΠΏΠΎΠ»Π½Ρ‹ΠΉ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ Π½Π°Π΄ Ρ‚ΠΈΠΏΠΏΠΈ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅. ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΡΡ‚ΠΈ см. Π’ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ ΠŸΠΎΠΏΠΏΠ΅Ρ€Π°.

 

Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { // По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ popperOptions: {}, // ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ popperOptions: { стратСгия: 'фиксированная', ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹: [ { имя: 'ΠΏΠ΅Ρ€Π΅Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ', ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹: { fallbackPlacements: ['снизу', 'справа'], }, }, { name: 'preventOverflow', ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹: { altAxis: ΠΏΡ€Π°Π²Π΄Π°, ΠΏΡ€ΠΈΠ²ΡΠ·ΡŒ: лоТь, }, }, ], }, });


#render

Π—Π°Π΄Π°Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡƒΡŽ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΡƒΡŽ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³Π°.Π­Ρ‚ΠΎ позволяСт Π²Π°ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ свои собствСнныС Ρ‚ΠΈΠΏΠΈΡ‡Π½Ρ‹ΠΉ элСмСнт DOM с нуля. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ всС Ρ€Π΅ΠΊΠ²ΠΈΠ·ΠΈΡ‚Ρ‹, относящиСся ΠΊ Ρ€Π΅Π½Π΄Π΅Ρ€Ρƒ (R), ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ контролируСтся Π²Π°ΠΌΠΈ ΠΏΡ€ΠΈ ΡƒΠΊΠ°Π·Π°Π½ΠΈΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠΉ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ.

ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ см. Π’ΠΈΠΏΠΏΠΈ Π±Π΅Π· Π³ΠΎΠ»ΠΎΠ²Ρ‹.


#role

Π—Π°Π΄Π°Π΅Ρ‚ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ role для элСмСнта tippy.

 

Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { // По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Ρ€ΠΎΠ»ΡŒ: 'Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка', });


#showOnCreate

ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚, отобраТаСтся Π»ΠΈ подсказка послС Π΅Π΅ создания, с ΡƒΡ‡Π΅Ρ‚ΠΎΠΌ Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΈ .

 

Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { // По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ showOnCreate: лоТь, // Π²ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ showOnCreate: ΠΏΡ€Π°Π²Π΄Π°, });


#sticky опрСдСляСт, являСтся Π»ΠΈ Tippy ΠΏΡ€ΠΈΠ»ΠΈΠΏΠ°Π΅Ρ‚ ΠΊ ΠΎΠΏΠΎΡ€Π½ΠΎΠΌΡƒ элСмСнту Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ ΠΎΠ½ установлСн. ΠžΠ±Ρ‹Ρ‡Π½ΠΎ это , Π° Π½Π΅ , Π½ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎ, Ссли позиция ссылочного элСмСнта являСтся Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΌ, ΠΈΠ»ΠΈ для автоматичСского обновлСния Ρ‚ΠΈΠΏΠΈΡ‡Π½ΠΎΠΉ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ Π±Π΅Π· нСобходимости Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ сдСлайтС это Π² ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹Ρ… случаях, ΠΊΠΎΠ³Π΄Π° ΠΌΠ°ΠΊΠ΅Ρ‚ DOM измСняСтся.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅

Π­Ρ‚ΠΎ сниТаСт ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡŽΡ‚ΡΡ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΊΠ°Π΄Ρ€Π° Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ.Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ это Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€ΠΈ нСобходимости!

 

Ρ‚ΠΈΠΏΠΏΡ‹ (мишСни, { // По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Π»ΠΈΠΏΠΊΠΈΠΉ: лоТь, // Π²ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ Π»ΠΈΠΏΠΊΠΈΠΉ: ΠΏΡ€Π°Π²Π΄Π°, // провСряСм Ρ‚ΠΎΠ»ΡŒΠΊΠΎ "эталонный" ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ Π½Π° Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π»ΠΈΠΏΠΊΠΈΠΉ: 'ссылка', // провСряСм Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ "popper" Π½Π° ΠΏΡ€Π΅Π΄ΠΌΠ΅Ρ‚ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π»ΠΈΠΏΠΊΠΈΠΉ: 'ΠΏΠΎΠΏΠΏΠ΅Ρ€', });

Плагин

ΠŸΡ€ΠΈ использовании ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ (ESM) Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ этот ΠΏΠ»Π°Π³ΠΈΠ½, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ.

 

ΠΈΠΌΠΏΠΎΡ€Ρ‚ Ρ‚ΠΈΠΏΠΏΠΈ, {Π»ΠΈΠΏΠΊΠΈΠΉ} ΠΈΠ· 'tippy.js'; Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { Π»ΠΈΠΏΠΊΠΈΠΉ: ΠΏΡ€Π°Π²Π΄Π°, ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹: [Π»ΠΈΠΏΠΊΠΈΠΉ], });


#theme

ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ Ρ‚Π΅ΠΌΡƒ Ρ‚ΠΈΠΏΠΈΡ‡Π½ΠΎΠ³ΠΎ элСмСнта.Основной CSS ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ — Ρ‚Π΅ΠΌΠ½Ρ‹ΠΉ # 333 Ρ‚Π΅ΠΌΠ°. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ настраиваСмой Ρ‚Π΅ΠΌΡ‹. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Ρ‚Π΅ΠΌΡ‹ для подробностСй.

 

Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { // По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Ρ‚Π΅ΠΌΠ°: '', // настраиваСмая Ρ‚Π΅ΠΌΠ° Ρ‚Π΅ΠΌΠ°: 'ΠΏΠΎΠΌΠΈΠ΄ΠΎΡ€', });


#touch

ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ сСнсорных устройств.

 

Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { // По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ прикосновСниС: ΠΏΡ€Π°Π²Π΄Π°, // ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ tippy ΠΎΡ‚ ΠΏΠΎΠΊΠ°Π·Π° Π½Π° сСнсорных устройствах прикосновСниС: лоТь, // трСбуСтся Π½Π°ΠΆΠ°Ρ‚ΡŒ ΠΈ ΡƒΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ экран, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ Π΅Π³ΠΎ касаниС: "ΡƒΠ΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ", // Ρ‚ΠΎ ΠΆΠ΅, Ρ‡Ρ‚ΠΎ ΠΈ Π²Ρ‹ΡˆΠ΅, Π½ΠΎ ΠΏΡ€ΠΈ Π΄ΠΎΠ»Π³ΠΎΠΌ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ касаниС: ['hold', 500], });


#trigger

ΠžΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚ события, ΠΏΡ€ΠΈ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… отобраТаСтся подсказка.Названия Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… событий Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π½Ρ‹Π΅ ΠΏΡ€ΠΎΠ±Π΅Π»Π°ΠΌΠΈ.

 

Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { // По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€: 'mouseenter focus', // Π΄Ρ€ΡƒΠ³ΠΈΠ΅: Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€: 'Ρ‰Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ', Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€: 'focusin', Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€: 'mouseenter click', // Π·Π°ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎ Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€: 'Ρ€ΡƒΡ‡Π½ΠΎΠΉ', });


#triggerTarget

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ (Ρ‹), ΠΊ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ΡΡ ΠΏΡ€ΠΎΡΠ»ΡƒΡˆΠΈΠ²Π°Ρ‚Π΅Π»ΠΈ событий Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€Π°. ΠŸΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ‚ Π²Π°ΠΌ ΠΎΡ‚Π΄Π΅Π»ΠΈΡ‚Π΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Ρ‚ΠΈΠΏΠΏΠΈ ΠΎΡ‚ источника срабатывания.

 

Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { // ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ (ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ссылка) triggerTarget: Π½ΡƒΠ»ΡŒ, // Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ triggerTarget: someElement, // Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ [] triggerTarget: [someElement1, someElement2], });


#zIndex

Π—Π°Π΄Π°Π΅Ρ‚ z-index CSS Π½Π° ΠΊΠΎΡ€Π½Π΅Π²ΠΎΠΌ ΡƒΠ·Π»Π΅ popper.

 

Ρ‚ΠΈΠΏΠΏΠΈ (Ρ†Π΅Π»ΠΈ, { // По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ zIndex: 9999, });

ΠšΠΎΠ½ΡΡ‚Ρ€ΡƒΠΊΡ‚ΠΎΡ€ | Tippy.js

ΠšΠΎΠ½ΡΡ‚Ρ€ΡƒΠΊΡ‚ΠΎΡ€

ΠšΠΎΠ½ΡΡ‚Ρ€ΡƒΠΊΡ‚ΠΎΡ€ tippy () (простая функция) создаСт ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ экзСмпляры tippy. Π£ вас Π΅ΡΡ‚ΡŒ Π΄Π²Π° Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° прСдоставлСния Ρ‚ΠΈΠΏΠΈΡ‡Π½ΠΎΠ³ΠΎ содСрТания:

#Attribute

Π‘ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ элСмСнтами Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅:

 

Π’Ρ‹Π·ΠΎΠ² конструктора tippy () с ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌ ΠΈΠΌ сСлСктором CSS:

 

tippy ('[data-tippy-content ] ');

#Prop

ΠŸΡ€ΠΈ Ρ‚Π°Ρ€Π³Π΅Ρ‚ΠΈΠ½Π³Π΅ Π½Π° ΠΎΠ΄ΠΈΠ½ элСмСнт ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠΏΠΎΡ€Ρƒ content вмСсто Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚:

 

tippy ('# singleElement', { content: 'Подсказка', });

Tippy Π±ΡƒΠ΄Π΅Ρ‚ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки для элСмСнтов, Π΄Π°ΠΆΠ΅ Ссли Π²Ρ‹ Π·Π°Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΈΠΌ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ создаСт ΡΡ‚Ρ€Π°Π½Π½ΡƒΡŽ Ρ„ΠΎΡ€ΠΌΡƒ Π±Π΅Π· содСрТимого, поэтому ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ ваш сСлСктор CSS достаточно ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π³Π°Ρ€Π°Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… содСрТаниС.

# Π’ΠΈΠΏΡ‹ Ρ†Π΅Π»Π΅ΠΉ

ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ ΠΏΠ΅Ρ€Π΅Π΄Π°Π΅Ρ‚Π΅ Π² tippy () , — это Ρ†Π΅Π»ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π·Π°Π΄Π°Ρ‚ΡŒ. Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки ΠΊ. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΈΠ»ΠΈ нСсколько Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… элСмСнтов.

 

// Π‘Ρ‚Ρ€ΠΎΠΊΠ° (элСмСнты сСлСктора CSS Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅) Ρ‚ΠΈΠΏΠΏΠΈ ('# id'); Ρ‚ΠΈΠΏΠΏΠΈ ('. класс'); Ρ‚ΠΈΠΏΠΏΠΈ ('[содСрТимоС-Ρ‚ΠΈΠΏΠΏΠΈ-Π΄Π°Π½Π½Ρ‹Ρ…]'); // Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ Ρ‚ΠΈΠΏΠΏΠΈ (document.getElementById ('ΠΌΠΎΠΉ-элСмСнт')); // Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ [] Ρ‚ΠΈΠΏΠΏΠΈ ([элСмСнт1, элСмСнт2, элСмСнт3]); // NodeList Ρ‚ΠΈΠΏΠΏΠΈ (document.querySelectorAll ('. my-elements'));

#Disabled elements

Если элСмСнт ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ элСмСнт-ΠΎΠ±ΠΎΠ»ΠΎΡ‡ΠΊΡƒ ( ΠΈΠ»ΠΈ

), Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ‚ΠΈΠΏΠΏΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Π».Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ с ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Π½Ρ‹ΠΌ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ Π½Π΅ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΡΡ„ΠΎΠΊΡƒΡΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ, навСсти ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ ΠΈΠ»ΠΈ Ρ‰Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ ΠΈΡ…, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ Ρ‚ΠΈΠΏΠΈΡ‡Π½Ρ‹ΠΉ.

 

Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ -> <ΠΊΠ½ΠΎΠΏΠΊΠ° ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Π°> ВСкст

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ это связано с ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°ΠΌΠΈ доступности, ΠΈ этого слСдуСт ΠΈΠ·Π±Π΅Π³Π°Ρ‚ΡŒ, Ссли Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹ΠΉ.

ΠœΠ΅Ρ‚ΠΎΠ΄Ρ‹ | Tippy.js

ΠœΠ΅Ρ‚ΠΎΠ΄Ρ‹

#Instance methods

ΠœΠ΅Ρ‚ΠΎΠ΄Ρ‹ Π² экзСмплярах ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎ ΡƒΠΏΡ€Π°Π²Π»ΡΡ‚ΡŒ Ρ‚ΠΈΠΏΠ°ΠΌΠΈ. Π£Π²ΠΈΠ΄Π΅Ρ‚ΡŒ Π‘Ρ‚Ρ€Π°Π½ΠΈΡ†Π° Tippy Instance для получСния ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎ доступС ΠΊ экзСмпляру.

#show

ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ подсказку Π² любоС врСмя:

 

instance.show ();

#hide

ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ подсказку Π² любоС врСмя:

 

instance.hide ();

#hideWithInteractivity

Доступно с v6.2.0

Π‘ΡƒΠ΄Π΅Ρ‚ ΡΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ подсказку, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ссли курсор находится Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Π°ΠΌΠΈ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΉ подсказки. ΠΎΠ±Π»Π°ΡΡ‚ΡŒ, ΠΊΡ€Π°ΠΉ. Π­Ρ‚ΠΎ позволяСт ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒΡΡ ΠΊ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΌΡƒ повСдСнию . ΠΏΡ€ΠΈ событии mouseleave ΠΏΡ€ΠΈ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ настраиваСмых ΠΏΡ€ΠΎΡΠ»ΡƒΡˆΠΈΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ событий.

 

// ВрСбуСтся: ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ события ΠΌΡ‹ΡˆΠΈ ΠΈΠ· вашСго ΠΏΡ€ΠΎΡΠ»ΡƒΡˆΠΈΠ²Π°Ρ‚Π΅Π»Ρ событий instance.hideWithInteractivity (mouseEvent);

#disable

Π’Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ Π·Π°ΠΏΡ€Π΅Ρ‚ΠΈΡ‚ΡŒ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ скрытиС Ρ‚ΠΈΠΏΠΏΠ°:

 

instance.Π·Π°ΠΏΡ€Π΅Ρ‰Π°Ρ‚ΡŒ();

#enable

ΠŸΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ подсказку:

 

instance.enable ();

#setProps

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π»ΡŽΠ±ΡƒΡŽ ΠΎΠΏΠΎΡ€Ρƒ послС создания экзСмпляра. ΠŸΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ Π½ΠΎΠ²Ρ‹Π΅ Ρ€Π΅ΠΊΠ²ΠΈΠ·ΠΈΡ‚Ρ‹ Π²:

 

instance.setProps ({ стрСлка: ΠΏΡ€Π°Π²Π΄Π°, анимация: 'ΠΌΠ°ΡΡˆΡ‚Π°Π±', });

#setContent

ОбновлСниС содСрТимого Π’ ΠΎΠΏΠΎΡ€Π΅ Π΅ΡΡ‚ΡŒ собствСнный ΠΌΠ΅Ρ‚ΠΎΠ΄ Π² Π²ΠΈΠ΄Π΅ ярлыка:

 

instance.setContent ('Новый ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚');

#unmount

Π Π°Π·ΠΌΠΎΠ½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ tippy ΠΈΠ· DOM:

 

instance.unmount ();

Π­Ρ‚ΠΎ позволяСт ΠΈΠ½Ρ‚Π΅Π³Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ вСсСннСй Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π² качСствС Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Ρ‹ CSS. НапримСр, Π²Ρ‹ Π±Ρ‹ Π½Π°Π·Π²Π°Π»ΠΈ это Π² ΠΈΡ… onComplete () (ΠΈΠ»ΠΈ эквивалСнтном) ΠŸΠ΅Ρ€Π΅Π·Π²ΠΎΠ½ΠΈΡ‚Π΅.

#clearDelayTimeouts

ΠžΡ‡ΠΈΡ‰Π°Π΅Ρ‚ Ρ‚Π°ΠΉΠΌΠ°ΡƒΡ‚Ρ‹ Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠΈ экзСмпляра. Π‘ΠΊΠΎΡ€Π΅Π΅ всСго, Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‡Π΅Π½ΡŒ Ρ€Π΅Π΄ΠΊΠΎΠ΅ использованиС Ρ‡Π΅Ρ…Π»Ρ‹ для этого.

 

instance.clearDelayTimeouts ();

#destroy

Π§Ρ‚ΠΎΠ±Ρ‹ ΠΎΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠ½ΠΈΡ‡Ρ‚ΠΎΠΆΠΈΡ‚ΡŒ ΠΈ ΠΎΡ‡ΠΈΡΡ‚ΠΈΡ‚ΡŒ экзСмпляр, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΌΠ΅Ρ‚ΠΎΠ΄:

 

instance.destroy ();

Бвойство _tippy удаляСтся ΠΈΠ· ссылочного элСмСнта ΠΏΡ€ΠΈ ΡƒΠ½ΠΈΡ‡Ρ‚ΠΎΠΆΠ΅Π½ΠΈΠΈ.

# БтатичСскиС ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹

БтатичСскиС ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ относятся ΠΊ ΠΌΠΎΠ΄ΡƒΠ»ΡŽ tippy для глобального повСдСния.

#setDefaultProps

УстановитС свойства ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Π½ΠΎΠ²ΠΎΠ³ΠΎ экзСмпляра:

 

tippy.setDefaultProps ({ // Π Π΅ΠΊΠ²ΠΈΠ·ΠΈΡ‚ }); // Доступ ΠΊ Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΠΌ свойствам ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ tippy.defaultProps;

#hideAll

Π‘ΠΊΡ€Ρ‹Ρ‚ΡŒ всС Π²ΠΈΠ΄ΠΈΠΌΡ‹Π΅ подсказки Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅:

 

import {hideAll} from 'tippy.js'; // Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ ΡΠΎΠ±ΡΡ‚Π²Π΅Π½Π½ΡƒΡŽ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Ρ‚ΠΈΠΏΠΏΠΈ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ всС(); // Π‘ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΈΡ… всС ΠΌΠ³Π½ΠΎΠ²Π΅Π½Π½ΠΎ hideAll ({ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ: 0}); // Π‘ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΈΡ… всС, ΠΊΡ€ΠΎΠΌΠ΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ hideAll ({exclude: tippyInstance}); hideAll ({exclude: referenceElement});

Π’ вСрсии CDN ( umd ) ΠΎΠ½ доступСн ΠΊΠ°ΠΊ Ρ‚ΠΈΠΏΠΏΠΈ.Π‘ΠΊΡ€Ρ‹Ρ‚ΡŒ всС () .

Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки Β· Bootstrap

ДокумСнтация ΠΈ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ для добавлСния ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΡ… Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… подсказок Bootstrap с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS ΠΈ JavaScript с использованиСм CSS3 для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² Π΄Π°Π½Π½Ρ‹Ρ… для локального Ρ…Ρ€Π°Π½ΠΈΠ»ΠΈΡ‰Π° Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠ².

ΠžΠ±Π·ΠΎΡ€

Π§Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ Π·Π½Π°Ρ‚ΡŒ ΠΏΡ€ΠΈ использовании ΠΏΠ»Π°Π³ΠΈΠ½Π° Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки:

  • Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки ΠΏΠΎΠ»Π°Π³Π°ΡŽΡ‚ΡΡ Π½Π° ΡΡ‚ΠΎΡ€ΠΎΠ½Π½ΡŽΡŽ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ Popper.js для позиционирования. Π’Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ popper.min.js ΠΏΠ΅Ρ€Π΅Π΄ bootstrap.js ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ bootstrap.bundle.min.js / bootstrap.bundle.js , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ содСрТит Popper.js, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки Ρ€Π°Π±ΠΎΡ‚Π°Π»ΠΈ!
  • Если Π²Ρ‹ собираСтС наш JavaScript ΠΈΠ· исходного ΠΊΠΎΠ΄Π°, Π΅ΠΌΡƒ трСбуСтся util.js .
  • Подсказки
  • ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ ΠΏΠΎ сообраТСниям ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ, поэтому Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΈΠ½ΠΈΡ†ΠΈΠ°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ .
  • Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки с Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌΠΈ Π½ΡƒΠ»Π΅Π²ΠΎΠΉ Π΄Π»ΠΈΠ½Ρ‹ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ.
  • Π£ΠΊΠ°ΠΆΠΈΡ‚Π΅ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ : 'body' , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ с Ρ€Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³ΠΎΠΌ Π² Π±ΠΎΠ»Π΅Π΅ слоТных ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°Ρ… (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π² Π½Π°ΡˆΠΈΡ… Π³Ρ€ΡƒΠΏΠΏΠ°Ρ… Π²Π²ΠΎΠ΄Π°, Π³Ρ€ΡƒΠΏΠΏΠ°Ρ… ΠΊΠ½ΠΎΠΏΠΎΠΊ ΠΈ Ρ‚. Π”.).
  • Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки для скрытых элСмСнтов Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚.
  • Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки для элСмСнтов .disabled ΠΈΠ»ΠΈ disabled Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π·Π°ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒΡΡ для элСмСнта ΠΎΠ±ΠΎΠ»ΠΎΡ‡ΠΊΠΈ.
  • ΠŸΡ€ΠΈ запускС ΠΈΠ· гипСрссылок, ΠΎΡ…Π²Π°Ρ‚Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… нСсколько строк, Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки Π±ΡƒΠ΄ΡƒΡ‚ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ white-space: nowrap; Π½Π° вашСм s, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΎΠ³ΠΎ повСдСния.
  • Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ скрыты Π΄ΠΎ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ ΠΈΠΌ элСмСнты Π±ΡƒΠ΄ΡƒΡ‚ ΡƒΠ΄Π°Π»Π΅Π½Ρ‹ ΠΈΠ· ΠΌΠΎΠ΄Π΅Π»ΠΈ DOM.

Поняли? ΠžΡ‚Π»ΠΈΡ‡Π½ΠΎ, Π΄Π°Π²Π°ΠΉΡ‚Π΅ посмотрим, ΠΊΠ°ΠΊ ΠΎΠ½ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚, Π½Π° Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ….

Один ΠΈΠ· способов ΠΈΠ½ΠΈΡ†ΠΈΠ°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ всС Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки Π½Π° страницС — Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΈΡ… ΠΏΠΎ ΠΈΡ… Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρƒ data-toggle :

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

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹

НавСдитС ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ Π½Π° ссылки Π½ΠΈΠΆΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ подсказки:

НавСдитС ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½ΠΈΠΆΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ направлСния подсказок: Π²Π²Π΅Ρ€Ρ…, Π²ΠΏΡ€Π°Π²ΠΎ, Π²Π½ΠΈΠ·Ρƒ ΠΈ Π²Π»Π΅Π²ΠΎ.

  


  

И с Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ собствСнного HTML:

    

ИспользованиС

Плагин Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… подсказок Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ ΠΏΠΎ запросу ΠΈ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΏΠΎΠΌΠ΅Ρ‰Π°Π΅Ρ‚ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки послС ΠΈΡ… Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€Π½ΠΎΠ³ΠΎ элСмСнта.

Запуск Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки Ρ‡Π΅Ρ€Π΅Π· JavaScript:

  $ ('# example'). Tooltip (options)  

Π Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ°

ВрСбуСмая Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° для Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки — это Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Π΄Π°Π½Π½Ρ‹Ρ…, ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ , элСмСнта HTML, для ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΠΌΠ΅Ρ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку. БгСнСрированная Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки довольно проста, хотя для Π½Π΅Π΅ трСбуСтся позиция (ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠΌ установлСно Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ top ).

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… подсказок для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ ΠΈ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ

Π’Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊ элСмСнтам HTML, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ‚Ρ€Π°Π΄ΠΈΡ†ΠΈΠΎΠ½Π½ΠΎ ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹ Π½Π° ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρƒ ΠΈ ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ссылки ΠΈΠ»ΠΈ элСмСнты управлСния Ρ„ΠΎΡ€ΠΌΡ‹).Π₯отя ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½Ρ‹Π΅ элСмСнты HTML (Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ s) ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ доступными для фокусировки, Π΄ΠΎΠ±Π°Π²ΠΈΠ² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ tabindex = "0" , это Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ Ρ€Π°Π·Π΄Ρ€Π°ΠΆΠ°ΡŽΡ‰ΠΈΠ΅ ΠΈ ΡΠ±ΠΈΠ²Π°ΡŽΡ‰ΠΈΠ΅ с Ρ‚ΠΎΠ»ΠΊΡƒ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ табуляции Π½Π° Π½Π΅ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹Ρ… элСмСнтах для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ Π² настоящСС врСмя Π½Π΅ выводят Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку Π² этой ситуации.

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π½Π΅ ΠΏΠΎΠ»Π°Π³Π°ΠΉΡ‚Π΅ΡΡŒ ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π° hover Π² качСствС Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€Π° для Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ это сдСлаСт Π½Π΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½Ρ‹ΠΌ запуск Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… подсказок для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹.

  
 НавСдитС ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ Π½Π° мСня 


ВСкст Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки!

ΠžΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Π½Ρ‹Π΅ элСмСнты

Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Ρ‹ с Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ disabled Π½Π΅ ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΡΡ„ΠΎΠΊΡƒΡΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ, навСсти Π½Π° Π½ΠΈΡ… курсор ΠΈΠ»ΠΈ Ρ‰Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ ΠΈΡ…, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку (ΠΈΠ»ΠΈ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ).Π’ качСствС ΠΎΠ±Ρ…ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΡƒΡ‚ΠΈ Π²Ρ‹ Π·Π°Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку ΠΈΠ· ΠΎΠ±ΠΎΠ»ΠΎΡ‡ΠΊΠΈ

ΠΈΠ»ΠΈ , Π² ΠΈΠ΄Π΅Π°Π»Π΅ сдСланной с фокусировкой Π½Π° ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Π΅, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ tabindex = "0" , ΠΈ ΠΏΠ΅Ρ€Π΅ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ события указатСля Π½Π° ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Π½Ρ‹ΠΉ элСмСнт.

ΠžΠΏΡ†ΠΈΠΈ

ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Ρ‚ΡŒ Ρ‡Π΅Ρ€Π΅Π· Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ Π΄Π°Π½Π½Ρ‹Ρ… ΠΈΠ»ΠΈ JavaScript. Для Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² Π΄Π°Π½Π½Ρ‹Ρ… Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ имя ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° ΠΊ data- , ΠΊΠ°ΠΊ Π² data-animation = "" .

НомСр НомСр
Имя Π’ΠΈΠΏ По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ОписаниС
анимация логичСский ΠΏΡ€Π°Π²Π΄Π° ΠŸΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ CSS fade ΠΊ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказкС
ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ строка | элСмСнт | лоТь лоТь

ДобавляСт Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку ΠΊ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌΡƒ элСмСнту.ΠŸΡ€ΠΈΠΌΠ΅Ρ€: ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€: 'body' . Π­Ρ‚ΠΎΡ‚ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ особСнно ΠΏΠΎΠ»Π΅Π·Π΅Π½ Ρ‚Π΅ΠΌ, Ρ‡Ρ‚ΠΎ позволяСт Π²Π°ΠΌ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку Π² ΠΏΠΎΡ‚ΠΎΠΊΠ΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° рядом с элСмСнтом запуска, Ρ‡Ρ‚ΠΎ ΠΏΡ€Π΅Π΄ΠΎΡ‚Π²Ρ€Π°Ρ‚ΠΈΡ‚ ΠΎΡ‚Ρ€Ρ‹Π² Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки ΠΎΡ‚ элСмСнта запуска Π²ΠΎ врСмя измСнСния Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΎΠΊΠ½Π°.

Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠ° | ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ 0

Π—Π°Π΄Π΅Ρ€ΠΆΠΊΠ° ΠΏΠΎΠΊΠ°Π·Π° ΠΈ скрытия Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки (мс) — Π½Π΅ относится ΠΊ Ρ€ΡƒΡ‡Π½ΠΎΠΌΡƒ Ρ‚ΠΈΠΏΡƒ запуска

Если ΡƒΠΊΠ°Π·Π°Π½ Π½ΠΎΠΌΠ΅Ρ€, Π·Π°Π΄Π΅Ρ€ΠΆΠΊΠ° примСняСтся ΠΊ ΡΠΊΡ€Ρ‹Ρ‚ΠΈΡŽ / ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ

Π‘Ρ‚Ρ€ΡƒΠΊΡ‚ΡƒΡ€Π° ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°: delay: {"show": 500, "hide": 100}

HTML логичСский лоТь

Π Π°Π·Ρ€Π΅ΡˆΠΈΡ‚ΡŒ HTML Π²ΠΎ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказкС.

Если true, HTML-Ρ‚Π΅Π³ΠΈ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π²ΠΎ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказкС. Если false, ΠΌΠ΅Ρ‚ΠΎΠ΄ jQuery text Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ для вставки содСрТимого Π² DOM.

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ тСкст, Ссли вас бСспокоят XSS-Π°Ρ‚Π°ΠΊΠΈ.

Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ строка | функция Π²Π΅Ρ€Ρ…

Как Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку — Π°Π²Ρ‚ΠΎ | Π½Π°Π²Π΅Ρ€Ρ… | Π²Π½ΠΈΠ·Ρƒ | слСва | Π²Π΅Ρ€Π½ΠΎ.
Если ΡƒΠΊΠ°Π·Π°Π½ΠΎ auto , Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка Π±ΡƒΠ΄Π΅Ρ‚ динамичСски ΠΏΠ΅Ρ€Π΅ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π°.

Когда функция ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для опрСдСлСния размСщСния, ΠΎΠ½Π° вызываСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΡƒΠ·Π»Π° DOM Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки Π² качСствС ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚Π° ΠΈ ΡƒΠ·Π»Π° DOM ΠΈΠ½ΠΈΡ†ΠΈΠΈΡ€ΡƒΡŽΡ‰Π΅Π³ΠΎ элСмСнта Π² качСствС Π²Ρ‚ΠΎΡ€ΠΎΠ³ΠΎ. ΠšΠΎΠ½Ρ‚Π΅ΠΊΡΡ‚ , этот установлСн для экзСмпляра Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки.

сСлСктор строка | лоТь лоТь Если прСдусмотрСн сСлСктор, ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки Π±ΡƒΠ΄ΡƒΡ‚ Π΄Π΅Π»Π΅Π³ΠΈΡ€ΠΎΠ²Π°Π½Ρ‹ ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΌ цСлям. На ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅ это ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… ΠΎΠΊΠΎΠ½ динамичСского HTML-содСрТимого.Π‘ΠΌ. Π­Ρ‚ΠΎΡ‚ ΠΈ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€.
шаблон строка '
'

Π‘Π°Π·ΠΎΠ²Ρ‹ΠΉ HTML-ΠΊΠΎΠ΄ для использования ΠΏΡ€ΠΈ создании Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки.

Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки Π±ΡƒΠ΄Π΅Ρ‚ вставлСн Π² .tooltip-inner .

.arrow станСт стрСлкой Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки.

Π‘Π°ΠΌΡ‹ΠΉ внСшний элСмСнт ΠΎΠ±ΠΎΠ»ΠΎΡ‡ΠΊΠΈ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅Ρ‚ΡŒ .tooltip class ΠΈ role = "tooltip" .

Π½Π°Π·Π²Π°Π½ΠΈΠ΅ строка | элСмСнт | функция »

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, Ссли Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ отсутствуСт.

Если функция Π·Π°Π΄Π°Π½Π°, ΠΎΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π·Ρ‹Π²Π°Ρ‚ΡŒΡΡ со своСй ссылкой this , установлСнной Π½Π° элСмСнт, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠ»Π΅Π½Π° Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка.

Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€ строка ‘парящий фокус’

Как запускаСтся Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка — Ρ‰Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ | Π·Π°Π²ΠΈΡΠ°Ρ‚ΡŒ | фокус | руководство ΠΏΠΎ эксплуатации.Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ нСсколько Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€ΠΎΠ²; Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅ ΠΈΡ… ΠΏΡ€ΠΎΠ±Π΅Π»ΠΎΠΌ.

'manual' ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒΡΡ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² .tooltip ('show') , .tooltip ('hide') ΠΈ .tooltip ('toggle') ; это Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ нСльзя ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ с ΠΊΠ°ΠΊΠΈΠΌ-Π»ΠΈΠ±ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΠΌ Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€ΠΎΠΌ.

'hover' сам ΠΏΠΎ сСбС ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Ρ‚ ΠΊ появлСнию Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… подсказок, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ нСльзя Π·Π°ΠΏΡƒΡΡ‚ΠΈΡ‚ΡŒ с ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹, ΠΈ ΠΈΡ… слСдуСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€ΠΈ Π½Π°Π»ΠΈΡ‡ΠΈΠΈ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠ² ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‡ΠΈ Ρ‚ΠΎΠΉ ΠΆΠ΅ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹.

Π²Ρ‹Ρ‡Π΅Ρ‚ | строка 0 Π‘ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ†Π΅Π»ΠΈ. Для получСния Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ΡΡŒ ΠΊ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ ΠΏΠΎ ΡΠΌΠ΅Ρ‰Π΅Π½ΠΈΡŽ Popper.js.
Ρ€Π΅Π·Π΅Ρ€Π²Π½ΠΎΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ строка | массив ‘ΠΏΠ΅Ρ€Π΅Π²ΠΎΡ€ΠΎΡ‚’ ΠŸΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ‚ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ, ΠΊΠ°ΠΊΡƒΡŽ ΠΏΠΎΠ·ΠΈΡ†ΠΈΡŽ ΠŸΠΎΠΏΠΏΠ΅Ρ€ Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΈ ΠΎΡ‚ΠΊΠ°Ρ‚Π΅. Для получСния Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ см. ПовСдСниС Popper.js docs
Π³Ρ€Π°Π½ΠΈΡ†Π° строка | элСмСнт ‘scrollParent’ Π“Ρ€Π°Π½ΠΈΡ†Π° ограничСния пСрСполнСния Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки.ΠŸΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ значСния 'viewport' , 'window' , 'scrollParent' ΠΈΠ»ΠΈ ссылку HTMLElement (Ρ‚ΠΎΠ»ΡŒΠΊΠΎ JavaScript). Для получСния Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ΡΡŒ ΠΊ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ Popper.js preventOverflow.
Атрибуты Π΄Π°Π½Π½Ρ‹Ρ… для ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… подсказок

ΠžΠΏΡ†ΠΈΠΈ для ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… подсказок ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² Π΄Π°Π½Π½Ρ‹Ρ…, ΠΊΠ°ΠΊ описано Π²Ρ‹ΡˆΠ΅.

ΠœΠ΅Ρ‚ΠΎΠ΄Ρ‹

АсинхронныС ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹

ВсС ΠΌΠ΅Ρ‚ΠΎΠ΄Ρ‹ API ΡΠ²Π»ΡΡŽΡ‚ΡΡ асинхронными ΠΈ Π·Π°ΠΏΡƒΡΠΊΠ°ΡŽΡ‚ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ .Они Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°ΡŽΡ‚ΡΡ ΠΊ Π²Ρ‹Π·Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ сторонС, ΠΊΠ°ΠΊ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ начинаСтся, Π½ΠΎ Π΄ΠΎ Π΅Π³ΠΎ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΡ . ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π²Ρ‹Π·ΠΎΠ² ΠΌΠ΅Ρ‚ΠΎΠ΄Π° для ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΠΎΠ²Π°Π½ .

Π‘ΠΌ. ΠΠ°ΡˆΡƒ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ ΠΏΠΎ JavaScript для получСния Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ.

$ (). Подсказка (ΠΎΠΏΡ†ΠΈΠΈ)

ΠŸΡ€ΠΈΡΠΎΠ΅Π΄ΠΈΠ½ΡΠ΅Ρ‚ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки ΠΊ ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠΈ элСмСнтов.

.tooltip ('ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ')

ΠŸΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку элСмСнта. Π’ΠΎΠ·Π²Ρ€Π°Ρ‚ ΠΊ Π²Ρ‹Π·Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ сторонС Π΄ΠΎ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка Π±Ρ‹Π»Π° фактичСски ΠΏΠΎΠΊΠ°Π·Π°Π½Π° (Ρ‚.Π΅. Π΄ΠΎ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ‚ событиС 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')

Π‘ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ ΠΈ ΡƒΠ½ΠΈΡ‡Ρ‚ΠΎΠΆΠ°Π΅Ρ‚ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку элСмСнта.Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΠ΅ Π΄Π΅Π»Π΅Π³ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ (ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠΎΠ·Π΄Π°ΡŽΡ‚ΡΡ с использованиСм ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° сСлСктора ), Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ ΡƒΠ½ΠΈΡ‡Ρ‚ΠΎΠΆΠ΅Π½Ρ‹ ΠΈΠ½Π΄ΠΈΠ²ΠΈΠ΄ΡƒΠ°Π»ΡŒΠ½ΠΎ для Π΄ΠΎΡ‡Π΅Ρ€Π½ΠΈΡ… Ρ‚Ρ€ΠΈΠ³Π³Π΅Ρ€Π½Ρ‹Ρ… элСмСнтов.

  $ ('# element'). Tooltip ('dispose')  
.tooltip ('enable')

ΠŸΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΡƒΡŽ подсказку элСмСнта. Подсказки Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Ρ‹ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.

  $ ('# element'). Tooltip ('enable')  
.tooltip ('disable')

УдаляСт Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ отобраТСния Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки элСмСнта.Π’ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² Ρ‚ΠΎΠΌ случаС, Ссли ΠΎΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Π°.

  $ ('# element'). Tooltip ('disable')  
.tooltip ('toggleEnabled')

ΠŸΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ отобраТСния ΠΈΠ»ΠΈ скрытия Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки элСмСнта.

  $ ('# element'). Tooltip ('toggleEnabled')  
.tooltip ('update')

ΠžΠ±Π½ΠΎΠ²Π»ΡΠ΅Ρ‚ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки элСмСнта.

  $ ('# element'). Tooltip ('update')  

Бобытия

Показано
Π’ΠΈΠΏ события ОписаниС
ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ.bs.tooltip Π­Ρ‚ΠΎ событиС Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ сразу послС Π²Ρ‹Π·ΠΎΠ²Π° ΠΌΠ΅Ρ‚ΠΎΠ΄Π° экзСмпляра show .
.bs.tooltip Π­Ρ‚ΠΎ событиС вызываСтся, ΠΊΠΎΠ³Π΄Π° Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка становится Π²ΠΈΠ΄ΠΈΠΌΠΎΠΉ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ (ΠΎΠΆΠΈΠ΄Π°Π΅Ρ‚ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΡ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠ² CSS).
hide.bs.tooltip Π­Ρ‚ΠΎ событиС запускаСтся сразу послС Π²Ρ‹Π·ΠΎΠ²Π° ΠΌΠ΅Ρ‚ΠΎΠ΄Π° экзСмпляра hide .
hidden.bs.Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка Π­Ρ‚ΠΎ событиС вызываСтся, ΠΊΠΎΠ³Π΄Π° Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка пСрСстаСт Π±Ρ‹Ρ‚ΡŒ скрытой ΠΎΡ‚ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ (Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒ Π·Π°Π²Π΅Ρ€ΡˆΠ΅Π½ΠΈΡ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠ² CSS).
Insert.bs.tooltip Π­Ρ‚ΠΎ событиС запускаСтся послС события show.bs.tooltip , ΠΊΠΎΠ³Π΄Π° шаблон Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказки Π±Ρ‹Π» Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ Π² DOM.
  $ ('# myTooltip'). On ('hidden.bs.tooltip', function () {
  // сдСлай Ρ‡Ρ‚ΠΎ-Π½ΠΈΠ±ΡƒΠ΄ΡŒβ€¦
})  

Подсказка | jQuery UI


НастраиваСмыС Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки, Π·Π°ΠΌΠ΅Π½ΡΡŽΡ‰ΠΈΠ΅ собствСнныС Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки.

НавСдитС ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ Π½Π° ссылки Π²Ρ‹ΡˆΠ΅ ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΊΠ»Π°Π²ΠΈΡˆΡƒ табуляции, Ρ‡Ρ‚ΠΎΠ±Ρ‹ цикличСски ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ фокус Π½Π° ΠΊΠ°ΠΆΠ΄ΠΎΠΌ элСмСнтС.

ΠΏΡ€ΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ исходный ΠΊΠΎΠ΄

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

jQuery UI Tooltip - Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ

< script src = "https://code.jquery.com/jquery-1.12.4.js">

Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΊΡ€Π΅ΠΏΠΈΡ‚ΡŒ ΠΊ Π»ΡŽΠ±ΠΎΠΌΡƒ элСмСнту .Когда Π²Ρ‹ Π½Π°Π²ΠΎΠ΄ΠΈΡ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚Π΅Π»ΡŒ ΠΌΡ‹ΡˆΠΈ Π½Π° элСмСнт

, Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° отобраТаСтся Π² нСбольшом ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊΠ΅ рядом с элСмСнтом, ΠΊΠ°ΠΊ обычная Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка.

Но ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ это Π½Π΅ Ρ‚Π°ΠΊ встроСнная Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π°Ρ подсказка, Π΅Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ. Π›ΡŽΠ±Ρ‹Π΅ Ρ‚Π΅ΠΌΡ‹, созданныС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ

ThemeRoller

, Ρ‚Π°ΠΊΠΆΠ΅ Π±ΡƒΠ΄ΡƒΡ‚ стилизованы Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠ΅ подсказки соотвСтствСнно.

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *