{"id":28617,"date":"2020-02-19T11:46:00","date_gmt":"2020-02-19T09:46:00","guid":{"rendered":"https:\/\/themeisle.com\/blog\/?p=28617"},"modified":"2024-09-10T21:45:04","modified_gmt":"2024-09-10T18:45:04","slug":"wordpress-tooltip-tutorial","status":"publish","type":"post","link":"https:\/\/themeisle.com\/blog\/wordpress-tooltip-tutorial\/","title":{"rendered":"How to Add a WordPress Tooltip in 3 Ways: Free Plugin or CSS"},"content":{"rendered":"\n<p>There are times when you need to give your website visitors more information, but including it directly on the page doesn&rsquo;t make sense. One possible solution is to include a link to somewhere else that contains the information. However, in many cases, this isn&rsquo;t necessary. Instead, what you can do is add a simple <span id=\"tooltipText\" class=\"tooltip\">WordPress tooltip<span class=\"tooltiptext\">Tooltips are sometimes also called <em>CSS hover tooltips<\/em> and this is an example of one.<\/span><\/span> that displays the information when visitors hover over a piece of text or an emoji.<\/p>\n\n<style>\n.tooltip {\n  position: relative;\n  display: inline-block;\n  cursor: help;\n  border-bottom: 1px dotted #4267cf;\n}\n\n.tooltip .tooltiptext {\n  visibility: hidden;\n  width: 200px;\n  background-color: #555;\n  color: #fff;\n  text-align: left;\n  padding: 10px;\n  border-radius: 6px;\n  position: absolute;\n  z-index: 1;\n  bottom: 150%;\n  left: 50%;\n  margin-left: -100px;\n  opacity: 0;\n  transition: opacity 0.3s;\n  font-size: 16px;\n  line-height: 1.5;\n}\n\n.tooltip:hover .tooltiptext {\n  visibility: visible;\n  opacity: 1;\n}\n<\/style>\n\n\n\n<!--more-->\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>In this article, we&rsquo;ll show you some of our favorite examples of tooltips in action. Then we&rsquo;ll teach you how to add them to your website with and without plugins.<\/p>\n\n\n\n<p>Let&rsquo;s dive in! &#127806;<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n\t\t<div class=\"ti-tweet-clear\"><\/div>\n\t\t\t<div class=\"ti-tweet_wrapper\">\n\t\t    \t<div class=\"ti-tweet_text\">\n\t\t    \t\t<a href=\"https:\/\/twitter.com\/share?text=Want+to+add+hover+tooltips+to++%23WordPress+%F0%9F%A4%94+three+easy+methods+-+%23plugin+or+%23CSS+%F0%9F%94%8C%F0%9F%8E%A8&amp;via=themeisle&amp;related=themeisle&amp;url=https:\/\/themeisle.com\/blog\/wordpress-tooltip-tutorial\/\" target=\"_blank\" rel=\"nofollow\">Want to add hover tooltips to  #WordPress &#129300; three easy methods - #plugin or #CSS &#128268;&#127912;<\/a>\n\t\t    \t<\/div>\n\t\t    \t<div class=\"ti-tweet_sharebtn\">\n\t\t    \t<a href=\"https:\/\/twitter.com\/share?text=Want+to+add+hover+tooltips+to++%23WordPress+%F0%9F%A4%94+three+easy+methods+-+%23plugin+or+%23CSS+%F0%9F%94%8C%F0%9F%8E%A8&amp;via=themeisle&amp;related=themeisle&amp;url=https:\/\/themeisle.com\/blog\/wordpress-tooltip-tutorial\/\" target=\"_blank\" rel=\"nofollow\">Click To Tweet \n\t\t    \t\t<span><\/span>\n\t\t    \t<\/a>\n\t\t    <\/div>\n\t\t<\/div>\n<\/div>\n<\/div>\n\n\n<div class=\"su-divider su-divider-style-dotted\" style=\"margin:40px 0;border-width:1px;border-color:#999999\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading joli-heading jtoc-heading\" id=\"css-hover-tooltips\">An introduction to CSS hover tooltips<\/h2>\n\n\n\n<p>The concept of a WordPress tooltip is simple. They&rsquo;re floating containers that &lsquo;pop-up&rsquo; when you mouse over specific elements.<\/p>\n\n\n<div class=\"wp-block-image blog-img-std\">\n<figure class=\"aligncenter size-full\"><video autoplay muted loop playsinline poster="https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2020\/01\/tooltip-animation.gif" decoding=\"async\" width=\"1010\" height=\"386\" original-src=\"https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2020\/01\/tooltip-animation.gif\" alt=\"Two examples of animated tooltips.\" class=\"wp-image-28638\"><\/figure><\/div>\n\n\n<p>Usually, hover tooltips provide additional information you don&rsquo;t want to include in the original design.<\/p>\n\n\n\n<p>For example, if you&rsquo;re <a href=\"https:\/\/themeisle.com\/blog\/create-wordpress-pricing-tables\/\">building a pricing table,<\/a> tooltips can help you break down what each feature does without bulking up the design:<\/p>\n\n\n<div class=\"wp-block-image blog-img-std\">\n<figure class=\"aligncenter size-full\"><img data-opt-id=959464459  fetchpriority=\"high\" decoding=\"async\" width=\"696\" height=\"288\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2020\/01\/mouse-over-example.png\" alt=\"An example of a table including CSS hover tooltips.\" class=\"wp-image-28624\" srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:696\/h:288\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2020\/01\/mouse-over-example.png 696w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:124\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2020\/01\/mouse-over-example.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:21\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2020\/01\/mouse-over-example.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:480\/h:199\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2020\/01\/mouse-over-example.png 480w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:296\/h:122\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2020\/01\/mouse-over-example.png 296w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:390\/h:161\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2020\/01\/mouse-over-example.png 390w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:270\/h:112\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2020\/01\/mouse-over-example.png 270w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:696\/h:288\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2020\/01\/mouse-over-example.png 2x\" sizes=\"(max-width: 696px) 100vw, 696px\"><\/figure><\/div>\n\n\n<p>Other use cases include word definitions, adding sources to your content, editorial comments, <a href=\"https:\/\/themeisle.com\/blog\/add-google-maps-to-wordpress\/\">maps<\/a>, and pretty much any other element you can think of.<\/p>\n\n\n<div class=\"wp-block-image blog-img-std\">\n<figure class=\"aligncenter size-full\"><img data-opt-id=1228528464  fetchpriority=\"high\" decoding=\"async\" width=\"697\" height=\"303\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2020\/01\/map-tooltip.png\" alt=\"A map including a tooltip.\" class=\"wp-image-28625\" srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:697\/h:303\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2020\/01\/map-tooltip.png 697w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:130\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2020\/01\/map-tooltip.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:22\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2020\/01\/map-tooltip.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:480\/h:209\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2020\/01\/map-tooltip.png 480w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:296\/h:129\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2020\/01\/map-tooltip.png 296w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:390\/h:170\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2020\/01\/map-tooltip.png 390w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:270\/h:117\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2020\/01\/map-tooltip.png 270w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:697\/h:303\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2020\/01\/map-tooltip.png 2x\" sizes=\"(max-width: 697px) 100vw, 697px\"><\/figure><\/div>\n\n<div class=\"su-divider su-divider-style-dotted\" style=\"margin:40px 0;border-width:1px;border-color:#999999\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading joli-heading jtoc-heading\" id=\"how-to-add\">Three ways to add a WordPress tooltip<\/h2>\n\n\n\n<p>WordPress enables you to use multiple approaches when it comes to adding tooltips to your website. You can either do so manually (which involves adding some code) or use a plugin.<\/p>\n\n\n\n<p>We&rsquo;ll start by showing you how to add tooltips with a free WordPress tooltip plugin. Then, we&rsquo;ll dig into two manual CSS methods.<\/p>\n\n\n\n<p>The first one can be used with either <a href=\"https:\/\/themeisle.com\/blog\/wordpress-block-themes\/\">block themes<\/a> or classic themes (as long as you are using the default Gutenberg editor), while the second one works with classic themes (or hybrid themes) that have access to the <a href=\"https:\/\/themeisle.com\/blog\/wordpress-customizer-how-to\/\">WordPress Customizer<\/a>.<\/p>\n\n\n    \r\n    <style>\r\n        :root {\r\n        --jtoc-progress-bar-color: #4267cf;\n        }\r\n                    .wpj-jtoc.--jtoc-theme-none.--jtoc-has-custom-styles {\r\n        --jtoc-width: 100%;\n--jtoc-toc-padding: 24px;\n--jtoc-toc-border: 1px solid;\n--jtoc-toc-border-color: #dedede;\n--jtoc-background-color: #f6f7f9;\n--jtoc-header-height: 20px;\n--jtoc-header-margin: 0;\n--jtoc-header-padding: 0;\n--jtoc-title-color: #393939;\n--jtoc-title-font-size: 1.2em;\n--jtoc-title-label-font-weight: 400;\n--jtoc-body-margin: 16px 0 0 0;\n--jtoc-body-padding: 0;\n--jtoc-headings-margin: 10px 0 0 0;\n--jtoc-link-font-size: 1em;\n--jtoc-link-font-weight: 400;\n--jtoc-link-color: #848484;\n--jtoc-link-color-hover: #4a66c8;\n--jtoc-link-color-active: #4a66c8;\n        }\r\n        .--jtoc-the-content{\r\ndisplay:none;\r\n}\r\n.--jtoc-is-active>.wpj-jtoc--item-content>a:before{\r\nmargin-left:3px;\r\n}\r\n.wpj-jtoc--nav>.wpj-jtoc--items li a::before{\r\ncontent:'\\203A';\r\ndisplay:block;\r\nfloat:left;\r\nheight:100%;\r\nfont-weight:700;\r\ncolor:#4267CF;\r\nline-height: 20px;\r\nmargin-right: 3px;\r\n}\r\n.sidebar .wpj-jtoc--toc{\r\nborder:0;\r\npadding:0;\r\n}\r\n.sidebar .wpj-jtoc--header,\r\n.sidebar .wpj-jtoc--body{\r\nbackground:transparent;\r\n}\r\n\r\n.sidebar .--jtoc-is-active>.wpj-jtoc--item-content>a{\r\ntext-decoration:none;\r\n}\r\n.sidebar-left .widget-first{\r\nposition:sticky;\r\ntop:70px;\r\nmargin-bottom:1250px;\r\n}\r\n.sidebar-left{\r\ndisplay:none;\r\nmax-width:300px;\r\nposition:absolute;\r\nleft:-330px;\r\ntop:0;\r\nheight:100%;\r\n}\r\n@media only screen and (max-width: 1900px) {\r\n.single-post .sidebar-left{\r\ndisplay:none !important;\r\n}\r\n.--jtoc-the-content{\r\ndisplay:block;\r\n}\r\n@media only screen and (max-width: 400px) {\r\n.wpj-jtoc--item .wpj-jtoc--item-content{\r\nmargin-top:5px;\r\n}\r\n.wpj-jtoc--header-main .wpj-jtoc--title{\r\nfont-size:1.1em;\r\n}\r\n}    <\/style>\r\n\r\n\r\n    <!-- jtoc progress bar widget -->\r\n    <div class=\"wpj-jtoc--widget-progress --progress-top\">\r\n        <div class=\"wpj-jtoc--widget-progress-bar\"><\/div>\r\n    <\/div>\r\n\r\n<div id=\"wpj-jtoc\" class=\"wpj-jtoc wpj-jtoc--main --jtoc-the-content --jtoc-theme-none --jtoc-title-align-left --jtoc-toggle-icon --jtoc-toggle-position-right --jtoc-toggle-1 --jtoc-header-as-toggle --jtoc-headings-full-row-clickable --jtoc-floating-toc-top --jtoc-floating-has-shadow --jtoc-has-custom-styles --jtoc-is-unfolded\" >\r\n            \r\n    <!-- TOC -->\r\n    <div class=\"wpj-jtoc--toc \">\r\n                            <div class=\"wpj-jtoc--header\">\r\n                <div class=\"wpj-jtoc--header-main\">\r\n                                        <div class=\"wpj-jtoc--title\">\r\n                        <!-- <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-columns-3\"><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"\/><path d=\"M9 3v18\"\/><path d=\"M15 3v18\"\/><\/svg> -->\r\n                        <span class=\"wpj-jtoc--title-label\">Table of contents<\/span>\r\n                    <\/div>\r\n                                                        <\/div>\r\n            <\/div>\r\n                                <div class=\"wpj-jtoc--body\">\r\n                        <nav class=\"wpj-jtoc--nav\">\r\n                <ol class=\"wpj-jtoc--items\"><li class=\"wpj-jtoc--item --jtoc-h2\">\r\n        <div class=\"wpj-jtoc--item-content\" data-depth=\"2\">\r\n                        <a href=\"#use-a-wordpress-tooltip-plugin\" title=\"1. Use a WordPress tooltip plugin \ud83d\udd0c\" data-numeration=\"1\" >1. Use a WordPress tooltip plugin \ud83d\udd0c<\/a>\r\n                    <\/div> <\/li><li class=\"wpj-jtoc--item --jtoc-h2\">\r\n        <div class=\"wpj-jtoc--item-content\" data-depth=\"2\">\r\n                        <a href=\"#set-up-tooltips-manually-using-the-html-block\" title=\"2. Set up tooltips manually using the custom HTML block \ud83d\udc68\u200d\ud83d\udcbb\" data-numeration=\"2\" >2. Set up tooltips manually using the custom HTML block \ud83d\udc68\u200d\ud83d\udcbb<\/a>\r\n                    <\/div> <\/li><li class=\"wpj-jtoc--item --jtoc-h2\">\r\n        <div class=\"wpj-jtoc--item-content\" data-depth=\"2\">\r\n                        <a href=\"#set-up-tooltips-manually-using-the-customizer\" title=\"3. Set up tooltips manually using the Customizer \ud83d\udc68\u200d\ud83d\udcbb\" data-numeration=\"3\" >3. Set up tooltips manually using the Customizer \ud83d\udc68\u200d\ud83d\udcbb<\/a>\r\n                    <\/div> <\/li><\/ol>            <\/nav>\r\n                                                        <\/div>\r\n            <\/div>\r\n<\/div>\r\n\n\n<div class=\"su-divider su-divider-style-default\" style=\"margin:40px 0;border-width:15px;border-color:#4267cf\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading joli-heading jtoc-heading\" id=\"use-a-wordpress-tooltip-plugin\">1. Use a WordPress tooltip plugin &#128268;<\/h3>\n\n\n\n<p>The whole point of using plugins is to save you time adding a feature manually. With this in mind, Shortcodes Ultimate offers one of the easiest tooltip implementations for WordPress users.<\/p>\n\n\n<div class=\"wp-pic-wrapper align-center large\" style=\"margin:20px 0;\"><div class=\"wp-pic large plugin wp-pic-ajax scheme2\" id=\"wp-pic-shortcodes-ultimate\" data-type=\"plugin\" data-slug=\"shortcodes-ultimate\" data-image=\"\" data-expiration=\"\" data-layout=\"large\" data-slugs=\"[]\"><div class=\"wp-pic-body-loading\"><div class=\"signal\"><\/div><\/div><\/div><\/div><!-- .wp-pic-wrapper--><link rel=\"stylesheet\" id=\"dashicons-css\" href=\"https:\/\/themeisle.com\/blog\/wp-includes\/css\/dashicons.min.css?ver=6.8.5\" type=\"text\/css\" media=\"all\">\n<link rel=\"stylesheet\" id=\"wppic-style-css\" href=\"https:\/\/themeisle.com\/blog\/wp-content\/plugins\/wp-plugin-info-card\/dist\/wppic-styles.css?ver=6.1.1\" type=\"text\/css\" media=\"all\">\n<script type=\"text\/javascript\" src=\"https:\/\/themeisle.com\/blog\/wp-includes\/js\/jquery\/jquery.min.js?ver=3.7.1\" id=\"jquery-core-js\"><\/script>\n<script type=\"text\/javascript\" src=\"https:\/\/themeisle.com\/blog\/wp-includes\/js\/jquery\/jquery-migrate.min.js?ver=3.4.1\" id=\"jquery-migrate-js\"><\/script>\n<script type=\"text\/javascript\" id=\"wppic-script-js-extra\">\n\/* <![CDATA[ *\/\nvar wppicAjax = {\"ajaxurl\":\"https:\\\/\\\/themeisle.com\\\/blog\\\/wp-admin\\\/admin-ajax.php\"};\n\/* ]]> *\/\n<\/script>\n<script type=\"text\/javascript\" src=\"https:\/\/themeisle.com\/blog\/wp-content\/plugins\/wp-plugin-info-card\/assets\/js\/wppic-script.min.js?ver=6.1.1\" id=\"wppic-script-js\"><\/script>\n\n\n\n\n<p>Once you enable the plugin, you get access to dozens of shortcodes you can use to add anything from buttons, to sliders, image carousels, dividers, etc.<\/p>\n\n\n\n<p>Tooltips are, of course, among the list of elements supported by Shortcodes Ultimate. Even better, every shortcode is fully customizable using built-in settings and CSS.<\/p>\n\n\n\n<p>To get started, <a href=\"https:\/\/themeisle.com\/blog\/what-is-gutenberg\/\">open the Block Editor<\/a> for the page where you want to add your first WordPress tooltip. Then, look for the new <em>Insert shortcode <\/em>button on any existing block&rsquo;s menu:<\/p>\n\n\n<div class=\"wp-block-image blog-img-std\">\n<figure class=\"aligncenter size-full\"><img data-opt-id=992041370  fetchpriority=\"high\" decoding=\"async\" width=\"1400\" height=\"334\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/insert-shortcode.png\" alt=\"Inserting a new shortcode.\" class=\"wp-image-92727\" srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1400\/h:334\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/insert-shortcode.png 1400w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:72\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/insert-shortcode.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:244\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/insert-shortcode.png 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:183\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/insert-shortcode.png 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:12\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/insert-shortcode.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:480\/h:115\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/insert-shortcode.png 480w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:794\/h:189\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/insert-shortcode.png 794w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1200\/h:286\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/insert-shortcode.png 1200w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:296\/h:71\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/insert-shortcode.png 296w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:390\/h:93\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/insert-shortcode.png 390w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:270\/h:64\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/insert-shortcode.png 270w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1400\/h:334\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/insert-shortcode.png 2x\" sizes=\"(max-width: 700px) 100vw, 700px\"><\/figure><\/div>\n\n\n<p>Right away, you&rsquo;ll see a list of available shortcodes. Select the <em>Tooltip <\/em>option:<\/p>\n\n\n<div class=\"wp-block-image blog-img-std\">\n<figure class=\"aligncenter size-full\"><img data-opt-id=798348855  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-shortcode.png\"  decoding=\"async\" width=\"1536\" height=\"552\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-shortcode.png\" alt=\"Adding a tooltip shortcode.\" class=\"wp-image-92728\" old-srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1536\/h:552\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-shortcode.png 1536w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:108\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-shortcode.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:368\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-shortcode.png 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:276\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-shortcode.png 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:18\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-shortcode.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:480\/h:173\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-shortcode.png 480w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:794\/h:285\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-shortcode.png 794w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1200\/h:431\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-shortcode.png 1200w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:296\/h:106\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-shortcode.png 296w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:390\/h:140\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-shortcode.png 390w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:270\/h:97\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-shortcode.png 270w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1536\/h:552\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-shortcode.png 2x\"><noscript><img data-opt-id=798348855  decoding=\"async\" width=\"1536\" height=\"552\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-shortcode.png\" alt=\"Adding a tooltip shortcode.\" class=\"wp-image-92728\" srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1536\/h:552\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-shortcode.png 1536w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:108\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-shortcode.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:368\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-shortcode.png 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:276\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-shortcode.png 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:18\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-shortcode.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:480\/h:173\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-shortcode.png 480w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:794\/h:285\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-shortcode.png 794w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1200\/h:431\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-shortcode.png 1200w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:296\/h:106\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-shortcode.png 296w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:390\/h:140\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-shortcode.png 390w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:270\/h:97\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-shortcode.png 270w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1536\/h:552\/q:mauto\/f:best\/dpr:2\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-shortcode.png 2x\" sizes=\"(max-width: 700px) 100vw, 700px\"></noscript><\/figure><\/div>\n\n\n<p>Now you get the chance to customize your tooltip&rsquo;s style. We&rsquo;ve decided to go for a basic dark design and position it on top of the element you mouse over:<\/p>\n\n\n<div class=\"wp-block-image blog-img-std\">\n<figure class=\"aligncenter size-full\"><img data-opt-id=272348720  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-settings.png\"  decoding=\"async\" width=\"1501\" height=\"743\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-settings.png\" alt=\"Customizing your tooltip.\" class=\"wp-image-92729\" old-srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1501\/h:743\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-settings.png 1501w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:149\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-settings.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:507\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-settings.png 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:380\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-settings.png 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:25\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-settings.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:480\/h:238\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-settings.png 480w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:794\/h:393\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-settings.png 794w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1200\/h:594\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-settings.png 1200w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:296\/h:148\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-settings.png 296w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:390\/h:193\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-settings.png 390w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:270\/h:135\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-settings.png 270w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1501\/h:743\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-settings.png 2x\"><noscript><img data-opt-id=272348720  decoding=\"async\" width=\"1501\" height=\"743\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-settings.png\" alt=\"Customizing your tooltip.\" class=\"wp-image-92729\" srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1501\/h:743\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-settings.png 1501w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:149\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-settings.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:507\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-settings.png 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:380\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-settings.png 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:25\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-settings.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:480\/h:238\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-settings.png 480w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:794\/h:393\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-settings.png 794w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1200\/h:594\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-settings.png 1200w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:296\/h:148\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-settings.png 296w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:390\/h:193\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-settings.png 390w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:270\/h:135\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-settings.png 270w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1501\/h:743\/q:mauto\/f:best\/dpr:2\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-settings.png 2x\" sizes=\"(max-width: 700px) 100vw, 700px\"></noscript><\/figure><\/div>\n\n\n<p>Scroll down until you reach the <em>Tooltip Content <\/em>field and enter the text you want the element to display:<\/p>\n\n\n<div class=\"wp-block-image blog-img-std\">\n<figure class=\"aligncenter size-full\"><img data-opt-id=47018523  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-content.png\"  decoding=\"async\" width=\"1471\" height=\"709\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-content.png\" alt=\"Adding your tooltip's content.\" class=\"wp-image-92730\" old-srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1471\/h:709\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-content.png 1471w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:145\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-content.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:494\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-content.png 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:370\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-content.png 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:24\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-content.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:480\/h:231\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-content.png 480w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:794\/h:383\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-content.png 794w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1200\/h:578\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-content.png 1200w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:296\/h:143\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-content.png 296w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:390\/h:188\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-content.png 390w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:270\/h:130\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-content.png 270w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1471\/h:709\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-content.png 2x\"><noscript><img data-opt-id=47018523  decoding=\"async\" width=\"1471\" height=\"709\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-content.png\" alt=\"Adding your tooltip's content.\" class=\"wp-image-92730\" srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1471\/h:709\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-content.png 1471w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:145\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-content.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:494\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-content.png 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:370\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-content.png 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:24\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-content.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:480\/h:231\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-content.png 480w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:794\/h:383\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-content.png 794w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1200\/h:578\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-content.png 1200w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:296\/h:143\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-content.png 296w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:390\/h:188\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-content.png 390w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:270\/h:130\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-content.png 270w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1471\/h:709\/q:mauto\/f:best\/dpr:2\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-content.png 2x\" sizes=\"(max-width: 700px) 100vw, 700px\"></noscript><\/figure><\/div>\n\n\n<p>Notice you can also configure the way your tooltip should behave. The default option will hide the container and text until you mouse over its parent element. You can also configure tooltips so they don&rsquo;t show up unless you click on the parent element, but that tends to create a hassle for visitors.<\/p>\n\n\n\n<p>Here&rsquo;s what your new shortcode will look like within the Block Editor:<\/p>\n\n\n<div class=\"wp-block-image blog-img-std\">\n<figure class=\"aligncenter size-full\"><img data-opt-id=344813397  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-editor.png\"  decoding=\"async\" width=\"1553\" height=\"465\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-editor.png\" alt=\"An example of a tooltip's shortcode.\" class=\"wp-image-92731\" old-srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1553\/h:465\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-editor.png 1553w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:90\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-editor.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:307\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-editor.png 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:230\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-editor.png 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1536\/h:460\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-editor.png 1536w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:15\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-editor.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:480\/h:144\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-editor.png 480w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:794\/h:238\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-editor.png 794w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1200\/h:359\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-editor.png 1200w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:296\/h:89\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-editor.png 296w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:390\/h:117\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-editor.png 390w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:270\/h:81\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-editor.png 270w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1553\/h:465\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-editor.png 2x\"><noscript><img data-opt-id=344813397  decoding=\"async\" width=\"1553\" height=\"465\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-editor.png\" alt=\"An example of a tooltip's shortcode.\" class=\"wp-image-92731\" srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1553\/h:465\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-editor.png 1553w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:90\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-editor.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:307\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-editor.png 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:230\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-editor.png 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1536\/h:460\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-editor.png 1536w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:15\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-editor.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:480\/h:144\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-editor.png 480w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:794\/h:238\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-editor.png 794w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1200\/h:359\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-editor.png 1200w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:296\/h:89\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-editor.png 296w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:390\/h:117\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-editor.png 390w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:270\/h:81\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-editor.png 270w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1553\/h:465\/q:mauto\/f:best\/dpr:2\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-editor.png 2x\" sizes=\"(max-width: 700px) 100vw, 700px\"></noscript><\/figure><\/div>\n\n\n<p>And if you preview this on the front end, here&rsquo;s how the tooltip works:<\/p>\n\n\n<div class=\"wp-block-image blog-img-std\">\n<figure class=\"aligncenter size-full\"><img data-opt-id=1088551746  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-example.png\"  decoding=\"async\" width=\"1599\" height=\"332\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-example.png\" alt=\"A simple Shortcodes Ultimate toolip.\" class=\"wp-image-92732\" old-srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1599\/h:332\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-example.png 1599w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:62\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-example.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:213\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-example.png 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:159\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-example.png 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1536\/h:319\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-example.png 1536w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:10\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-example.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:480\/h:100\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-example.png 480w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:794\/h:165\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-example.png 794w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1200\/h:249\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-example.png 1200w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:296\/h:61\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-example.png 296w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:390\/h:81\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-example.png 390w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:270\/h:56\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-example.png 270w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1599\/h:332\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-example.png 2x\"><noscript><img data-opt-id=1088551746  decoding=\"async\" width=\"1599\" height=\"332\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-example.png\" alt=\"A simple Shortcodes Ultimate toolip.\" class=\"wp-image-92732\" srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1599\/h:332\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-example.png 1599w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:62\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-example.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:213\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-example.png 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:159\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-example.png 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1536\/h:319\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-example.png 1536w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:10\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-example.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:480\/h:100\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-example.png 480w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:794\/h:165\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-example.png 794w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1200\/h:249\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-example.png 1200w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:296\/h:61\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-example.png 296w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:390\/h:81\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-example.png 390w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:270\/h:56\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-example.png 270w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1599\/h:332\/q:mauto\/f:best\/dpr:2\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-example.png 2x\" sizes=\"(max-width: 700px) 100vw, 700px\"></noscript><\/figure><\/div>\n\n\n<p>Keep in mind, you can add tooltips almost anywhere you want using the right shortcode. This goes for regular text, tables, icons, and other elements.<\/p>\n\n\n\n<p>However, as a rule of thumb, you want to add some visual indicator to let users know they should mouse over the parent element. Underlining or color variations work well. You can also use <a href=\"https:\/\/emojipedia.org\/information\/\" target=\"_blank\" rel=\"noopener\">the information emoji<\/a> (&#9888;&#65039;).<\/p>\n\n\n<div class=\"su-divider su-divider-style-default\" style=\"margin:40px 0;border-width:15px;border-color:#4267cf\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading joli-heading jtoc-heading\" id=\"set-up-tooltips-manually-using-the-html-block\">2. Set up tooltips manually using the custom HTML block &#128104;&zwj;&#128187;<\/h3>\n\n\n\n<p>In the previous section, we talked about how to add tooltips using a plugin. The plugin essentially sets up multiple CSS styles for you. This means you choose from a list of settings, and the plugin generates the requisite shortcode.<\/p>\n\n\n\n<p>However, there&rsquo;s no reason why you can&rsquo;t do this manually with code. The easiest way to add some new <a href=\"https:\/\/themeisle.com\/blog\/css-classes\/\">CSS classes<\/a> to your theme is to use the custom HTML block inside the block editor.<\/p>\n\n\n\n<p>To begin, simply click the plus sign to add a new block wherever you want the tooltip to go. Then in the search bar type in &ldquo;html&rdquo; and select the <em>Custom HTML block<\/em>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full blog-img-std\"><img data-opt-id=465196450  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-the-custom-HTML-block-inside-the-WordPress-block-editor-scaled.webp\"  decoding=\"async\" width=\"2560\" height=\"1564\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-the-custom-HTML-block-inside-the-WordPress-block-editor-scaled.webp\" alt=\"Finding the custom HTML block inside the WordPress block editor.\" class=\"wp-image-107049\" old-srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1767\/h:1080\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-the-custom-HTML-block-inside-the-WordPress-block-editor-scaled.webp 2560w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:183\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-the-custom-HTML-block-inside-the-WordPress-block-editor-scaled.webp 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:626\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-the-custom-HTML-block-inside-the-WordPress-block-editor-scaled.webp 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:469\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-the-custom-HTML-block-inside-the-WordPress-block-editor-scaled.webp 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1536\/h:938\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-the-custom-HTML-block-inside-the-WordPress-block-editor-scaled.webp 1536w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1768\/h:1080\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-the-custom-HTML-block-inside-the-WordPress-block-editor-scaled.webp 2048w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:31\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-the-custom-HTML-block-inside-the-WordPress-block-editor-scaled.webp 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:393\/h:240\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-the-custom-HTML-block-inside-the-WordPress-block-editor-scaled.webp 393w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:650\/h:397\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-the-custom-HTML-block-inside-the-WordPress-block-editor-scaled.webp 650w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:982\/h:600\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-the-custom-HTML-block-inside-the-WordPress-block-editor-scaled.webp 982w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:242\/h:148\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-the-custom-HTML-block-inside-the-WordPress-block-editor-scaled.webp 242w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:319\/h:195\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-the-custom-HTML-block-inside-the-WordPress-block-editor-scaled.webp 319w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:221\/h:135\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-the-custom-HTML-block-inside-the-WordPress-block-editor-scaled.webp 221w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1767\/h:1080\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-the-custom-HTML-block-inside-the-WordPress-block-editor-scaled.webp 2x\"><noscript><img data-opt-id=465196450  decoding=\"async\" width=\"2560\" height=\"1564\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-the-custom-HTML-block-inside-the-WordPress-block-editor-scaled.webp\" alt=\"Finding the custom HTML block inside the WordPress block editor.\" class=\"wp-image-107049\" srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1767\/h:1080\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-the-custom-HTML-block-inside-the-WordPress-block-editor-scaled.webp 2560w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:183\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-the-custom-HTML-block-inside-the-WordPress-block-editor-scaled.webp 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:626\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-the-custom-HTML-block-inside-the-WordPress-block-editor-scaled.webp 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:469\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-the-custom-HTML-block-inside-the-WordPress-block-editor-scaled.webp 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1536\/h:938\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-the-custom-HTML-block-inside-the-WordPress-block-editor-scaled.webp 1536w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1768\/h:1080\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-the-custom-HTML-block-inside-the-WordPress-block-editor-scaled.webp 2048w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:31\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-the-custom-HTML-block-inside-the-WordPress-block-editor-scaled.webp 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:393\/h:240\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-the-custom-HTML-block-inside-the-WordPress-block-editor-scaled.webp 393w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:650\/h:397\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-the-custom-HTML-block-inside-the-WordPress-block-editor-scaled.webp 650w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:982\/h:600\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-the-custom-HTML-block-inside-the-WordPress-block-editor-scaled.webp 982w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:242\/h:148\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-the-custom-HTML-block-inside-the-WordPress-block-editor-scaled.webp 242w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:319\/h:195\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-the-custom-HTML-block-inside-the-WordPress-block-editor-scaled.webp 319w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:221\/h:135\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-the-custom-HTML-block-inside-the-WordPress-block-editor-scaled.webp 221w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1767\/h:1080\/q:mauto\/f:best\/dpr:2\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-the-custom-HTML-block-inside-the-WordPress-block-editor-scaled.webp 2x\" sizes=\"(max-width: 700px) 100vw, 700px\"></noscript><\/figure>\n\n\n\n<p>Once you&rsquo;ve added the block, copy and paste the following code into the block:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h3&gt;&lt;span id=\"tooltipText\" class=\"tooltip\"&gt;Replace this with the on page text you want to show&lt;span class=\"tooltiptext\"&gt;Replace this with the tooltip text you want to appear on hover.&lt;\/span&gt;&lt;\/span&gt;&lt;\/h3&gt;\n\n&lt;style&gt;\n.tooltip {\n  position: relative;\n  display: inline-block;\n  cursor: help;\n  border-bottom: 1px dotted #4267cf;\n}\n\n.tooltip .tooltiptext {\n  visibility: hidden;\n  width: 200px;\n  background-color: #555;\n  color: #fff;\n  text-align: left;\n  padding: 10px;\n  border-radius: 6px;\n  position: absolute;\n  z-index: 1;\n  bottom: 150%;\n  left: 50%;\n  margin-left: -100px;\n  opacity: 0;\n  transition: opacity 0.3s;\n  font-size: 16px;\n  line-height: 1.5;\n}\n\n.tooltip:hover .tooltiptext {\n  visibility: visible;\n  opacity: 1;\n}\n&lt;\/style&gt;<\/code><\/pre>\n\n\n\n<p>This is an example of what it might look like on the back end:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized blog-img-std\"><img data-opt-id=780927533  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-CSS-code-for-the-tooltip-into-the-custom-HTML-block.webp\"  decoding=\"async\" width=\"2366\" height=\"1076\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-CSS-code-for-the-tooltip-into-the-custom-HTML-block.webp\" alt=\"Adding CSS to activate tooltip inside the block editor.\" class=\"wp-image-107050\" style=\"width:840px;height:auto\" old-srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1920\/h:873\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-CSS-code-for-the-tooltip-into-the-custom-HTML-block.webp 2366w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:136\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-CSS-code-for-the-tooltip-into-the-custom-HTML-block.webp 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:466\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-CSS-code-for-the-tooltip-into-the-custom-HTML-block.webp 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:349\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-CSS-code-for-the-tooltip-into-the-custom-HTML-block.webp 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1536\/h:699\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-CSS-code-for-the-tooltip-into-the-custom-HTML-block.webp 1536w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1920\/h:872\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-CSS-code-for-the-tooltip-into-the-custom-HTML-block.webp 2048w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:23\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-CSS-code-for-the-tooltip-into-the-custom-HTML-block.webp 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:480\/h:218\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-CSS-code-for-the-tooltip-into-the-custom-HTML-block.webp 480w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:794\/h:361\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-CSS-code-for-the-tooltip-into-the-custom-HTML-block.webp 794w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1200\/h:546\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-CSS-code-for-the-tooltip-into-the-custom-HTML-block.webp 1200w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:296\/h:135\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-CSS-code-for-the-tooltip-into-the-custom-HTML-block.webp 296w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:390\/h:177\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-CSS-code-for-the-tooltip-into-the-custom-HTML-block.webp 390w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:270\/h:123\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-CSS-code-for-the-tooltip-into-the-custom-HTML-block.webp 270w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1920\/h:873\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-CSS-code-for-the-tooltip-into-the-custom-HTML-block.webp 2x\"><noscript><img data-opt-id=780927533  decoding=\"async\" width=\"2366\" height=\"1076\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-CSS-code-for-the-tooltip-into-the-custom-HTML-block.webp\" alt=\"Adding CSS to activate tooltip inside the block editor.\" class=\"wp-image-107050\" style=\"width:840px;height:auto\" srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1920\/h:873\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-CSS-code-for-the-tooltip-into-the-custom-HTML-block.webp 2366w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:136\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-CSS-code-for-the-tooltip-into-the-custom-HTML-block.webp 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:466\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-CSS-code-for-the-tooltip-into-the-custom-HTML-block.webp 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:349\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-CSS-code-for-the-tooltip-into-the-custom-HTML-block.webp 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1536\/h:699\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-CSS-code-for-the-tooltip-into-the-custom-HTML-block.webp 1536w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1920\/h:872\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-CSS-code-for-the-tooltip-into-the-custom-HTML-block.webp 2048w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:23\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-CSS-code-for-the-tooltip-into-the-custom-HTML-block.webp 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:480\/h:218\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-CSS-code-for-the-tooltip-into-the-custom-HTML-block.webp 480w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:794\/h:361\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-CSS-code-for-the-tooltip-into-the-custom-HTML-block.webp 794w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1200\/h:546\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-CSS-code-for-the-tooltip-into-the-custom-HTML-block.webp 1200w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:296\/h:135\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-CSS-code-for-the-tooltip-into-the-custom-HTML-block.webp 296w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:390\/h:177\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-CSS-code-for-the-tooltip-into-the-custom-HTML-block.webp 390w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:270\/h:123\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-CSS-code-for-the-tooltip-into-the-custom-HTML-block.webp 270w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1920\/h:873\/q:mauto\/f:best\/dpr:2\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-CSS-code-for-the-tooltip-into-the-custom-HTML-block.webp 2x\" sizes=\"(max-width: 700px) 100vw, 700px\"></noscript><\/figure>\n\n\n\n<p>Which will then render as this on the front end:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full blog-img-std\"><img data-opt-id=687970715  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Tooltip-on-the-front-end.webp\"  decoding=\"async\" width=\"2482\" height=\"1040\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Tooltip-on-the-front-end.webp\" alt=\"Tooltip on the front end.\" class=\"wp-image-107051\" old-srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1920\/h:804\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Tooltip-on-the-front-end.webp 2482w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:126\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Tooltip-on-the-front-end.webp 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:429\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Tooltip-on-the-front-end.webp 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:322\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Tooltip-on-the-front-end.webp 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1536\/h:644\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Tooltip-on-the-front-end.webp 1536w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1920\/h:804\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Tooltip-on-the-front-end.webp 2048w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:21\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Tooltip-on-the-front-end.webp 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:480\/h:201\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Tooltip-on-the-front-end.webp 480w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:794\/h:333\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Tooltip-on-the-front-end.webp 794w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1200\/h:503\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Tooltip-on-the-front-end.webp 1200w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:296\/h:124\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Tooltip-on-the-front-end.webp 296w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:390\/h:163\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Tooltip-on-the-front-end.webp 390w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:270\/h:113\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Tooltip-on-the-front-end.webp 270w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1920\/h:804\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Tooltip-on-the-front-end.webp 2x\"><noscript><img data-opt-id=687970715  decoding=\"async\" width=\"2482\" height=\"1040\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Tooltip-on-the-front-end.webp\" alt=\"Tooltip on the front end.\" class=\"wp-image-107051\" srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1920\/h:804\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Tooltip-on-the-front-end.webp 2482w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:126\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Tooltip-on-the-front-end.webp 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:429\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Tooltip-on-the-front-end.webp 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:322\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Tooltip-on-the-front-end.webp 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1536\/h:644\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Tooltip-on-the-front-end.webp 1536w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1920\/h:804\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Tooltip-on-the-front-end.webp 2048w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:21\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Tooltip-on-the-front-end.webp 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:480\/h:201\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Tooltip-on-the-front-end.webp 480w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:794\/h:333\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Tooltip-on-the-front-end.webp 794w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1200\/h:503\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Tooltip-on-the-front-end.webp 1200w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:296\/h:124\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Tooltip-on-the-front-end.webp 296w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:390\/h:163\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Tooltip-on-the-front-end.webp 390w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:270\/h:113\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Tooltip-on-the-front-end.webp 270w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1920\/h:804\/q:mauto\/f:best\/dpr:2\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Tooltip-on-the-front-end.webp 2x\" sizes=\"(max-width: 700px) 100vw, 700px\"></noscript><\/figure>\n\n\n\n<p>You can also tweak the CSS code snippet in various ways to adjust the aspects of it that you wish to change. A lot of them are self-explanatory, but if you&rsquo;re not used to working with code it can feel intimidating.<\/p>\n\n\n\n<p>For example, near the bottom, you have <code>font-size: 16px;<\/code> which is what it&rsquo;s set at right now, but you can change it to whatever font size you&rsquo;d like. Underneath that, you also have <code>line-height: 1.5;<\/code>, which is the space between each line of text in the tooltip. You can edit that as well.<\/p>\n\n\n\n<p>For your convenience, here&rsquo;s the snippet again, but this time in a regular paragraph format with a brief note next to each line that explains what it does. This should make it easier for you to adjust to your liking:<\/p>\n\n\n<div class=\"su-spoiler su-spoiler-style-fancy su-spoiler-icon-plus su-spoiler-closed\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-spoiler-title\" tabindex=\"0\" role=\"button\"><span class=\"su-spoiler-icon\"><\/span><strong>Open snippet with explanations &#128071;&#127995;<\/strong> <\/div><div class=\"su-spoiler-content su-u-clearfix su-u-trim\">\n\n\n\n<p>&lt;style&gt;<br>.tooltip {<br>  position: relative; <strong>\/* Positions the tooltip text in relation to this element *\/<\/strong><br>  display: inline-block; <strong>\/* Allows the span to fit the content size and enables positioning *\/<\/strong><br>  cursor: help; <strong>\/* Changes the mouse cursor to a help icon when hovered *\/<\/strong><br>  border-bottom: 1px dotted #4267cf; <strong>\/* Adds a dotted underline to indicate interactivity *\/<\/strong><br>}<br><br>.tooltip .tooltiptext {<br>  visibility: hidden; <strong>\/* Keeps the tooltip text hidden until hovered *\/<\/strong><br>  width: 200px; <strong>\/* Sets a fixed width for the tooltip box *\/<\/strong><br>  background-color: #555; <strong>\/* Dark background for the tooltip text *\/<\/strong><br>  color: #fff; <strong>\/* White text color for readability *\/<\/strong><br>  text-align: left; <strong>\/* Aligns text inside the tooltip to the left *\/<\/strong><br>  padding: 10px; <strong>\/* Adds space inside the tooltip around the text *\/<\/strong><br>  border-radius: 6px; <strong>\/* Rounds the corners of the tooltip box *\/<\/strong><br>  position: absolute; <strong>\/* Positions the tooltip text absolutely within the relative parent *\/<\/strong><br>  z-index: 1; <strong>\/* Ensures the tooltip is above other content *\/<\/strong><br>  bottom: 150%; <strong>\/* Positions the tooltip above the trigger element *\/<\/strong><br>  left: 50%; <strong>\/* Centers the tooltip over the trigger element *\/<\/strong><br>  margin-left: -100px; <strong>\/* Adjusts the horizontal position to truly center it *\/<\/strong><br>  opacity: 0; <strong>\/* Starts the tooltip as transparent *\/<\/strong><br>  transition: opacity 0.3s; <strong>\/* Smooth transition for the tooltip to fade in *\/<\/strong><br>  font-size: 16px; <strong>\/* Sets the text size within the tooltip *\/<\/strong><br>  line-height: 1.3; <strong>\/* Controls the spacing between lines of text *\/<\/strong><br>}<br><br>.tooltip:hover .tooltiptext {<br>  visibility: visible; <strong>\/* Makes the tooltip text visible on hover *\/<\/strong><br>  opacity: 1; <strong>\/* Tooltip text becomes fully opaque (visible) *\/<\/strong><br>}<br>&lt;\/style&gt;<\/p>\n\n\n<\/div><\/div>\n\n\n\n<p>Another important thing to note are the <code>&lt;h3&gt;<\/code> tags at the start of the snippet. The <code>&lt;h3&gt;<\/code> specifically denotes a heading level, but if you wish to have your tooltip be a normal paragraph, then you&rsquo;ll want to swap the <code>&lt;h3&gt;<\/code> and the <code>&lt;\/h3&gt;<\/code> with <code>&lt;p&gt;<\/code> and <code>&lt;\/p&gt;<\/code>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-adding-text-before-or-after-the-tooltip\">Adding text before or after the tooltip<\/h4>\n\n\n\n<p>One thing you might be wondering, which is not shown in the example above, is how to include text either before or after the target text &ndash; the <em>target text<\/em> being the text that triggers the appearance of the tooltip when it&rsquo;s hovered over.<\/p>\n\n\n\n<p>If you want the additional text to be all part of the same continuous string of text (e.g., like in a regular sentence) then include it inside the tags that denote what type of text it is. So in this case it would be the <code>&lt;h3&gt;<\/code> tags:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-opt-id=1070118230  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-the-tooltip-or-after-the-tooltip.webp\"  decoding=\"async\" width=\"782\" height=\"716\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-the-tooltip-or-after-the-tooltip.webp\" alt=\"Adding text before a tooltip on the back end.\" class=\"wp-image-107052\" old-srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:782\/h:716\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-the-tooltip-or-after-the-tooltip.webp 782w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:275\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-the-tooltip-or-after-the-tooltip.webp 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:703\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-the-tooltip-or-after-the-tooltip.webp 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:46\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-the-tooltip-or-after-the-tooltip.webp 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:262\/h:240\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-the-tooltip-or-after-the-tooltip.webp 262w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:434\/h:397\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-the-tooltip-or-after-the-tooltip.webp 434w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:655\/h:600\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-the-tooltip-or-after-the-tooltip.webp 655w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:162\/h:148\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-the-tooltip-or-after-the-tooltip.webp 162w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:213\/h:195\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-the-tooltip-or-after-the-tooltip.webp 213w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:147\/h:135\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-the-tooltip-or-after-the-tooltip.webp 147w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:782\/h:716\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-the-tooltip-or-after-the-tooltip.webp 2x\"><noscript><img data-opt-id=1070118230  decoding=\"async\" width=\"782\" height=\"716\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-the-tooltip-or-after-the-tooltip.webp\" alt=\"Adding text before a tooltip on the back end.\" class=\"wp-image-107052\" srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:782\/h:716\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-the-tooltip-or-after-the-tooltip.webp 782w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:275\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-the-tooltip-or-after-the-tooltip.webp 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:703\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-the-tooltip-or-after-the-tooltip.webp 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:46\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-the-tooltip-or-after-the-tooltip.webp 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:262\/h:240\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-the-tooltip-or-after-the-tooltip.webp 262w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:434\/h:397\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-the-tooltip-or-after-the-tooltip.webp 434w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:655\/h:600\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-the-tooltip-or-after-the-tooltip.webp 655w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:162\/h:148\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-the-tooltip-or-after-the-tooltip.webp 162w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:213\/h:195\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-the-tooltip-or-after-the-tooltip.webp 213w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:147\/h:135\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-the-tooltip-or-after-the-tooltip.webp 147w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:782\/h:716\/q:mauto\/f:best\/dpr:2\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-the-tooltip-or-after-the-tooltip.webp 2x\" sizes=\"(max-width: 700px) 100vw, 700px\"></noscript><\/figure>\n\n\n\n<p>Which will then look like this on the front end:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-opt-id=1948255391  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-and-after-the-tooltip-on-the-front-end.webp\"  decoding=\"async\" width=\"2480\" height=\"1116\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-and-after-the-tooltip-on-the-front-end.webp\" alt=\"What it looks like on the front end after adding text before the tooltip text and after the tooltip text.\" class=\"wp-image-107053\" old-srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1920\/h:864\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-and-after-the-tooltip-on-the-front-end.webp 2480w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:135\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-and-after-the-tooltip-on-the-front-end.webp 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:461\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-and-after-the-tooltip-on-the-front-end.webp 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:346\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-and-after-the-tooltip-on-the-front-end.webp 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1536\/h:691\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-and-after-the-tooltip-on-the-front-end.webp 1536w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1920\/h:864\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-and-after-the-tooltip-on-the-front-end.webp 2048w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:23\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-and-after-the-tooltip-on-the-front-end.webp 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:480\/h:216\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-and-after-the-tooltip-on-the-front-end.webp 480w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:794\/h:357\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-and-after-the-tooltip-on-the-front-end.webp 794w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1200\/h:540\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-and-after-the-tooltip-on-the-front-end.webp 1200w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:296\/h:133\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-and-after-the-tooltip-on-the-front-end.webp 296w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:390\/h:176\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-and-after-the-tooltip-on-the-front-end.webp 390w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:270\/h:122\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-and-after-the-tooltip-on-the-front-end.webp 270w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1920\/h:864\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-and-after-the-tooltip-on-the-front-end.webp 2x\"><noscript><img data-opt-id=1948255391  decoding=\"async\" width=\"2480\" height=\"1116\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-and-after-the-tooltip-on-the-front-end.webp\" alt=\"What it looks like on the front end after adding text before the tooltip text and after the tooltip text.\" class=\"wp-image-107053\" srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1920\/h:864\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-and-after-the-tooltip-on-the-front-end.webp 2480w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:135\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-and-after-the-tooltip-on-the-front-end.webp 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:461\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-and-after-the-tooltip-on-the-front-end.webp 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:346\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-and-after-the-tooltip-on-the-front-end.webp 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1536\/h:691\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-and-after-the-tooltip-on-the-front-end.webp 1536w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1920\/h:864\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-and-after-the-tooltip-on-the-front-end.webp 2048w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:23\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-and-after-the-tooltip-on-the-front-end.webp 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:480\/h:216\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-and-after-the-tooltip-on-the-front-end.webp 480w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:794\/h:357\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-and-after-the-tooltip-on-the-front-end.webp 794w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1200\/h:540\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-and-after-the-tooltip-on-the-front-end.webp 1200w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:296\/h:133\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-and-after-the-tooltip-on-the-front-end.webp 296w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:390\/h:176\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-and-after-the-tooltip-on-the-front-end.webp 390w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:270\/h:122\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-and-after-the-tooltip-on-the-front-end.webp 270w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1920\/h:864\/q:mauto\/f:best\/dpr:2\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/09\/Adding-text-before-and-after-the-tooltip-on-the-front-end.webp 2x\" sizes=\"(max-width: 700px) 100vw, 700px\"></noscript><\/figure>\n\n\n\n<p>If you want to add text before or after, but you want it to be separated from the target tooltip text, then you&rsquo;d simply add a text or heading block before or after the Custom HTML block.<\/p>\n\n\n\n<p>And that&rsquo;s it. Pretty simple, right?<\/p>\n\n\n\n<p>Now let&rsquo;s look at one final way to do this, which also involves adding custom CSS but this time via the Customizer.<\/p>\n\n\n<div class=\"su-divider su-divider-style-default\" style=\"margin:40px 0;border-width:15px;border-color:#4267cf\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading joli-heading jtoc-heading\" id=\"set-up-tooltips-manually-using-the-customizer\">3. Set up tooltips manually using the Customizer &#128104;&zwj;&#128187;<\/h3>\n\n\n\n<p>To access the Customizer, navigate to <em>Appearance &gt; Customize <\/em>from your dashboard and look for the <em>Additional CSS <\/em>tab at the bottom of the left-hand menu:<\/p>\n\n\n<div class=\"wp-block-image blog-img-std\">\n<figure class=\"aligncenter size-full\"><img data-opt-id=1175382978  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/neve-css.png\"  decoding=\"async\" width=\"1825\" height=\"688\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/neve-css.png\" alt=\"The Additional CSS tab in the WordPress Customizer.\" class=\"wp-image-92734\" old-srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1825\/h:688\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/neve-css.png 1825w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:113\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/neve-css.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:386\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/neve-css.png 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:290\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/neve-css.png 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1536\/h:579\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/neve-css.png 1536w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1800\/h:679\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/neve-css.png 1800w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:19\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/neve-css.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:480\/h:181\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/neve-css.png 480w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:794\/h:299\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/neve-css.png 794w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1200\/h:452\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/neve-css.png 1200w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:296\/h:112\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/neve-css.png 296w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:390\/h:147\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/neve-css.png 390w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:270\/h:102\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/neve-css.png 270w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1825\/h:688\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/neve-css.png 2x\"><noscript><img data-opt-id=1175382978  decoding=\"async\" width=\"1825\" height=\"688\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/neve-css.png\" alt=\"The Additional CSS tab in the WordPress Customizer.\" class=\"wp-image-92734\" srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1825\/h:688\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/neve-css.png 1825w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:113\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/neve-css.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:386\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/neve-css.png 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:290\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/neve-css.png 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1536\/h:579\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/neve-css.png 1536w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1800\/h:679\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/neve-css.png 1800w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:19\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/neve-css.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:480\/h:181\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/neve-css.png 480w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:794\/h:299\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/neve-css.png 794w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1200\/h:452\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/neve-css.png 1200w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:296\/h:112\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/neve-css.png 296w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:390\/h:147\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/neve-css.png 390w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:270\/h:102\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/neve-css.png 270w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1825\/h:688\/q:mauto\/f:best\/dpr:2\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/neve-css.png 2x\" sizes=\"(max-width: 700px) 100vw, 700px\"></noscript><\/figure><\/div>\n\n\n<p class=\"has-background\" style=\"background-color:#fffbcc\">&#9888;&#65039; If you do not see this and instead see the option for <em>Editor<\/em> when you go to <em>Appearance<\/em>, then it means you are using a block theme. In other words, this won&rsquo;t work, but you can <a href=\"#set-up-tooltips-manually-using-the-html-block\">use the second method<\/a> above.<\/p>\n\n\n\n<p>Next, add three CSS classes to your theme:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>One for the tooltip container<\/li>\n\n\n\n<li>Another for the text<\/li>\n\n\n\n<li>A final one to hide everything<\/li>\n<\/ol>\n\n\n\n<p>&#128073; Here&rsquo;s a basic example of what the code might look like:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.tooltip-box {\n  position: relative;\n  display: inline-block;\n}\n.tooltip-box .tooltip-text {\n  visibility: hidden;\n  width: 200px;\n  background-color: black;\n  color: #fff;\n  text-align: center;\n  padding: 6px 0;\n  position: absolute;\n  z-index: 1;\n}\n.tooltip-box:hover .tooltip-text {\n  visibility: visible;\n}<\/code><\/pre>\n\n\n\n<p>In a nutshell, this code generates an empty container and sets its position relative to the parent element. Next, it adds some styling to the text you want to include, such as padding, alignment, color, and overall width. Finally, it sets the container to remain hidden until you hover over the parent element.<\/p>\n\n\n\n<p>Once you save this custom CSS to your theme, you can call up tooltips from any page on your website. To do that, access the Block Editor for the page where you want to add a tooltip.<\/p>\n\n\n\n<p>Select the block where you want to add your first tooltip and go for the <em>Edit as HTML <\/em>option:<\/p>\n\n\n<div class=\"wp-block-image blog-img-std\">\n<figure class=\"aligncenter size-full\"><img data-opt-id=222728394  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/edit-html.png\"  decoding=\"async\" width=\"1624\" height=\"568\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/edit-html.png\" alt=\"Editing a WordPress block as HTML.\" class=\"wp-image-92735\" old-srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1624\/h:568\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/edit-html.png 1624w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:105\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/edit-html.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:358\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/edit-html.png 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:269\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/edit-html.png 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1536\/h:537\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/edit-html.png 1536w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:17\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/edit-html.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:480\/h:168\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/edit-html.png 480w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:794\/h:278\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/edit-html.png 794w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1200\/h:420\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/edit-html.png 1200w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:296\/h:104\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/edit-html.png 296w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:390\/h:136\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/edit-html.png 390w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:270\/h:94\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/edit-html.png 270w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1624\/h:568\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/edit-html.png 2x\"><noscript><img data-opt-id=222728394  decoding=\"async\" width=\"1624\" height=\"568\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/edit-html.png\" alt=\"Editing a WordPress block as HTML.\" class=\"wp-image-92735\" srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1624\/h:568\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/edit-html.png 1624w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:105\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/edit-html.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:358\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/edit-html.png 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:269\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/edit-html.png 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1536\/h:537\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/edit-html.png 1536w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:17\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/edit-html.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:480\/h:168\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/edit-html.png 480w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:794\/h:278\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/edit-html.png 794w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1200\/h:420\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/edit-html.png 1200w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:296\/h:104\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/edit-html.png 296w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:390\/h:136\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/edit-html.png 390w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:270\/h:94\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/edit-html.png 270w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1624\/h:568\/q:mauto\/f:best\/dpr:2\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/edit-html.png 2x\" sizes=\"(max-width: 700px) 100vw, 700px\"></noscript><\/figure><\/div>\n\n\n<p>&#128073; Now, add a <code>div<\/code> that contains the parent text for your tooltip and the information you want it to contain:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"tooltip-text\"&gt;Parent text\n  &lt;span class=\"tooltiptext\"&gt;Tooltip text here!&lt;\/span&gt;\n&lt;\/div&gt;\n\n&lt;div class=\"tooltip-box\"&gt;Parent text\n  &lt;span class=\"tooltip-text\"&gt;Tooltip text here!&lt;\/span&gt;<\/code><\/pre>\n\n\n\n<p>Make sure to add the <code>tooltip-text<\/code> CSS class to your <code>div<\/code>. This is the CSS class that you added to your theme using the customizer. If you set a different name for your class, go ahead and change it.<\/p>\n\n\n\n<p>Here&rsquo;s what our tooltip looks like from within the editor:<\/p>\n\n\n<div class=\"wp-block-image blog-img-std\">\n<figure class=\"aligncenter size-full\"><img data-opt-id=622634963  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-code-editor.png\"  decoding=\"async\" width=\"1406\" height=\"707\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-code-editor.png\" alt=\"Manually creating a WordPress tooltip within the block editor.\" class=\"wp-image-92736\" old-srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1406\/h:707\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-code-editor.png 1406w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:151\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-code-editor.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:515\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-code-editor.png 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:386\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-code-editor.png 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:25\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-code-editor.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:477\/h:240\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-code-editor.png 477w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:790\/h:397\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-code-editor.png 790w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1193\/h:600\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-code-editor.png 1193w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:294\/h:148\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-code-editor.png 294w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:388\/h:195\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-code-editor.png 388w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:268\/h:135\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-code-editor.png 268w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1406\/h:707\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-code-editor.png 2x\"><noscript><img data-opt-id=622634963  decoding=\"async\" width=\"1406\" height=\"707\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-code-editor.png\" alt=\"Manually creating a WordPress tooltip within the block editor.\" class=\"wp-image-92736\" srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1406\/h:707\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-code-editor.png 1406w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:151\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-code-editor.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:515\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-code-editor.png 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:386\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-code-editor.png 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:25\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-code-editor.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:477\/h:240\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-code-editor.png 477w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:790\/h:397\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-code-editor.png 790w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1193\/h:600\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-code-editor.png 1193w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:294\/h:148\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-code-editor.png 294w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:388\/h:195\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-code-editor.png 388w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:268\/h:135\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-code-editor.png 268w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1406\/h:707\/q:mauto\/f:best\/dpr:2\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-code-editor.png 2x\" sizes=\"(max-width: 700px) 100vw, 700px\"></noscript><\/figure><\/div>\n\n\n<p>If you save the changes to your page and head to the front end, you can see the changes:<\/p>\n\n\n<div class=\"wp-block-image blog-img-std\">\n<figure class=\"aligncenter size-full\"><img data-opt-id=1002189707  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/no-tooltip.png\"  decoding=\"async\" width=\"1414\" height=\"678\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/no-tooltip.png\" alt=\"The parent element for a tooltip.\" class=\"wp-image-92737\" old-srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1414\/h:678\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/no-tooltip.png 1414w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:144\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/no-tooltip.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:491\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/no-tooltip.png 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:368\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/no-tooltip.png 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:24\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/no-tooltip.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:480\/h:230\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/no-tooltip.png 480w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:794\/h:381\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/no-tooltip.png 794w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1200\/h:575\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/no-tooltip.png 1200w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:296\/h:142\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/no-tooltip.png 296w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:390\/h:187\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/no-tooltip.png 390w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:270\/h:129\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/no-tooltip.png 270w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1414\/h:678\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/no-tooltip.png 2x\"><noscript><img data-opt-id=1002189707  decoding=\"async\" width=\"1414\" height=\"678\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/no-tooltip.png\" alt=\"The parent element for a tooltip.\" class=\"wp-image-92737\" srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1414\/h:678\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/no-tooltip.png 1414w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:144\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/no-tooltip.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:491\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/no-tooltip.png 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:368\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/no-tooltip.png 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:24\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/no-tooltip.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:480\/h:230\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/no-tooltip.png 480w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:794\/h:381\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/no-tooltip.png 794w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1200\/h:575\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/no-tooltip.png 1200w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:296\/h:142\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/no-tooltip.png 296w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:390\/h:187\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/no-tooltip.png 390w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:270\/h:129\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/no-tooltip.png 270w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1414\/h:678\/q:mauto\/f:best\/dpr:2\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/no-tooltip.png 2x\" sizes=\"(max-width: 700px) 100vw, 700px\"></noscript><\/figure><\/div>\n\n\n<p>Once you mouse over the parent text, the tooltip will show up:<\/p>\n\n\n<div class=\"wp-block-image blog-img-std\">\n<figure class=\"aligncenter size-full\"><img data-opt-id=878545532  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-front-end.png\"  decoding=\"async\" width=\"1474\" height=\"654\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-front-end.png\" alt=\"A CSS tooltip in action.\" class=\"wp-image-92738\" old-srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1474\/h:654\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-front-end.png 1474w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:133\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-front-end.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:454\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-front-end.png 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:341\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-front-end.png 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:22\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-front-end.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:480\/h:213\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-front-end.png 480w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:794\/h:352\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-front-end.png 794w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1200\/h:532\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-front-end.png 1200w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:296\/h:131\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-front-end.png 296w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:390\/h:173\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-front-end.png 390w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:270\/h:120\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-front-end.png 270w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1474\/h:654\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-front-end.png 2x\"><noscript><img data-opt-id=878545532  decoding=\"async\" width=\"1474\" height=\"654\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-front-end.png\" alt=\"A CSS tooltip in action.\" class=\"wp-image-92738\" srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1474\/h:654\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-front-end.png 1474w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:133\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-front-end.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:454\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-front-end.png 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:341\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-front-end.png 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:22\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-front-end.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:480\/h:213\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-front-end.png 480w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:794\/h:352\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-front-end.png 794w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1200\/h:532\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-front-end.png 1200w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:296\/h:131\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-front-end.png 296w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:390\/h:173\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-front-end.png 390w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:270\/h:120\/q:mauto\/f:best\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-front-end.png 270w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1474\/h:654\/q:mauto\/f:best\/dpr:2\/https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2023\/12\/tooltip-front-end.png 2x\" sizes=\"(max-width: 700px) 100vw, 700px\"></noscript><\/figure><\/div>\n\n\n<p>That&rsquo;s it! &#128526;<\/p>\n\n\n\n<p>Remember, you can style your tooltips as you can other site elements. This means using different colors, modifying the container, and more, so they all fit with your website&rsquo;s style.<\/p>\n\n\n\n<p>&#128161; To do that, you might need to <a href=\"https:\/\/themeisle.com\/blog\/css-in-wordpress\/\">learn some basic CSS<\/a>. Codecademy has <a href=\"https:\/\/www.codecademy.com\/learn\/learn-css\" target=\"_blank\" rel=\"noopener\">a good CSS course<\/a>.<\/p>\n\n\n<div class=\"su-divider su-divider-style-dotted\" style=\"margin:40px 0;border-width:1px;border-color:#999999\"><a href=\"#\" style=\"color:#999999\">Go to top<\/a><\/div>\n\n\n\n<h2 class=\"wp-block-heading joli-heading jtoc-heading\" id=\"h-conclusion\">Conclusion &#129488;<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p>Adding WordPress tooltips to your site can help you improve <a href=\"https:\/\/themeisle.com\/blog\/what-is-ux\/\">your site&rsquo;s user experience<\/a> by including helpful information.<\/p>\n\n\n\n<p>To recap, you can do it in three different ways:<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n\t\t<div class=\"ti-tweet-clear\"><\/div>\n\t\t\t<div class=\"ti-tweet_wrapper\">\n\t\t    \t<div class=\"ti-tweet_text\">\n\t\t    \t\t<a href=\"https:\/\/twitter.com\/share?text=Want+to+add+hover+tooltips+to++%23WordPress+%F0%9F%A4%94+three+easy+methods+-+%23plugin+or+%23CSS+%F0%9F%94%8C%F0%9F%8E%A8&amp;via=themeisle&amp;related=themeisle&amp;url=https:\/\/themeisle.com\/blog\/wordpress-tooltip-tutorial\/\" target=\"_blank\" rel=\"nofollow\">Want to add hover tooltips to  #WordPress &#129300; three easy methods - #plugin or #CSS &#128268;&#127912;<\/a>\n\t\t    \t<\/div>\n\t\t    \t<div class=\"ti-tweet_sharebtn\">\n\t\t    \t<a href=\"https:\/\/twitter.com\/share?text=Want+to+add+hover+tooltips+to++%23WordPress+%F0%9F%A4%94+three+easy+methods+-+%23plugin+or+%23CSS+%F0%9F%94%8C%F0%9F%8E%A8&amp;via=themeisle&amp;related=themeisle&amp;url=https:\/\/themeisle.com\/blog\/wordpress-tooltip-tutorial\/\" target=\"_blank\" rel=\"nofollow\">Click To Tweet \n\t\t    \t\t<span><\/span>\n\t\t    \t<\/a>\n\t\t    <\/div>\n\t\t<\/div>\n<\/div>\n<\/div>\n\n\n<div class=\"su-note\" style=\"border-color:#e5e1b2;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;\"><div class=\"su-note-inner su-u-clearfix su-u-trim\" style=\"background-color:#FFFBCC;border-color:#ffffff;color:#333333;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;\">\n\n\n\n<ol class=\"wp-block-list\">\n<li>Use a WordPress tooltip plugin that takes care of the setup for you.<\/li>\n\n\n\n<li>Set up tooltips manually using an HTML block and a CSS code snippet.<\/li>\n\n\n\n<li>Set up tooltips manually using the WordPress Customizer and a CSS code snippet.<\/li>\n<\/ol>\n\n\n<\/div><\/div>\n\n\n\n<p>For additional options to create a more user-friendly WordPress site, you can also check out our guides to <a href=\"https:\/\/themeisle.com\/blog\/improve-wordpress-website-navigation\/\">improving WordPress navigation<\/a> and <a href=\"https:\/\/themeisle.com\/blog\/remove-clutter-from-website\/\">removing clutter from your website<\/a>.<\/p>\n\n\n\n<p><strong><em>Do you have any questions about how to customize your WordPress hover tooltips? Let&rsquo;s go over them in the comments section below!<\/em><\/strong><\/p>\n\n\n<style>.ticss-d144f107 strong{font-weight: 700;\n    letter-spacing: -0.2px;\n    line-height: 1.2;\n    display: inline-block;}<\/style>\n\n\n<div class=\"wp-block-columns speed-guide has-white-color has-text-color has-background has-link-color wp-elements-2f81f6c5526477b5b4d52d1ca4513949 is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\" style=\"background-color:#4267cf\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:40%\">\n<figure class=\"wp-block-image size-medium\"><img data-opt-id=30701221  data-opt-src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:300\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png\"  decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:300\/q:eco\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png\" alt=\"speed guide\" class=\"wp-image-113040\" old-srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:300\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:1024\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:150\/h:150\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 150w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:768\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:50\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:240\/h:240\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 240w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:397\/h:397\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 397w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:600\/h:600\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 600w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:148\/h:148\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 148w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:195\/h:195\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 195w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:135\/h:135\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 135w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1080\/h:1080\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 1200w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1080\/h:1080\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 2x\"><noscript><img data-opt-id=30701221  decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:300\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png\" alt=\"speed guide\" class=\"wp-image-113040\" srcset=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:300\/h:300\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 300w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1024\/h:1024\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 1024w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:150\/h:150\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 150w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:768\/h:768\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 768w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:50\/h:50\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 50w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:240\/h:240\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 240w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:397\/h:397\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 397w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:600\/h:600\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 600w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:148\/h:148\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 148w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:195\/h:195\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 195w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:135\/h:135\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 135w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1080\/h:1080\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 1200w, https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:1080\/h:1080\/q:mauto\/f:best\/dpr:2\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2025\/09\/e2ce20299a807336c68c2e029640adaa1.png 2x\" sizes=\"(max-width: 300px) 100vw, 300px\"></noscript><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"has-text-align-center ticss-58e79f2f\" style=\"font-size:14px\"><strong>FREE GUIDE<\/strong><\/p>\n\n\n\n<p class=\"ticss-d144f107\" style=\"font-size:25px\"><strong>4 Essential Steps to Speed Up Your&nbsp;WordPress Website<\/strong><\/p>\n\n\n\n<p class=\"ticss-3b627beb\">Follow the simple steps in our 4-part mini series and reduce your loading times by 50-80%.&nbsp;&#128640;<\/p>\n\n\n<p><\/p><div class=\"frm_forms  with_frm_style frm_style_themeisle\" id=\"frm_form_4_container\" data-token=\"070f6a2e6c757d51d88e95dd83fc2573\">\n<form enctype=\"multipart\/form-data\" method=\"post\" class=\"frm-show-form  frm_pro_form \" id=\"form_site-speed-guide-below-post\" data-token=\"070f6a2e6c757d51d88e95dd83fc2573\">\n<div class=\"frm_form_fields \">\n<fieldset>\n<legend class=\"frm_screen_reader\">Site Speed Guide - Below Post<\/legend>\r\n\r\n<div class=\"frm_fields_container\">\n<input type=\"hidden\" name=\"frm_action\" value=\"create\">\n<input type=\"hidden\" name=\"form_id\" value=\"4\">\n<input type=\"hidden\" name=\"frm_hide_fields_4\" id=\"frm_hide_fields_4\" value=\"\">\n<input type=\"hidden\" name=\"form_key\" value=\"site-speed-guide-below-post\">\n<input type=\"hidden\" name=\"item_meta[0]\" value=\"\">\n<input type=\"hidden\" id=\"frm_submit_entry_4\" name=\"frm_submit_entry_4\" value=\"40371470df\"><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/blog\/wp-json\/wp\/v2\/posts\/28617\"><input type=\"hidden\" name=\"item_meta[18]\" id=\"field_6px6q2\" value=\"\/blog\/wp-json\/wp\/v2\/posts\/28617\" data-frmval=\"\/blog\/wp-json\/wp\/v2\/posts\/28617\">\n<div id=\"frm_field_15_container\" class=\"frm_form_field form-field  frm_required_field frm_none_container\">\r\n\t<label for=\"field_6px6q\" id=\"field_6px6q_label\" class=\"frm_primary_label\">Your Email\r\n\t\t<span class=\"frm_required\" aria-hidden=\"true\">*<\/span>\r\n\t<\/label>\r\n\t<input type=\"email\" id=\"field_6px6q\" name=\"item_meta[15]\" value=\"\" autocomplete=\"email\" placeholder=\"your@email.com\" data-reqmsg=\"Your Email cannot be blank.\" aria-required=\"true\" data-invmsg=\"Your Email is invalid\" aria-invalid=\"false\">\r\n\t\r\n\t\r\n<\/div>\n<div id=\"frm_field_17_container\" class=\"frm_form_field form-field  frm_none_container vertical_radio\">\r\n\t<div id=\"field_6px6q3_label\" class=\"frm_primary_label\">Subscribe to our newsletter\r\n\t\t<span class=\"frm_required\" aria-hidden=\"true\"><\/span>\r\n\t<\/div>\r\n\t<div class=\"frm_opt_container\" aria-labelledby=\"field_6px6q3_label\" role=\"group\">\t\t<div class=\"frm_checkbox\" id=\"frm_checkbox_17-0\">\t\t\t<label for=\"field_6px6q3-0\">\n\t\t\t<input type=\"checkbox\" name=\"item_meta[17][]\" id=\"field_6px6q3-0\" value=\"true\" data-invmsg=\"Subscribe to our newsletter is invalid\" aria-invalid=\"false\"> Subscribe to our newsletter<\/label><\/div>\n<\/div>\r\n\t\r\n\t\r\n<\/div>\n<div id=\"frm_field_14_container\" class=\"frm_form_field form-field \">\r\n\t<div class=\"frm_submit frm_flex\">\r\n<button class=\"frm_button_submit frm_final_submit\" type=\"submit\" formnovalidate=\"formnovalidate\">FREE ACCESS<\/button>\r\n\r\n\r\n\r\n<\/div>\r\n<\/div>\n\t<input type=\"hidden\" name=\"item_key\" value=\"\">\n\t\t\t<div id=\"frm_field_24_container\">\n\t\t\t<label for=\"field_5msqu\">\n\t\t\t\tIf you are human, leave this field blank.\t\t\t<\/label>\n\t\t\t<input id=\"field_5msqu\" type=\"text\" class=\"frm_form_field form-field frm_verify\" name=\"item_meta[24]\" value=\"\">\n\t\t<\/div>\n\t\t<input name=\"frm_state\" type=\"hidden\" value=\"tGKtIG19U6wyYcew8uBtteaSZUlRP9v4vGkwOUEDMXowF9M0QAXa6pd1+Qu8+H8p\"><\/div>\n<\/fieldset>\n<\/div>\n\n<p style=\"display: none !important;\" class=\"akismet-fields-container\" data-prefix=\"ak_\"><label>&Delta;<textarea name=\"ak_hp_textarea\" cols=\"45\" rows=\"8\" maxlength=\"100\"><\/textarea><\/label><input type=\"hidden\" id=\"ak_js_1\" name=\"ak_js\" value=\"245\"><script>document.getElementById( \"ak_js_1\" ).setAttribute( \"value\", ( new Date() ).getTime() );<\/script><\/p><\/form>\n<\/div>\n\n<\/div>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"In this article, we&#8217;ll show you some of our favorite examples of CSS hover tooltips in action. Then we&#8217;ll teach you how to add them to your website with and without plugins. ","protected":false},"author":14,"featured_media":29379,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_stopmodifiedupdate":false,"_modified_date":"","_themeisle_gutenberg_block_has_review":false,"footnotes":""},"categories":[272],"tags":[],"hashtags":[],"class_list":["post-28617","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-tutorials"],"wppr_data":{"cwp_meta_box_check":"No"},"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.8 (Yoast SEO v26.1.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Add a WordPress Tooltip in 3 Ways: Free Plugin or CSS<\/title>\n<meta name=\"description\" content=\"Want to add a WordPress tooltip to your site? Read this post to learn 3 simple methods: a free tooltip plugin or two CSS code snippets.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/themeisle.com\/blog\/wordpress-tooltip-tutorial\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add a WordPress Tooltip in 3 Ways: Free Plugin or CSS\" \/>\n<meta property=\"og:description\" content=\"Want to add a WordPress tooltip to your site? Read this post to learn 3 simple methods: a free tooltip plugin or two CSS code snippets.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/themeisle.com\/blog\/wordpress-tooltip-tutorial\/\" \/>\n<meta property=\"og:site_name\" content=\"Themeisle Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-02-19T09:46:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-10T18:45:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2020\/01\/wordpress-tooltip.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2180\" \/>\n\t<meta property=\"og:image:height\" content=\"1090\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"John Hughes\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"John Hughes\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/themeisle.com\/blog\/wordpress-tooltip-tutorial\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/themeisle.com\/blog\/wordpress-tooltip-tutorial\/\"},\"author\":{\"name\":\"John Hughes\",\"@id\":\"https:\/\/themeisle.com\/blog\/#\/schema\/person\/0f080762cdcc47aee80f11536fe87242\"},\"headline\":\"How to Add a WordPress Tooltip in 3 Ways: Free Plugin or CSS\",\"datePublished\":\"2020-02-19T09:46:00+00:00\",\"dateModified\":\"2024-09-10T18:45:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/themeisle.com\/blog\/wordpress-tooltip-tutorial\/\"},\"wordCount\":1982,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/themeisle.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/themeisle.com\/blog\/wordpress-tooltip-tutorial\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2020\/01\/wordpress-tooltip.jpg\",\"articleSection\":[\"WordPress Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/themeisle.com\/blog\/wordpress-tooltip-tutorial\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/themeisle.com\/blog\/wordpress-tooltip-tutorial\/\",\"url\":\"https:\/\/themeisle.com\/blog\/wordpress-tooltip-tutorial\/\",\"name\":\"How to Add a WordPress Tooltip in 3 Ways: Free Plugin or CSS\",\"isPartOf\":{\"@id\":\"https:\/\/themeisle.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/themeisle.com\/blog\/wordpress-tooltip-tutorial\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/themeisle.com\/blog\/wordpress-tooltip-tutorial\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2020\/01\/wordpress-tooltip.jpg\",\"datePublished\":\"2020-02-19T09:46:00+00:00\",\"dateModified\":\"2024-09-10T18:45:04+00:00\",\"description\":\"Want to add a WordPress tooltip to your site? Read this post to learn 3 simple methods: a free tooltip plugin or two CSS code snippets.\",\"breadcrumb\":{\"@id\":\"https:\/\/themeisle.com\/blog\/wordpress-tooltip-tutorial\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/themeisle.com\/blog\/wordpress-tooltip-tutorial\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/themeisle.com\/blog\/wordpress-tooltip-tutorial\/#primaryimage\",\"url\":\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2020\/01\/wordpress-tooltip.jpg\",\"contentUrl\":\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2020\/01\/wordpress-tooltip.jpg\",\"width\":2180,\"height\":1090,\"caption\":\"WordPress Tooltip\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/themeisle.com\/blog\/wordpress-tooltip-tutorial\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/themeisle.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Add a WordPress Tooltip in 3 Ways: Free Plugin or CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/themeisle.com\/blog\/#website\",\"url\":\"https:\/\/themeisle.com\/blog\/\",\"name\":\"Themeisle Blog\",\"description\":\"WordPress Tutorials and Reviews for Beginners and Advanced\",\"publisher\":{\"@id\":\"https:\/\/themeisle.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/themeisle.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/themeisle.com\/blog\/#organization\",\"name\":\"VertiStudio\",\"alternateName\":\"Vertigo Studio SA\",\"url\":\"https:\/\/themeisle.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/themeisle.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/02\/VertiStudio_logo1.png\",\"contentUrl\":\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/02\/VertiStudio_logo1.png\",\"width\":718,\"height\":156,\"caption\":\"VertiStudio\"},\"image\":{\"@id\":\"https:\/\/themeisle.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/themeisle.com\/blog\/#\/schema\/person\/0f080762cdcc47aee80f11536fe87242\",\"name\":\"John Hughes\",\"description\":\"John is a self-taught WordPress designer and developer. He has been working with the CMS for over a decade, and has experience operating as a freelancer and as part of an agency. He\u2019s dabbled in everything from accessible design to website security. Plus, he has extensive knowledge of online business topics like affiliate marketing.\",\"sameAs\":[\"http:\/\/wordcandy.co\"],\"url\":\"https:\/\/themeisle.com\/blog\/author\/john-h\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Add a WordPress Tooltip in 3 Ways: Free Plugin or CSS","description":"Want to add a WordPress tooltip to your site? Read this post to learn 3 simple methods: a free tooltip plugin or two CSS code snippets.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/themeisle.com\/blog\/wordpress-tooltip-tutorial\/","og_locale":"en_US","og_type":"article","og_title":"How to Add a WordPress Tooltip in 3 Ways: Free Plugin or CSS","og_description":"Want to add a WordPress tooltip to your site? Read this post to learn 3 simple methods: a free tooltip plugin or two CSS code snippets.","og_url":"https:\/\/themeisle.com\/blog\/wordpress-tooltip-tutorial\/","og_site_name":"Themeisle Blog","article_published_time":"2020-02-19T09:46:00+00:00","article_modified_time":"2024-09-10T18:45:04+00:00","og_image":[{"width":2180,"height":1090,"url":"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2020\/01\/wordpress-tooltip.jpg","type":"image\/jpeg"}],"author":"John Hughes","twitter_card":"summary_large_image","twitter_misc":{"Written by":"John Hughes","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/themeisle.com\/blog\/wordpress-tooltip-tutorial\/#article","isPartOf":{"@id":"https:\/\/themeisle.com\/blog\/wordpress-tooltip-tutorial\/"},"author":{"name":"John Hughes","@id":"https:\/\/themeisle.com\/blog\/#\/schema\/person\/0f080762cdcc47aee80f11536fe87242"},"headline":"How to Add a WordPress Tooltip in 3 Ways: Free Plugin or CSS","datePublished":"2020-02-19T09:46:00+00:00","dateModified":"2024-09-10T18:45:04+00:00","mainEntityOfPage":{"@id":"https:\/\/themeisle.com\/blog\/wordpress-tooltip-tutorial\/"},"wordCount":1982,"commentCount":0,"publisher":{"@id":"https:\/\/themeisle.com\/blog\/#organization"},"image":{"@id":"https:\/\/themeisle.com\/blog\/wordpress-tooltip-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2020\/01\/wordpress-tooltip.jpg","articleSection":["WordPress Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/themeisle.com\/blog\/wordpress-tooltip-tutorial\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/themeisle.com\/blog\/wordpress-tooltip-tutorial\/","url":"https:\/\/themeisle.com\/blog\/wordpress-tooltip-tutorial\/","name":"How to Add a WordPress Tooltip in 3 Ways: Free Plugin or CSS","isPartOf":{"@id":"https:\/\/themeisle.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/themeisle.com\/blog\/wordpress-tooltip-tutorial\/#primaryimage"},"image":{"@id":"https:\/\/themeisle.com\/blog\/wordpress-tooltip-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2020\/01\/wordpress-tooltip.jpg","datePublished":"2020-02-19T09:46:00+00:00","dateModified":"2024-09-10T18:45:04+00:00","description":"Want to add a WordPress tooltip to your site? Read this post to learn 3 simple methods: a free tooltip plugin or two CSS code snippets.","breadcrumb":{"@id":"https:\/\/themeisle.com\/blog\/wordpress-tooltip-tutorial\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/themeisle.com\/blog\/wordpress-tooltip-tutorial\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/themeisle.com\/blog\/wordpress-tooltip-tutorial\/#primaryimage","url":"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2020\/01\/wordpress-tooltip.jpg","contentUrl":"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2020\/01\/wordpress-tooltip.jpg","width":2180,"height":1090,"caption":"WordPress Tooltip"},{"@type":"BreadcrumbList","@id":"https:\/\/themeisle.com\/blog\/wordpress-tooltip-tutorial\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/themeisle.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Add a WordPress Tooltip in 3 Ways: Free Plugin or CSS"}]},{"@type":"WebSite","@id":"https:\/\/themeisle.com\/blog\/#website","url":"https:\/\/themeisle.com\/blog\/","name":"Themeisle Blog","description":"WordPress Tutorials and Reviews for Beginners and Advanced","publisher":{"@id":"https:\/\/themeisle.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/themeisle.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/themeisle.com\/blog\/#organization","name":"VertiStudio","alternateName":"Vertigo Studio SA","url":"https:\/\/themeisle.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/themeisle.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/02\/VertiStudio_logo1.png","contentUrl":"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2024\/02\/VertiStudio_logo1.png","width":718,"height":156,"caption":"VertiStudio"},"image":{"@id":"https:\/\/themeisle.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/themeisle.com\/blog\/#\/schema\/person\/0f080762cdcc47aee80f11536fe87242","name":"John Hughes","description":"John is a self-taught WordPress designer and developer. He has been working with the CMS for over a decade, and has experience operating as a freelancer and as part of an agency. He\u2019s dabbled in everything from accessible design to website security. Plus, he has extensive knowledge of online business topics like affiliate marketing.","sameAs":["http:\/\/wordcandy.co"],"url":"https:\/\/themeisle.com\/blog\/author\/john-h\/"}]}},"_links":{"self":[{"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/posts\/28617","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/users\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/comments?post=28617"}],"version-history":[{"count":14,"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/posts\/28617\/revisions"}],"predecessor-version":[{"id":107054,"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/posts\/28617\/revisions\/107054"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/media\/29379"}],"wp:attachment":[{"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/media?parent=28617"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/categories?post=28617"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/tags?post=28617"},{"taxonomy":"hashtags","embeddable":true,"href":"https:\/\/themeisle.com\/blog\/wp-json\/wp\/v2\/hashtags?post=28617"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}