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 User Interface

Introduction User Interface can be defined as series of visual elements like screens, buttons, forms that help the user interact with the software application or hardware device. CSS User Interface allows the...

6 minutes read.

CSS Sticky

CSS Sticky The position property in CSS is applied to set an element’s position. This property is also applied to position an element behind the other element. It is useful for...

1 minute read.

CSS Font

CSS Font: CSS has font property, which makes the text more attractive. We can alter the entire look by changing font color, font size, font style, and much more. In...

5 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 Width

CSS Width The width property in CSS sets the content width of area of the element. These properties do not provide margin and border features. It is used to set the...

1 minute read.

How to edit CSS in WordPress

Developing a new website or blog is a difficult undertaking. We want to create something that the consumers will adore, but we might not want the setting to take months and...

7 minutes read.

CSS Superscript and Subscript

Superscript and Subscript To specify the superscript and the subscript text, HTML provides us two tags that are <sup> and <sub>. The superscript content looks in the shorter font and half...

2 minutes read.

How to center a button in CSS

How to center a button in CSS? In the tutorial, we will learn how to center a button in CSS. CSS (Cascading Style Sheets) gives an HTML web page the greatest possible...

4 minutes read.

CSS Checkbox style

CSS Checkbox style: It is an element of HTML, which is used to get input from various users. It is difficult to style any checkbox. However, some elements make it...

6 minutes read.

How to Set Space between the Flexbox

For managing layout on the Web, CSS Flexbox and CSS Grid are two excellent tools. Flexbox handles one-dimensional layouts quite well, whereas CSS Grid manages two-dimensional layouts with columns and...

4 minutes read.

Css Text Orientation

Introduction: The text-orientation property of CSS is used to specify the orientation of the text characters in the line of content. This property applies only with the vertical writing-mode and not...

4 minutes read.

CSS Image Gallery

Image galleries are used to display and store collections of images. Example Let’s discuss an example. CSS was used to create the following image gallery: Code is as follows: <html> <head> <style> div.gallery {   margin: 6px;   border: 1px...

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.

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.

CSS Color Keywords

Here, we will discuss the following keywords: transparent currentcolor Inherit Transparent keyword A color can generally be made transparent by using the transparent keyword. Often it is used to for all intents...

4 minutes read.

CSS Text-Transform Property

Text-Transform in CSS The text-transform property permits us to alter the text case. It controls the capitalization of the text. This property is employed to design the text appearance in every...

3 minutes read.

CSS Pseudo-elements

Pseudo-elements The pseudo-classes in CSS can be represented as any keyword which is connected to the selector that represents any selected element’s unique state. On the other hand, pseudo-elements can be...

6 minutes read.

CSS Counters

CSS Counters: The CSS counter property is similar to the variables. CSS counters are controlled via CSS, and its values are incremented via rules of CSS to record how much...

4 minutes read.

What is CSS used for

What is CSS used for? CSS stands for Cascading Style Sheet. CSS is a stylesheet language for web pages. It specifies how a document created in a markup language looks and...

4 minutes read.

CSS Hover

CSS Hover: CSS :hover is used to select the various elements whenever we point the mouse on these elements. We can also use this selector on all the HTML elements,...

3 minutes read.