{"id":38415,"date":"2022-06-13T15:00:17","date_gmt":"2022-06-13T13:00:17","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=38415"},"modified":"2022-06-24T10:42:49","modified_gmt":"2022-06-24T08:42:49","slug":"how-to-add-tooltips-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-add-tooltips-in-wordpress\/","title":{"rendered":"How to Add Tooltips in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Whatever sort of website you\u2019re running, you want your visitors to have an easy time getting around. Ease of navigation means you have designed your website well and that your visitors know where to find the content they want, making for a better user experience overall. Sometimes, though, even great design may confound some users, or complex content requires more clarification. This is when <strong>WordPress tooltips may come in handy<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this article, we will be showing you how to add tooltips to your WordPress website. We will be adding WordPress tooltips in two ways: <strong>using CSS code<\/strong> and <strong>using a tooltip plugin<\/strong>. But before we get down to the nuts and bolts of the tutorial, we would like to examine the tooltips themselves: what are tooltips in WordPress, and how can adding tooltips improve your website. If you feel you know this already, feel free to scroll right down to the tutorial you want.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here\u2019s what we\u2019ll be discussing:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-are-tooltips\">What Are Tooltips<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#add-wordpress-tooltips-using-code\">How to Add WordPress Tooltips Using Code<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#add-wordpress-tooltips-using-plugin\">How to Add WordPress Tooltips Using a Plugin<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-are-tooltips\"><\/a>What Are Tooltips<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder    \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"553\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/What-Are-Tooltips.jpg\" class=\"attachment-full size-full\" alt=\"What Are Tooltips\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/What-Are-Tooltips.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/What-Are-Tooltips-300x171.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/What-Are-Tooltips-768x438.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/What-Are-Tooltips-620x354.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Tooltips are <strong>annotations that appear when a user hovers their mouse over an active area<\/strong>. They usually contain a short description or indication of what clicking said area will do, but are not limited to that. Tooltips are <strong>not unique to WordPress<\/strong> by any means, but in the context of WordPress, they are a useful way of making your content more accessible.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]When not used to explain the action of buttons and other clickable items, they <strong>most often take the shape of footnotes or notifications<\/strong>. You can use them to explain some of the more obscure terms, or to provide additional information on graphics and other images employed on the website.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As far as WordPress tooltips are concerned, they take the shape of <strong>a pop-up box<\/strong> that can contain images and text and be styled to best fit your website. If you feel like you could use tooltips on your WordPress website, we will explain how it\u2019s done in the subsequent two sections.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"add-wordpress-tooltips-using-code\"><\/a>How to Add WordPress Tooltips Using Code<\/h2>\n<p>[\/vc_column_text][vc_column_text]If you are a more advanced sort of WordPress user, you might want to try exerting total control over your tooltip boxes. You can do that by altering your theme\u2019s code <a href=\"https:\/\/qodeinteractive.com\/magazine\/ultimate-guide-to-wordpress-theme-customizer\/\">using the WordPress theme customizer<\/a>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, changing your theme\u2019s code directly has several drawbacks, mainly due to it being vulnerable to updates. A theme or WordPress update might undo all your hard work, as your theme files are replaced by their newer version. This is why we suggest <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-child-theme-wordpress\/\">using a child theme<\/a> or a <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-add-custom-code-to-wordpress\/\">plugin to add your custom code<\/a>, and <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-backup-with-updraftplus-plugin\/\">creating a backup of your website<\/a> just in case.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Once you have made all necessary precautions, you need to add your code. To do so, navigate to <strong>Appearance\/Customize<\/strong> from your WordPress dashboard.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Appearance-Customize.jpg\" class=\"attachment-full size-full\" alt=\"Appearance Customize\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Appearance-Customize.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Appearance-Customize-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Appearance-Customize-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/04\/Appearance-Customize-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once you open the customizer, select <strong>Additional CSS<\/strong> from the left-hand-side menu.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Additional-CSS.jpg\" class=\"attachment-full size-full\" alt=\"Additional CSS\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Additional-CSS.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Additional-CSS-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Additional-CSS-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Additional-CSS-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, you need to paste the following code into the box and click the <strong>Update<\/strong> or <strong>Publish<\/strong> button.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">.tooltip {\r\nposition: relative;\r\ndisplay: inline-block;\r\n}\r\n.tooltip .tooltip-text {\r\nvisibility: hidden;\r\nwidth: 100px;\r\nbackground-color: #26c1cd;\r\ncolor: #ffffff;\r\ntext-align: center;\r\npadding: 4px 0;\r\nposition: absolute;\r\nz-index: 1;\r\n}\r\n.tooltip:hover .tooltip-text {\r\nvisibility: visible;\r\n}<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]This code has three parts, establishing CSS classes for the tooltip box and the tooltip text, showing the elements only on mouse hover. Note that the code contains parameters that you can customize to your preference, such as changing text color or font, decorations and effects, and the like. A full demonstration of the capabilities of CSS in this case is beyond the scope of this tutorial, which is why we don\u2019t recommend it for novice users.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To actually show a tooltip, you need to add it to an element using HTML. To demonstrate this, we have created a post and added some <a href=\"https:\/\/qodeinteractive.com\/magazine\/lorem-ipsum\/\">placeholder text<\/a> to it.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To create a tooltip, edit a block to which you wish to add it as HTML.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"510\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Edit-as-HTML.jpg\" class=\"attachment-full size-full\" alt=\"Edit as HTML\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Edit-as-HTML.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Edit-as-HTML-300x158.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Edit-as-HTML-768x404.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Edit-as-HTML-620x326.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Find the place in the text where you wish to add a tooltip, and replace it with this piece of code:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;span class=\"tooltip\"&gt;ONHOVER\r\n&lt;span class=\"tooltip-text\"&gt;TOOLTIP&lt;\/span&gt;\r\n&lt;\/span&gt;<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Of course, replace ONHOVER with the text you wish to assign the tooltip to, and TOOLTIP with the actual tooltip text, as in the example below.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Add-Code.jpg\" class=\"attachment-full size-full\" alt=\"Add Code\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Add-Code.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Add-Code-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Add-Code-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Add-Code-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And, as you can see, once we hover over the text in question, the tooltip box pops up as configured in the code.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"567\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Tooltip-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Tooltip Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Tooltip-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Tooltip-Preview-300x176.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Tooltip-Preview-768x449.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Tooltip-Preview-620x363.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"add-wordpress-tooltips-using-plugin\"><\/a>How to Add WordPress Tooltips Using a Plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]Probably the easiest way to add tooltips to your WordPress website is to add the requisite functionality using a plugin. We will be using a free and user-friendly plugin called <a href=\"https:\/\/wordpress.org\/plugins\/wordpress-tooltips\/\" target=\"_blank\" rel=\"noopener\">WordPress Tooltips<\/a>. After <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-a-wordpress-plugin\/\">installing and activating the plugin<\/a>, you can add a tooltip by navigating to <strong>Tooltips\/Add New<\/strong> from your WordPress dashboard.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Tooltips-Add-New.jpg\" class=\"attachment-full size-full\" alt=\"Tooltips Add New\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Tooltips-Add-New.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Tooltips-Add-New-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Tooltips-Add-New-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Tooltips-Add-New-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To add a simple tooltip, give it a title, some content that will appear on mouse hover, and a synonym, or keyword, that will trigger the tooltip functionality. You can add media such as images or video to your tooltip or add multiple keywords to trigger it (though you need to separate them using a vertical bar (|) sign), but we will be using only text for this demonstration. Once you have set up your tooltip, click the <strong>Publish<\/strong> button.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Publish-Tooltip.jpg\" class=\"attachment-full size-full\" alt=\"Publish Tooltip\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Publish-Tooltip.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Publish-Tooltip-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Publish-Tooltip-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Publish-Tooltip-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To see this tooltip in action, we will start with a post and some <a href=\"https:\/\/qodeinteractive.com\/magazine\/lorem-ipsum\/\">placeholder text<\/a> making sure it contains an instance of the tooltip\u2019s keyword. The keyword is underlined by a dotted line.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"534\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Text-Tooltip-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Text Tooltip Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Text-Tooltip-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Text-Tooltip-Preview-300x165.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Text-Tooltip-Preview-768x423.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Text-Tooltip-Preview-620x342.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once we hover our mouse over it, the tooltip pops up. This tooltip will appear with each instance of the keyword across your website.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"528\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/This-is-a-sample-tooltip.jpg\" class=\"attachment-full size-full\" alt=\"This is a sample tooltip\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/This-is-a-sample-tooltip.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/This-is-a-sample-tooltip-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/This-is-a-sample-tooltip-768x418.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/This-is-a-sample-tooltip-620x338.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]However, if you wish a tooltip to appear only in a single instance, this plugin also provides you with a shortcode you can use to do just that. Again, we will begin with a post and some placeholder text. In fact, we will be editing the same post as used in the above example.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To add a one-off tooltip, you need to edit the text as HTML. Select the block and switch the drop-down menu to <em>Edit as HTML<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Edit-as-HTML-2.jpg\" class=\"attachment-full size-full\" alt=\"Edit as HTML\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Edit-as-HTML-2.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Edit-as-HTML-2-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Edit-as-HTML-2-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Edit-as-HTML-2-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Once there, replace the part of the text you wish to add a tooltip to with the following shortcode:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">[tooltips keyword=\"KEYWORD\" content=\"TOOLTIP\"]<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Of course, you need to replace KEYWORD in the shortcode with the part of the text you wish to attach a tooltip to, and replace TOOLTIP with the tooltip text. Once done, click the <strong>Update<\/strong> button.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Add-Shortcode.jpg\" class=\"attachment-full size-full\" alt=\"Add Shortcode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Add-Shortcode.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Add-Shortcode-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Add-Shortcode-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Add-Shortcode-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And there you have it, the new tooltip appears in the preview. With this shortcode, you can add however many one-off tooltips you want.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"528\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Final-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Final Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Final-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Final-Preview-300x163.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Final-Preview-768x418.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2022\/06\/Final-Preview-620x338.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">In Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]As you can see, adding tooltips to your WordPress website takes a little time and effort, but needn\u2019t cost you a penny even if you end up using a plugin. If you feel your website can benefit from some additional information about particular keywords or topics, now you know how to add it.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Check out our tutorial on all you ever really need to know about WordPress tooltips.<\/p>\n","protected":false},"author":16990,"featured_media":38434,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[15,4,13],"class_list":["post-38415","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-plugins","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/38415","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/16990"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=38415"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/38415\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/38434"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=38415"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=38415"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=38415"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}