CSS Arrow
The CSS arrow is used to add an array along with tooltip. It makes the tooltip like a speech bubble. It can also be represented in four ways:
- Top arrow
- Bottom arrow
- Left arrow
- Right arrow
CSS Top Arrow
The top arrow is used to add an arrow like structure on the top of the tooltip when you move your mouse cursor over the element. It will display the tooltip on the bottom of the element.
See this example:
CSS Bottom Arrow
The bottom arrow is used to add an arrow like structure on the bottom of the tooltip when you move your mouse cursor over the element. It will display the tooltip on the top of the element.
See this example:
CSS Left Arrow
The left arrow is used to add an arrow like structure on the left of the tooltip when you move your mouse cursor over the element. It will display the tooltip on the right of the element.
See this example:
CSS Right Arrow
The right arrow is used to add an arrow like structure on the right of the tooltip when you move your mouse cursor over the element. It will display the tooltip on the left of the element.
See this example: