Tooltip Shortcode Example

Tooltips are a great way to provide popout tips for your readers. They can be added to elements like links, buttons and social icons, making it a great way to add additional info to your post without adding clutter.

Tooltip Shortcode

Four businesspeople at boardroom table watching presentation
Ut gravida nunc semper ante tristique, eu ornare ex rutrum. Nullam a dolor eget urna vehicula molestie id a nibh. Mauris lorem neque, ultricies nec magna a, egestas euismod ex. Praesent et lobortis ipsum. Pellentesque pharetra ligula a elementum molestie.Mouse hover here. Integer pellentesque ullamcorper sollicitudin. Nunc non eros urna. Etiam pharetra vitae sapien eu blandit. Vivamus et libero vel nibh malesuada posuere.

Morbi erat tortor, lacinia a massa nec, accumsan mollis nulla. Pellentesque scelerisque viverra ligula. Quisque mattis laoreet odio, ac bibendum lacus feugiat vitae. Quisque placerat non lacus finibus facilisis. Nullam in cursus diam, vel porttitor odio. Cras sollicitudin libero vitae metus feugiat iaculis.

Mouse Hover Here
Get the code

Tooltip Trigger : Hover

Morbi et tortor varius, porttitor velit at, fermentum diam. Maecenas dictum mauris massa, nec vehicula nisl efficitur non. Mouse hover here. Integer lorem lorem, porta id velit non, consectetur auctor erat. Cras eget cursus urna, ut fringilla lorem. Vestibulum pellentesque nisl vitae arcu convallis, a placerat nisl feugiat. Pellentesque at sem vitae orci condimentum sollicitudin ultrices fermentum dolor.

Praesent dapibus, magna at semper semper, eros nibh volutpat leo, quis laoreet lacus turpis vitae diam. Nunc semper interdum massa, ut tristique metus ultrices eu. Sed non orci nec nisi congue cursus. Pellentesque risus purus, dapibus non lacus eu, rutrum placerat eros. Mouse Hover Here. Mauris vel felis at libero faucibus pulvinar. Fusce consequat dictum mi non condimentum. Donec eros metus, aliquet eu dictum quis, elementum ac ligula. Phasellus ullamcorper vitae diam eget maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas finibus eget nulla ac cursus. Sed nec augue a libero commodo accumsan vel id lectus. Suspendisse aliquam quam vitae risus facilisis blandit. Nullam ut sem quis felis suscipit sollicitudin. Sed non ipsum et ante eleifend rhoncus. Duis lacinia sem sit amet magna vehicula mattis.
Four businesspeople at boardroom table watching presentation
Get the code

Tooltip Trigger : Click

Morbi et tortor varius, porttitor velit at, fermentum diam. Maecenas dictum mauris massa, nec vehicula nisl efficitur non. Mouse click here. Integer lorem lorem, porta id velit non, consectetur auctor erat. Cras eget cursus urna, ut fringilla lorem. Vestibulum pellentesque nisl vitae arcu convallis, a placerat nisl feugiat. Pellentesque at sem vitae orci condimentum sollicitudin ultrices fermentum dolor.

pp1
Praesent dapibus, magna at semper semper, eros nibh volutpat leo, quis laoreet lacus turpis vitae diam. Nunc semper interdum massa, ut tristique metus ultrices eu. Sed non orci nec nisi congue cursus. Pellentesque risus purus, dapibus non lacus eu, rutrum placerat eros. Mouse click Here. Mauris vel felis at libero faucibus pulvinar. Fusce consequat dictum mi non condimentum. Donec eros metus, aliquet eu dictum quis, elementum ac ligula. Phasellus ullamcorper vitae diam eget maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas finibus eget nulla ac cursus. Sed nec augue a libero commodo accumsan vel id lectus. Suspendisse aliquam quam vitae risus facilisis blandit. Nullam ut sem quis felis suscipit sollicitudin. Sed non ipsum et ante eleifend rhoncus. Duis lacinia sem sit amet magna vehicula mattis.
Get the code

Tooltip Placement

smartphone-925287_1920

Tooltip On Top
Curabitur egestas tortor eu nisl tristique, in tempus est finibus. Sed ligula nibh, dapibus eget mattis et, egestas in felis.

Get the code
macbook-924824_1920

Tooltip On Bottom
Curabitur egestas tortor eu nisl tristique, in tempus est finibus. Sed ligula nibh, dapibus eget mattis et, egestas in felis.

Get the code
macbook-925614_1920

Tooltip On Left
Curabitur egestas tortor eu nisl tristique, in tempus est finibus. Sed ligula nibh, dapibus eget mattis et, egestas in felis.

Get the code
smartphone-925758_1920

Tooltip On Right
Curabitur egestas tortor eu nisl tristique, in tempus est finibus. Sed ligula nibh, dapibus eget mattis et, egestas in felis.

Get the code