Javatpoint Logo
Javatpoint Logo

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:

Test it Now

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:

Test it Now

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:

Test it Now

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:

Test it Now
Next TopicCSS3 Flexbox




Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


Preparation


B.Tech / MCA