Logo
×

CSS Arrow

CSS Arrow

The arrow of CSS is applied to insert an array with the tooltip. It can make a tooltip as any speech bubble. Also, this arrow can be illustrated in four of the essential ways:

  • Right arrow
  • Left arrow
  • Bottom arrow
  • Top arrow

Top Arrow in CSS

The CSS top arrow can be applied to include an arrow as a structure on tooltip’s top if we point the cursor on an element. It can show a tooltip on an element’s bottom.

Let’s understand the following illustration:

Example:

<!DOCTYPE html> 
<html> 
<style> 
.tooltip
{ 
position: relative; 
display: inline-block; 
border-bottom: 1px dotted black; 
} 
.tooltip .tooltiptext
{ 
visibility: hidden; 
width: 120px; 
background-color: black; 
color: #fff; 
text-align: center; 
border-radius: 6px; 
padding: 5px 0; 
position: absolute; 
z-index: 1; 
top: 150%; 
left: 50%; 
margin-left: -60px; 
} 
.tooltip .tooltiptext::after
{ 
content: ""; 
position: absolute; 
bottom: 100%; 
left: 50%; 
margin-left: -5px; 
border-width: 5px; 
border-style: solid; 
border-color: transparent transparent black transparent; 
} 
.tooltip:hover .tooltiptext
{ 
visibility: visible; 
} 
</style> 
<body style="text-align:center;"> 
<h2> Top Arrow in CSS Example </h2> 
<p> Point the cursor on the heading as mentioned below </p> 
<div class="tooltip"><strong> Welcome to the Tutorial and Example </strong> 
<span class="tooltiptext"> Explanation of all the technologies </span> 
</div> 
</body> 
</html> 

Output:

CSS Arrow

Bottom Arrow in CSS

The CSS bottom arrow can be applied to include an arrow as a structure on tooltip’s bottom if we point the cursor on an element. It can show a tooltip on an element’s top.

Let’s consider the following illustration:

Example:

<!DOCTYPE html> 
<html> 
<style> 
.tooltip
{ 
position: relative; 
display: inline-block; 
border-bottom: 1px dotted black; 
} 
.tooltip .tooltiptext
{ 
visibility: hidden; 
width: 120px; 
background-color: black; 
color: #fff; 
text-align: center; 
border-radius: 6px; 
padding: 5px 0; 
position: absolute; 
z-index: 1; 
bottom: 150%; 
left: 50%; 
margin-left: -60px; 
} 
.tooltip .tooltiptext::after
{ 
content: ""; 
position: absolute; 
top: 100%; 
left: 50%; 
margin-left: -5px; 
border-width: 5px; 
border-style: solid; 
border-color: transparent transparent black transparent; 
} 
.tooltip:hover .tooltiptext
{ 
visibility: visible; 
} 
</style> 
<body style="text-align:center;"> 
<h2> Bottom Arrow in CSS Example </h2> 
<p> Point the cursor on the heading as mentioned below </p> 
<div class="tooltip"><strong> Welcome to the Tutorial and Example </strong> 
<span class="tooltiptext"> Explanation of all the technologies </span> 
</div> 
</body> 
</html> 

Output:

CSS Arrow

Left Arrow in CSS

The CSS left arrow can be applied to include an arrow as a structure on tooltip’s left side if we point the cursor on an element. It can show a tooltip on an element’s right side.

Let’s consider the following illustration:

Example:

<!DOCTYPE html> 
<html> 
<style> 
.tooltip
{ 
position: relative; 
display: inline-block; 
border-bottom: 1px dotted black; 
} 
.tooltip .tooltiptext
{ 
visibility: hidden; 
width: 120px; 
background-color: black; 
color: #fff; 
text-align: center; 
border-radius: 6px; 
padding: 5px 0; 
position: absolute; 
z-index: 1; 
top: -5px; 
left: 110%; 
} 
.tooltip .tooltiptext::after
{ 
content: ""; 
position: absolute; 
top: 50%; 
right: 100%; 
margin-top: -5px; 
border-width: 5px; 
border-style: solid; 
border-color: transparent transparent black transparent; 
} 
.tooltip:hover .tooltiptext
{ 
visibility: visible; 
} 
</style> 
<body style="text-align:center;"> 
<h2> Right Arrow in CSS Example </h2> 
<p> Point the cursor on the heading as mentioned below </p> 
<div class="tooltip"><strong> Welcome to the Tutorial and Example </strong> 
<span class="tooltiptext"> Explanation of all the technologies </span> 
</div> 
</body> 
</html> 

Output:

CSS Arrow

Right Arrow in CSS

The CSS right arrow can be applied to include an arrow as a structure on tooltip’s right side if we point the cursor on an element. It can show a tooltip on an element’s left side.

Let’s consider the following illustration:

Example:

