Hiệu ứng Tooltips tuyệt đẹp với Tippy.js

Tippy.js là mộtcông cụ JavaScript nhỏ gọn để tạo Tooltips, có thể tùy biến cao giúp bạn thêm các chú giải, tương tác vào bất kỳ phần tử DOM nào.

Các tính năng chính:

  • Hỗ trợ tất cả các vị trí: trên cùng, bên phải, dưới cùng bên trái
  • tuyfchinhr sự kiện kích hoạt: mouseenter, focus, click hoặc thủ công.
  • 4 hoạt ảnh tuyệt vời được tích hợp sẵn: shift, perspective, fade or scale.
  • 4 chủ đề: Google, Light Border, Light, và Translucent
  • Cho phép nhúng bất kỳ HTML nào vào trong Tooltips.
  • Cho phép dùng callback functions.

Cài qua NPM:

$ npm install tippy

Cách sử dụng

Load the JavaScript and CSS files as displayed below in your html document.

<link rel="stylesheet" href="css/tippy.css">
<script src="js/tippy.js"></script>

Add the ‘tippy’ class to your element and define the tooltip content using ‘title’ attribute like this:

<span class="tippy" title="I'm a tooltip!">Hover Me</span>

Initialize the tooltip library by creating a new Tippy object as this:

new Tippy('.tippy')

Config the tooltip using the following options. Note that all the options as listed below are allowed to be passed via JavaScript:

new Tippy('.tippy', { 
    placement: 'top',
    livePlacement: true,
    trigger: 'mouseenter focus',
    animation: 'shift-away',
    html: false,
    animateFill: true,
    arrow: false,
    delay: 0,
    duration: [350, 300],
    interactive: false,
    interactiveBorder: 2,
    theme: 'dark',
    size: 'regular',
    distance: 10,
    offset: 0,
    hideOnClick: true,
    multiple: false,
    followCursor: false,
    inertia: false,
    updateDuration: 350,
    sticky: false,
    appendTo: function appendTo() {
      return document.body;
    },
    zIndex: 9999,
    touchHold: false,
    performance: false,
    dynamicTitle: false,
    flip: true,
    flipBehavior: 'flip',
    arrowType: 'sharp',
    arrowTransform: '',
    maxWidth: '',
    target: null,
    allowTitleHTML: true,
    popperOptions: {},
    createPopperInstanceOnInit: false,
})

Hoặc qua thuộc tính HTML data :

<span class="tippy" 
      title="I'm a tooltip!"
      data-OPTION="VALUE">
      Hover Me
</span>

Callback functions available:

new Tippy('.tippy', { 

   onShow: function onShow() {},
   onShown: function onShown() {},
   onHide: function onHide() {},
   onHidden: function onHidden() {}
    
})

API methods.

// show the tippy
instance.show([duration])

// hide the tippy
instance.hide([duration])

// enable the tippy
instance.enable()

// disable the tippy
instance.disable()

// destroy the tippy
instance.destroy()
Nguồn bài viết: CSSScript

Leave a Reply

Your email address will not be published. Required fields are marked *