Design Tooltip Using CSS


In this article, we are creating Tooltip Using CSS. Well, The tooltips created to inform something or to show some kind of information to the user. So we are creating a simple tooltip that describes the information about the something. In this lesson, we will create primary, danger, successful and warning tooltip. You can use any of this tooltip.

So these are the tooltip which we are creating today.

In this tutorial, we are creating these tooltips.

So let’s get started.

Create a Project

We will create a new project in the visual code editor. If you don’t have code editor then you can use sublime text, or atom also but we personally prefer this editor. In the visual code editor, you can rapidly create a new design with minutes.

To create a new project just create a folder on the desktop and open this folder in the visual code editor. In this folder create two files Index.html and Style.css.

Index.html

In index.html file create a simple html5 snippets and link bootstrap and style.css file. We are using bootstrap only for typography and margin. We purely design this tooltip using CSS. If you did not link the bootstrap file then nothing will happen. So don’t get confused.

Understand the code:-

  • In the above code, you will see we first link the bootstrap.css file and then link style.css file which is custom CSS file. Keep in mind we are using bootstrap only for typography and margin, not for design.
  • After that in the body section, we will insert div with text center and margin-top class. Text center class will center all the text and margin-top class adds some margin to the top of the element.
  • Then we will insert h3 heading tag with margin-bottom 5% and specify tooltip text.
  • after this, we will add a new row and column of bootstrap. So row class will create a new and col-md-4 will create a new column.
  • In this column, we add a d-flex flex-row class. This class will align all the elements in the new row. So whatever you put in the class these will align to the new row.
  • So here in this class, we create a label with error class. we are using the error class in the style.css file.
  • Here we will create four labels, primary, danger, warning, and successful label.

Style.css

In style.css file, we will add style to make this tooltip design.

Understanding Code.

  • So in the style.css file, we first remove margin and padding from the body tag.
  • Then we will create a tooltip design using error and error before selector. So in the style.css file, you will see we created an error class and also created an error before selector.
  • Using before selector we will design the triangle which we will align on the bottom of the error class. So this will look like a tooltip. we are using position property to align these all. Using position absolute you can align all these elements at the specified position.
  • After that using nthChild 2 we will select the second label and change top and left the property and also change the background color.
  • Then we will change the border-top property color. Make sure you specify the same color for background and border-top property otherwise it will look different.
  • We will create the same code for the third and fourth label. So using nth-child you can select these labels and change any property you want. So we will change the top and left the property of the third label and add padding. Padding is for resizing your element.
  • Then we will change the border-top property of the third and fourth label.

Done.

Your design is ready. You can copy this code and put it in your file or you can type it manually and practice it. Typing it of your own is the better way to remember these things.

Your tooltip is created. Now you know how to create the tooltip using CSS.

That’s it. We will see you in the next article.

Leave a Reply

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