Trying out Tooltips!

Hello! I am back here with another blog in relation to my coding adventure!

I recently saw a post in regards to tooltips! The post was mainly CSS and I realized that I have never really got a chance to utilize tooltips before! As I read some articles and resources about it, it piqued my interest to try and play around to see how tooltips work!

There are a lot of ways to display tooltips! But first what is a tooltip?

According to Techopedia, tooltip is a graphical user interface (GUI) element used in conjunction with the cursor or mouse pointer to display information about an item without needing to click on it. The typical scenario for summoning a tooltip is to hover the mouse cursor over another GUI element such as a tool icon in a software application, and it is also prevalently used in websites.

A tooltip is also known as a hint, infotip or screentip.
I see it a lot without realizing those are tooltips! A good example is this on Github:

Uses

1. Provides more information for your user.
   • This can either be a subtitle tooltip for a page full of images or display a preview of a link before having the user click on it.
2. Makes your website more reader-friendly.
   • Less text might be better for UI. Tucking away tips or text they don't necessarily need to see ASAP, will look cleaner or streamlined.
3. Lessens confusion on users.
   • Tooltips can give guidance to users on parts of the page that might be confusing. A good example is tips on using uncommon buttons or showing the meaning of uncommon icons. Might be even a big part of giving your website more accessibility features.
4. Call-to-Action.
   • Tooltips can provide a quicker way to integrate micro-interactions into the flow of your UI.

Check out some of these articles for more references about tooltips!

Tooltip snippets - If you wanted to save time and just needed a quick HTML/CSS snippet of tooltips, definitely check this one out.

Creating tooltips - If you're looking into a step-by-step method on creating a tooltip and style it, this one might be a good one to bookmark.

Ways to create tooltips

• Bootstrap- Tooltips, Material UI-Tooltip, Semantic UI- Popup - Out of all I have tried, these might be the easiest one for me. Since everything is all set up just need to import components on your code, styling might just be a little limited.

• HTML/CSS - Toggling it's visibility. This was so tricky to me somehow. T_T Positioning the tooltip once triggered was tricky when was used unlike using a . But my code ended up looking like this;
  

  <div class="tooltip-ex">
    <span style="color: black !important;" id="hoverme">Hover here!</span>
    <div class="tooltip-ex-text">
     <span style="color: black;">I am a tooltip</span>
    </div>
  </div>
  

  CSS:
  

  • Click here to run the code - BitDegree

  • HTML - data-text/ data-tooltip - I didn't know that there was a built-in class you can apply through HTML! Syntax would be like this:
    

      <button  
        class="tooltip" 
        data-tooltip="I am using data-tooltip and CSS">
        Data Text
      </button>
  

  Neat right? You can put any message on the data-tooltip attribute and control how it looks on CSS. Didn't want to do a CSS code dump again so if you want to check it out, here's my CodePen.

  The unique thing I noticed with using this method is on CSS, there is a declaration that is called content with a value of attr(data-tooltip). It also utilizes the ::before and ::after pseudoelements on CSS.

  The result would look like this;
  

  Here's my CodePen with all of the mentioned above;
  

  And that is it! So far that is all I've discovered about tooltips! Maybe it's something you want to incorporate with your website if you haven't since there is probably more use of it we never got to try.

  Let me know in the comments below if you've used tooltips in a different way than the ones above!