Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

JS tooltip

ULASHISH

JS Tooltip (tooltip.js)

Tooltip plagini — foydalanuvchi sichqoncha kursorini element ustiga olib borganda paydo bo‘ladigan kichik qalqib chiquvchi oyna.

Tooltiplar bo‘yicha darslik uchun Bootstrap tooltip darsligimizni o‘qing.

data-* atributlari orqali

data-toggle="tooltip" tooltipni faollashtiradi.

title atributi tooltip ichida ko‘rsatiladigan matnni belgilaydi.

Misol

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
O‘zingiz sinab ko‘ring »

JavaScript orqali

Tooltiplar faqat CSS’dan iborat plaginlar emas, shuning uchun ular jQuery yordamida ishga tushirilishi (initialize) kerak: kerakli elementni tanlang va tooltip() metodini chaqiring.

Misol

// Select all elements with data-toggle="tooltips" in the document $('[data-toggle="tooltip"]').tooltip(); // Select a specified element $('#myTooltip').tooltip();
O‘zingiz sinab ko‘ring »

Tooltip parametrlari

Parametrlarni data atributlari yoki JavaScript orqali uzatish mumkin. Data atributlari uchun parametr nomini data- ga qo‘shing, masalan: data-placement="".

Nomi Tipi Default Tavsif Sinab ko‘ring
animation boolean true

Tooltipni ko‘rsatish va yashirishda CSS fade o‘tish (transition) effektini qo‘shish kerakligini belgilaydi

  • true - asta-sekin yo‘qolish (fade) effektini qo‘shish
  • false - asta-sekin yo‘qolish (fade) effektini qo‘shmaslik
 Sinab ko‘ring
container string yoki boolean false false Tooltipni muayyan elementga qo‘shadi.
Misol: container: 'body'		 Sinab ko‘ring
delay number yoki object 0 Tooltipni ko‘rsatish va yashirish uchun necha millisekund ketishini belgilaydi.

Ko‘rsatish uchun bitta, yashirish uchun esa boshqa kechikishni belgilash uchun obyekt tuzilmasidan foydalaning:

delay: {show: 500, hide: 100} - bunda tooltipni ko‘rsatish uchun 500 ms, yashirish uchun esa atigi 100 ms ketadi		 Sinab ko‘ring
html boolean  false Tooltipda HTML teglarini qabul qilish kerakligini belgilaydi:
 
  • true - HTML teglarini qabul qilish
  • false - HTML teglarini qabul qilmaslik
Eslatma: HTML title atributiga (yoki title parametri orqali) kiritilishi kerak.

Qiymat false (standart) bo‘lganda jQuery’ning text() metodi ishlatiladi. Agar XSS hujumlaridan xavotirda bo‘lsangiz, shu qiymatdan foydalaning		 Sinab ko‘ring
placement string "top" Tooltip joylashuvini belgilaydi. Mumkin bo‘lgan qiymatlar:

  • "top" - Tooltip yuqorida
  • "bottom" - Tooltip pastda
  • "left" - Tooltip chapda
  • "right" - Tooltip o‘ngda
  • "auto" - Tooltip joylashuvini brauzerning o‘zi hal qiladi. Masalan, qiymat "auto left" bo‘lsa, tooltip imkon qadar chap tomonda, aks holda o‘ng tomonda ko‘rsatiladi. Qiymat "auto bottom" bo‘lsa, tooltip imkon qadar pastda, aks holda yuqorida ko‘rsatiladi
 Sinab ko‘ring
selector string yoki boolean false false Tooltipni belgilangan selektorga qo‘shadi Sinab ko‘ring
template string   Tooltipni yaratishda ishlatiladigan asosiy HTML.

Tooltip sarlavhasi .tooltip-inner klassiga ega element ichiga joylanadi, .tooltip-arrow klassiga ega element esa tooltip strelkasiga aylanadi.

Eng tashqi o‘rovchi element .tooltip klassiga ega bo‘lishi kerak.
title string "" Tooltip ichida ko‘rsatiladigan matnni belgilaydi Sinab ko‘ring
trigger string "hover focus" Tooltip qanday ishga tushirilishini belgilaydi. Mumkin bo‘lgan qiymatlar:

  • "click" - Tooltipni bosish orqali ishga tushirish
  • "hover" - Tooltipni sichqoncha ustiga olib borilganda ishga tushirish
  • "focus" - Tooltipni element fokus olganda ishga tushirish (masalan, Tab tugmasi yoki bosish orqali)
  • "manual" - Tooltipni qo‘lda ishga tushirish
Maslahat: Bir nechta qiymat uzatish uchun ularni bo‘sh joy bilan ajrating		 Sinab ko‘ring
viewport string yoki object {selector: "body", padding: 0} Tooltipni ushbu element chegaralari ichida saqlaydi.

Misol: viewport: '#viewport' yoki {selector: '#viewport', padding: 0}

Tooltip metodlari

Quyidagi jadvalda barcha mavjud tooltip metodlari keltirilgan.

Metod Tavsif Sinab ko‘ring
.tooltip(options) Tooltipni parametr bilan faollashtiradi. Yaroqli qiymatlar uchun yuqoridagi parametrlarga qarang Sinab ko‘ring
.tooltip("show") Tooltipni ko‘rsatadi Sinab ko‘ring
.tooltip("hide") Tooltipni yashiradi Sinab ko‘ring
.tooltip("toggle") Tooltipni ko‘rsatadi yoki yashiradi (toggle) Sinab ko‘ring
.tooltip("destroy") Tooltipni yashiradi va yo‘q qiladi Sinab ko‘ring

Tooltip hodisalari

Quyidagi jadvalda barcha mavjud tooltip hodisalari keltirilgan.

Hodisa Tavsif Sinab ko‘ring
show.bs.tooltip Tooltip ko‘rsatilish arafasida bo‘lganda sodir bo‘ladi Sinab ko‘ring
shown.bs.tooltip Tooltip to‘liq ko‘rsatilganda sodir bo‘ladi (CSS o‘tishlari (transitions) tugagandan keyin) Sinab ko‘ring
hide.bs.tooltip Tooltip yashirilish arafasida bo‘lganda sodir bo‘ladi Sinab ko‘ring
hidden.bs.tooltip Tooltip to‘liq yashirilganda sodir bo‘ladi (CSS o‘tishlari (transitions) tugagandan keyin) Sinab ko‘ring

Ko‘proq misollar

Tooltipning maxsus dizayni

Tooltip ko‘rinishini moslashtirish uchun CSS’dan foydalaning:

Misol

/* Tooltip */ .test + .tooltip > .tooltip-inner {   background-color: #73AD21;   color: #FFFFFF;   border: 1px solid green;   padding: 15px;   font-size: 20px; } /* Tooltip on top */ .test + .tooltip.top > .tooltip-arrow {   border-top: 5px solid green; } /* Tooltip on bottom */ .test + .tooltip.bottom > .tooltip-arrow {   border-bottom: 5px solid blue; } /* Tooltip on left */ .test + .tooltip.left > .tooltip-arrow {   border-left: 5px solid red; } /* Tooltip on right */ .test + .tooltip.right > .tooltip-arrow {   border-right: 5px solid black; }
O‘zingiz sinab ko‘ring »

‹ Orqaga

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish