How to Create Bubble Tooltips Using Pure CSS
How the above code works and How bubble tooltips can be created using pure CSS ?
Here the bubble tooltips are created only using CSS.
It uses CSS pseudo-elements “:before” and “: after” to crate the bubble tooltips which is a combination of two shapes.
“:before” pseudo-element is used to insert content before the content of the link and :after" pseudo-element is used to insert some content after the content of an element.
Here “:before” pseudo-element of CSS creates a triangle before the link and “:after” pseudo-element of CSS create a rectangle after the link using the CSS shape creation techniques. These shapes are positioned using left, right, top and bottom properties of CSS such that these overlaps and create a bubble tooptip.
These shapes are kept hidden using the visibility Property. The shapes becomes visible as it is specified in the hoever selector.
Here we use “content: attr(bubbletooltip);” to retrieve the value of an attribute of the selected element and use it in the style sheet . Hence we can specify the content of bubble tooltip as bubbletooltip="the content to be displayed"
Post Your Comment