Debugging tooltips on web page

Aloha readers!
Let’s learn about debugging technique when dealing with tooltips on UI, today.
This can help increase your productivity when customising them.

Why do we need to learn this tip?

If you are working with frameworks like AngularJs, React, etc., you might implement tooltip using existing libraries like uib-tooltip (angular-bootstrap library) and in some cases css might not work for your use-case.

You may find it annoying to reload web page after changing tooltip custom-css again and again.

What is tooltip?

A tooltip is often used to specify extra information about something when the user moves the mouse pointer over an element.

The above picture depicts, how a tooltip looks like

source: https://angular-ui.github.io/bootstrap/versioned-docs/0.14.2/

TIP:

The steps you can use to open tooltip in debug mode and use developer tools to its full potential are stated below:

1. Open dev-tools by pressing f12 or right-click on element and select inspect element.
2. Open sources tab
3. Hover over the element you have tooltip on.
4. To enter debugging mode: press f8 OR cmd + \ (mac OS) OR ctrl + \ (windows OS)
5. Click on element selector which is present on top-left of developer tools and select tooltip.
6. Now, you can play around with tooltip’s css in styles section

Hope you learn something new from this tutorial.
See you all in the next one. Mahalo!