April 21, 2020
How to Add Tooltip in Javascript using Tippy Js
1 2 3 4 5 6 7 8 9 10 11 |
tippy('#myBtn', { content: "<strong>My Tooltip</strong>", placement: 'left', arrow: true, arrowType: 'round', animation: 'perspective', theme: 'light', duration: 500, delay: 1000, followCursor: true, }) |
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 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="https://unpkg.com/tippy.js@4/themes/light.css" /> <title>Document</title> </head> <body> <div style="text-align: center"> <button id="myBtn">Click Here</button> </div> <script src="https://unpkg.com/popper.js@1"></script> <script src="https://unpkg.com/tippy.js@4"></script> <script src="script.js"></script> </body> </html> |