Tooltip left arrow css

CSS Tooltips in CSS3

Tooltip is a message which appears when a cursor is positioned over an icon, image, hyperlink, or other element in a graphical user interface.

 .tooltip < position: relative; display: inline-block; border-bottom: 2px solid green; >.tooltip .tooltiptext < visibility: hidden; width: 200px; background-color: black; color: yellow; text-align: center; border-radius: 20px; padding: 5px 0; position:fixed; z-index: 1; >.tooltip:hover .tooltiptext 
Place mouse on the button to get tooltip
 
Hover over me Tooltip text 
  

In the above code snippet we have the tooltip which appears as the when the mouse is placed on the button it displays the tooltip message, we have tooltip with properties to define the border, etc and tooltip text to define color, background color, etc with different properties, tooltip hover is uses a properties visibility as visible to show the tooltip when the mouse is placed on the button

Right tooltip

Right tooltip is used to display the tooltip right side

 .tooltip < position: relative; display: inline-block; border-bottom: 2px solid black; >.tooltip .tooltiptext < visibility: hidden; width: 120px; background-color: silver; color: black; text-align: center; border-radius: 10px; padding: 5px 0; position: absolute; z-index: 1; top: -5px; left: 100%; > .tooltip:hover .tooltiptext 
Right Tooltip
 
Place the mouse the on the text to get right tooltip
 
Hover over me TechFunda 
  

In the above code snippet we have defined right tooltip, in order to get the right tooltip we need to add top and left properties

Left tooltip

It creates the tool tip on the left side

 .tooltip < position: relative; display: inline-block; border-bottom: 1px solid black; >.tooltip .tooltiptext < visibility: hidden; width: 120px; background-color: orange; color: yellow; text-align: center; border-radius: 20px; padding: 10px 10px; position: absolute; z-index: 1; top: -5px; right: 105%; > .tooltip:hover .tooltiptext 
Left Tooltip
 
Place mouse on the hover to get the left tooltip
 
Hover over me Tooltip text 
  

In the above code snippet we have defined the left tooltip, we use the property top and right to define the left tooltip with given values

Top tooltip

To get the top tooltip we need to add bottom and margin left property

 .tooltip < position: relative; display: inline-block; border-bottom: 1px dotted black; >.tooltip .tooltiptext < visibility: hidden; width: 120px; background-color: green; color: black; text-align: center; border-radius: 10px; position: absolute; z-index: 1; bottom: 100%; left: 50%; margin-left: -60px; > .tooltip:hover .tooltiptext 
Top Tooltip
 
Place the mouse on the text to get top tooltip
 
Hover over me TechFunda 
  

In the above code snippet we have defined the top tooltip, in order to add the top tooltip we need to add the bottom and margin left properties to get top tooltip

Bottom tooltip

It aligns the tooltip in the bottom by using the properties of top

 .tooltip < position: relative; display: inline-block; border-bottom: 1px dotted black; >.tooltip .tooltiptext < visibility: hidden; width: 120px; background-color: bisque; color: blue ; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; top: 100%; left: 50%; margin-left: -60px; > .tooltip:hover .tooltiptext 
Bottom Tooltip
 
Move the mouse over the text below:
 
Hover over me TechFunda 
  

In the above code snippet we have tooltip bottom, in order to get the bottpom tool tip we ,need to add top and margin left property

Tooltip Arrows

To add the tooltip arrows we need to add empty after tooltip

Bottom Arrows

To add the bottom arrows we need to add the top and empty in the content property in the after property

 .tooltip < position: relative; display: inline-block; border-bottom: 2px solid orange; >.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: black transparent transparent transparent; > .tooltip:hover .tooltiptext 
Top Tooltip w/ Bottom Arrow
 
Place Mouse to get tooltip arrow Tooltip text 
  

In the above code snippet we have the bottom arrow, to create the bottom arrow we need to add top, content as empty in the after selector

Top arrow tooltip