<!DOCTYPE html> 
<html> 
<style> 
.tooltip
{ 
position: relative; 
display: inline-block; 
border-bottom: 1px dotted black; 
} 
.tooltip .tooltiptext
{ 
visibility: hidden; 
width: 120px; 
background-color: black; 
color: #fff; 
text-align: center; 
border-radius: 6px; 
padding: 5px 0; 
position: absolute; 
z-index: 1; 
top: -5px; 
right: 110%; 
} 
.tooltip .tooltiptext::after
{ 
content: ""; 
position: absolute; 
top: 50%; 
left: 100%; 
margin-top: -5px; 
border-width: 5px; 
border-style: solid; 
border-color: transparent transparent black transparent; 
} 
.tooltip:hover .tooltiptext
{ 
visibility: visible; 
} 
</style> 
<body style="text-align:center;"> 
<h2> Left Arrow in CSS Example </h2> 
<p> Point the cursor on the heading as mentioned below </p> 
<div class="tooltip"><strong> Welcome to the Tutorial and Example </strong> 
<span class="tooltiptext"> Explanation of all the technologies </span> 
</div> 
</body> 
</html> 

Output:

CSS Arrow

Related Topics

CSS Comments

CSS Comments: Generally, comments in CSS are used to describe our code. Further, it will provide support to many users who are concerned with the code. Somewhat, these are ignored...

2 minutes read.

CSS Align

CSS Center Align Elements CSS center align is used to create align by using block element. You should specify margin: auto;properties. The element will take up the specified width and the remaining space....

2 minutes read.

How to change background color in CSS

How to change background color in CSS? The background-color property in CSS would be used to specify the color of an element's background. As the element's background, it uses solid colors. The...

3 minutes read.

Create a 3D text effect using HTML and CSS

A3D text effect is a beautiful and attractive part of a webpage. As a web page developer, it is crucial to know how to create a 3D text effect with...

3 minutes read.

CSS Loader

CSS Loader The loader is the animation that can alert a visitor regarding the loading of the page. We need to wait for some time. It will be helpful if any...

4 minutes read.

CSS 3D Transform

Introduction To understand 3D transformation property of transform you need to first understand the difference between 2D and 3D transform. 2D transform is a CSS effect which transforms the elements according to...

6 minutes read.

CSS Text Effects

Text Effects in CSS We can use distinct text effects used inside the HTML document. Few attributes can be applied to insert the text effects. We can also style various web documents...

5 minutes read.

CSS Text-align

Text-align The text-align property of CSS sets the table-cell box’s horizontal alignment or any block element. The text-align property is the same as the CSS property vertical-align but towards any horizontal...

1 minute read.

How To Use CSS

You can use CSS(Cascading Style Sheet) in four ways. These are given below: The given above CSS type, in which various technique will be used. These are different from each other and...

2 minutes read.

CSS z-index Property

CSS z-index: CSS z-index permits us to represent any visual hierarchy over a 3D plane that is the z-axis. This index can be applied to describe the positioned element’s stacking...

2 minutes read.

CSS Reference

The CSS Reference lists all of the basic standard CSS properties, pseudo-classes, pseudo-elements, and data types, for all intents and purposes functional notations, and at-rules alphabetically.  The site also includes...

5 minutes read.

CSS @keyframes rule

CSS @keyframes rule It describes the rule of animation that depicts the properties of CSS for the components at every state along with the timeline. We may make the properties of complex...

4 minutes read.

CSS Units

CSS Units In CSS, there are so many units available to show the length’s measurement. A single unit of CSS is applied to examine the size of the property, which the...

5 minutes read.

How to resize an image in CSS

How to resize an image in CSS? The resize image attribute is used in responsive web design to resize images to fit within the div container automatically. The resize image attribute...

3 minutes read.

What is CSS

CSS stands for Cascading Style Sheet. It gives an additional style to the HTML document. A cascading style sheet is a language that is designed to define the document formatting...

3 minutes read.

CSS Dropdowns

Dropdowns are one of the maximum crucial parts of an interactive internet site. CSS is a kind used to design the drop-down menus. A drop-down essentially is a group of...

5 minutes read.

How to center a table in CSS

The table is used to store and arrange the data in tabular format. The data here can be of any form like text, image, links, etc. The table is made...

3 minutes read.

CSS Box-shadow

CSS Box-shadow This property is referred to include effects as shadow-like around an element’s frame. Syntax box-shadow: h-offset v-offset blur spread color |inset|inherit|none; Property values Following are the various property values which can be used...

3 minutes read.

How to change font size in CSS

How to change font size in CSS? Font Size: - Users may attract attention to content on a website page in various ways. One element in a sentence can be highlighted. You...

5 minutes read.

How to use google fonts in CSS

Fonts: - Fonts are used to make our website look more beautiful. Choosing appropriate font according to the web design or layout is also important. Many typefaces are accessible in...

4 minutes read.