In this short tutorial, I will show you how to create simple CSS arrows for your tooltips, quotes or message boxes. The process is very simple and we only need to learn how to implement the code. The CSS Arrow Please, lets you generate required CSS code to create a simple tooltip with arrows towards any four direction. So here’s how:
1. Go to CSS Arrow Please site and customize the look and feel of your tooltip along with direction of the arrow.
2. Copy the generated CSS and paste it in your stylesheet.
3. Now since it has only generated the CSS, you need to add markup in your HTML in order to implement it.
The generated CSS creates a class named “.arrow_box” in which you can display your message, quote or tooltip. So you will have to make use of the generated class in your HTML file:
<div class="arrow_box">
This is a tooltip where you can display message or quotes along with the CSS Arrow towards any direction.
</div>
Though you get CSS ready to be implemented, it requires bit of a change to make your message box usable. So I am going to add width, color and padding to the “.arrow_box” class:
.arrow_box {
position: relative;
background: #88b7d5;
border: 4px solid #c2e1f5;
width: 200px;
color: #fff;
padding: 10px;
}
And once done, it should look like this (except arrow direction):
Note:
- To implement multiple arrow boxes with one or more directions, you will need to change the name of the class from “.arrow_box” to other unique names. Say, “.arrow_left”, “.arrow_right” etc.
- You can further customize the text and arrow box with your set of additional CSS properties like font-family and text color etc.