We need to add the bottom property to add top arrow tooltip

 .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 
Bottom Tooltip w/ Top Arrow
 
Place the mouse to get the tooltip arrow Tooltip text 
  

In the above code snippet we have the top tooltip arrow, we need to add the bottom and content as empty property to create top tooltip arrow

Left arrow tooltip

It creates the tooltip in the right side by showing the arrow left side

.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 black transparent transparent; > .tooltip:hover .tooltiptext

In the above code snippet we have created left arrow tooltip, by using the property right and content as empty in the the after selector

Right arow tooltip

It creates the tooltip to right by using left property

 .tooltip < position: relative; display: inline-block; border-bottom: 1px dotted black; >.tooltip .tooltiptext < visibility: hidden; width: 120px; background-color: red; color: pink; 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 transparent black; > .tooltip:hover .tooltiptext 
Left Tooltip w/ Right Arrow
 
Place mouse to get right tooltip arrow Tooltip text 
  

In the above code snippet we have the right arrow tooltip by using the property left and content as empty in the after selector

Источник

CSS Tooltip

A tooltip is often used to specify extra information about something when the user moves the mouse pointer over an element:

Basic Tooltip

Create a tooltip that appears when the user moves the mouse over an element:

Example

/* Tooltip text */
.tooltip .tooltiptext visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;

/* Position the tooltip text — see examples below! */
position: absolute;
z-index: 1;
>

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext visibility: visible;
>

Example Explained

HTML: Use a container element (like ) and add the «tooltip» class to it. When the user mouse over this , it will show the tooltip text.

The tooltip text is placed inside an inline element (like ) with class=»tooltiptext» .

CSS: The tooltip class use position:relative , which is needed to position the tooltip text ( position:absolute ). Note: See examples below on how to position the tooltip.

The tooltiptext class holds the actual tooltip text. It is hidden by default, and will be visible on hover (see below). We have also added some basic styles to it: 120px width, black background color, white text color, centered text, and 5px top and bottom padding.

The CSS border-radius property is used to add rounded corners to the tooltip text.

The :hover selector is used to show the tooltip text when the user moves the mouse over the with class=»tooltip» .

Positioning Tooltips

In this example, the tooltip is placed to the right ( left:105% ) of the «hoverable» text (). Also note that top:-5px is used to place it in the middle of its container element. We use the number 5 because the tooltip text has a top and bottom padding of 5px. If you increase its padding, also increase the value of the top property to ensure that it stays in the middle (if this is something you want). The same applies if you want the tooltip placed to the left.

Источник

Guide to creating CSS only tooltip with an arrow

Tooltip is a nice way to display additional information when there isn’t much space for it. You can create beautiful tooltips using only CSS.

Usually, tooltips are shown on hover state. Below you can see tooltip examples from some of the most popular apps and websites:

NOTE: By default, HTML provides a way to show native tooltip using the title attribute. The tooltip will appear with a slight delay when the user hovers over an element with the title attribute.

Creating a tooltip

Say we have an abbr element and we want to display a nice looking tooltip for it, to let users know what it means:

Before we move any further, we need to tweak the existing HTML a bit.

We’ll add a tooltip class to select it and apply styles via CSS and add the data-tooltip attribute that holds the actual tooltip value, so it looks as follows:

 class="tooltip" data-tooltip="HyperText Markup Language">HTML 

To create a tooltip with only CSS, we’ll need to use the pseudo-element. The pseudo-element has a content attribute that can store its value. We can pass a text, that will be used to display tooltip info.

content: "HyperText Markup Language"; 

To reuse the tooltip component for multiple elements, the pseudo-element content attribute can have an attr() value linked to the element’s HTML attribute.

Styling the tooltip

First, we need to set the position rule for the tooltip class . That way we can properly position our tooltip later. Also, we can add a dotted underline ( abbr tag already has it by default in some browsers) and a help cursor , to indicate that additional information is available.

