Summary  
This chapter explains how to configure tooltip behavior and appearance by setting options such as content, placement, delay, and arrow.  

General domain of usage  
Web user interfaces

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPHRpdGxlPkJhc2ljIFRvb2x0aXAgQ29uZmlndXJhdGlvbiB3aXRoIFRpcHB5LmpzPC90aXRsZT4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaHR0cHM6Ly91bnBrZy5jb20vdGlwcHkuanNANi9kaXN0L3RpcHB5LmNzcyIgLz4KICAgIDxzdHlsZT4KICAgICAgLmljb24gewogICAgICAgIGZvbnQtc2l6ZTogMjRweDsKICAgICAgICB2ZXJ0aWNhbC1hbGlnbjogbWlkZGxlOwogICAgICAgIG1hcmdpbi1sZWZ0OiA4cHg7CiAgICAgICAgY3Vyc29yOiBwb2ludGVyOwogICAgICB9CiAgICAgIC5jb250YWluZXIgewogICAgICAgIG1hcmdpbjogNDBweDsKICAgICAgICBmb250LWZhbWlseTogQXJpYWwsIHNhbnMtc2VyaWY7CiAgICAgIH0KICAgICAgLmVsZW1lbnQtZ3JvdXAgewogICAgICAgIG1hcmdpbi1ib3R0b206IDI0cHg7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGRpdiBjbGFzcz0iY29udGFpbmVyIj4KICAgICAgPGRpdiBjbGFzcz0iZWxlbWVudC1ncm91cCI+CiAgICAgICAgPGJ1dHRvbiBpZD0iaW5mb0J0biI+U2hvdyBJbmZvPC9idXR0b24+CiAgICAgIDwvZGl2PgogICAgICA8ZGl2IGNsYXNzPSJlbGVtZW50LWdyb3VwIj4KICAgICAgICA8YSBocmVmPSIjIiBpZD0iaGVscExpbmsiPk5lZWQgSGVscD88L2E+CiAgICAgIDwvZGl2PgogICAgICA8ZGl2IGNsYXNzPSJlbGVtZW50LWdyb3VwIj4KICAgICAgICA8c3BhbiBpZD0ic2V0dGluZ3NJY29uIiBjbGFzcz0iaWNvbiIgdGl0bGU9IlNldHRpbmdzIj4mIzk4ODE7PC9zcGFuPgogICAgICA8L2Rpdj4KICAgIDwvZGl2PgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vdW5wa2cuY29tL0Bwb3BwZXJqcy9jb3JlQDIiPjwvc2NyaXB0PgogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vdW5wa2cuY29tL3RpcHB5LmpzQDYiPjwvc2NyaXB0PgogICAgPHNjcmlwdD4KICAgICAgLy8gQnV0dG9uIHRvb2x0aXAgd2l0aCBjdXN0b20gY29udGVudCwgcGxhY2VtZW50LCBhbmQgYXJyb3cKICAgICAgdGlwcHkoIiNpbmZvQnRuIiwgewogICAgICAgIGNvbnRlbnQ6ICJDbGljayB0byBnZXQgbW9yZSBpbmZvcm1hdGlvbiIsCiAgICAgICAgcGxhY2VtZW50OiAiYm90dG9tIiwKICAgICAgICBhcnJvdzogdHJ1ZQogICAgICB9KTsKCiAgICAgIC8vIExpbmsgdG9vbHRpcCB3aXRoIGRlbGF5IGJlZm9yZSBzaG93aW5nCiAgICAgIHRpcHB5KCIjaGVscExpbmsiLCB7CiAgICAgICAgY29udGVudDogIkNvbnRhY3Qgc3VwcG9ydCBmb3IgYXNzaXN0YW5jZSIsCiAgICAgICAgZGVsYXk6IFs1MDAsIDBdLCAvLyA1MDBtcyBzaG93IGRlbGF5LCAwbXMgaGlkZSBkZWxheQogICAgICAgIHBsYWNlbWVudDogInJpZ2h0IiwKICAgICAgICBhcnJvdzogdHJ1ZQogICAgICB9KTsKCiAgICAgIC8vIEljb24gdG9vbHRpcCB3aXRob3V0IGFycm93IGFuZCB3aXRoIHRvcCBwbGFjZW1lbnQKICAgICAgdGlwcHkoIiNzZXR0aW5nc0ljb24iLCB7CiAgICAgICAgY29udGVudDogIkFkanVzdCB5b3VyIHByZWZlcmVuY2VzIiwKICAgICAgICBwbGFjZW1lbnQ6ICJ0b3AiLAogICAgICAgIGFycm93OiBmYWxzZQogICAgICB9KTsKICAgIDwvc2NyaXB0PgogIDwvYm9keT4KPC9odG1sPg==

To configure tooltips in Tippy.js, you use a range of options that control their appearance and behavior. The `content` option specifies the text or HTML displayed inside the tooltip. This is the main message you want users to see. The `placement` option determines where the tooltip appears in relation to the target element, such as above, below, to the left, or to the right. The `delay` option allows you to set how long to wait before showing or hiding the tooltip, using an array with the first value for the show delay and the second for the hide delay. The `arrow` option enables or disables the arrow pointer on the tooltip, helping to visually connect the tooltip to its target. By combining these options, you can tailor tooltips to suit different interface elements and user experience needs.

In Tippy.js, which configuration option determines where the tooltip appears relative to the target element?

Learn to create modern, accessible tooltips and popovers using Tippy JS. Explore configuration options, styling techniques, animations, and interaction triggers to enhance user experience.

Understand the role of tooltips and popovers in modern interfaces and explore how Tippy JS simplifies floating UI elements. Learn the core setup process and essential accessibility considerations.

Control how tooltips and popovers look and behave through themes, animations, and trigger configurations. Shape floating UI elements to match design systems and interaction patterns.

Build interactive tooltips and rich popovers containing custom content and components. Manage multiple instances and complex behaviors in larger interfaces.

Apply Tippy JS in dynamic interfaces and real application flows. Focus on usability patterns, integration with changing content, and resolving common implementation issues.

Basic Tooltip Configuration

Basic Tooltip Configuration