.tooltip  position: relative; text-decoration: underline dotted; cursor: help; > 

The pseudo-element will look as follows:

.tooltip::before  content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translate(-50%); margin-bottom: 15px; color: #fff; background: rgba(0,0,0, .7); border-radius: 5px; padding: 5px; > 

Tooltip arrow

To create the tooltip arrow, we can use the triangle shape made out of the second pseudo-element border.

.tooltip::after  position: absolute; content: ""; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid rgba(0,0,0, .7); > 

Animating the tooltip

For more appealing interaction we can animate the tooltip by adding a small transition. By adding a zero opacity and a transition property for both pseudo-elements, on hover, we can fade-in tooltip by setting opacity to 0.

.tooltip::before, .tooltip::after  opacity: 0; visibility: hidden; transition: opacity .3s ease-in-out; > .tooltip:hover::before, .tooltip:hover::after  opacity: 1; visibility: visible; > 

Positioning the tooltip

The provided example will create a tooltip above the element. However, that’s not always the case. You may want to display your tooltip below, left, or right of an element.

For that reason, we can create modification classes (using BEM principle). So in total, we’ll have four additional classes to set tooltip position:

.tooltip--top::before, .tooltip--top::after  bottom: 100%; left: 50%; transform: translate(-50%); margin-bottom: 15px; > .tooltip--top::after  margin-bottom: 8px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid rgba(0,0,0, .7); > .tooltip--bottom::before, .tooltip--bottom::after  top: 100%; left: 50%; transform: translate(-50%); margin-top: 15px; > .tooltip--bottom::after  margin-top: 8px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 7px solid rgba(0,0,0, .7); > .tooltip--right::before, .tooltip--right::after  top: 50%; left: 100%; transform: translate(0, -50%); margin-left: 15px; > .tooltip--right::after  margin-left: 8px; border-top: 5px solid transparent; border-right: 7px solid rgba(0,0,0, .7); border-bottom: 5px solid transparent; > .tooltip--left::before, .tooltip--left::after  top: 50%; right: 100%; transform: translate(0, -50%); margin-right: 15px; > .tooltip--left::after  margin-right: 8px; border-top: 5px solid transparent; border-left: 7px solid rgba(0,0,0, .7); border-bottom: 5px solid transparent; > 

End result

You will find the resulting tooltips and the complete code example on CodePen:

See the Pen Untitled by Tippingpoint Dev (@tippingpointdev) on CodePen.

Источник

CSS Tooltip

A tooltip is often used to specify extra information about something when the user moves the mouse pointer over an element:

Basic Tooltip

Create a tooltip that appears when the user moves the mouse over an element:

Example

/* Tooltip text */
.tooltip .tooltiptext visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;

/* Position the tooltip text — see examples below! */
position: absolute;
z-index: 1;
>

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext visibility: visible;
>

Example Explained

HTML: Use a container element (like ) and add the «tooltip» class to it. When the user mouse over this , it will show the tooltip text.

The tooltip text is placed inside an inline element (like ) with class=»tooltiptext» .

CSS: The tooltip class use position:relative , which is needed to position the tooltip text ( position:absolute ). Note: See examples below on how to position the tooltip.

The tooltiptext class holds the actual tooltip text. It is hidden by default, and will be visible on hover (see below). We have also added some basic styles to it: 120px width, black background color, white text color, centered text, and 5px top and bottom padding.

The CSS border-radius property is used to add rounded corners to the tooltip text.

The :hover selector is used to show the tooltip text when the user moves the mouse over the with class=»tooltip» .

Positioning Tooltips

In this example, the tooltip is placed to the right ( left:105% ) of the «hoverable» text (). Also note that top:-5px is used to place it in the middle of its container element. We use the number 5 because the tooltip text has a top and bottom padding of 5px. If you increase its padding, also increase the value of the top property to ensure that it stays in the middle (if this is something you want). The same applies if you want the tooltip placed to the left.

Источник