{"id":14794,"date":"2016-11-14T14:51:56","date_gmt":"2016-11-14T13:51:56","guid":{"rendered":"https:\/\/marabelia.com\/?p=14794"},"modified":"2025-06-19T13:53:38","modified_gmt":"2025-06-19T11:53:38","slug":"how-to-modify-and-style-image-alt-and-title-tags-help-up-descriptions-in-wordpress","status":"publish","type":"post","link":"https:\/\/marabelia.com\/en\/how-to-modify-and-style-image-alt-and-title-tags-help-up-descriptions-in-wordpress\/","title":{"rendered":"How to modify and style image alt and title tags (Help-up descriptions in WordPress)"},"content":{"rendered":"
[vc_row][vc_column][vc_column_text]\n

Inexperience often leads us to unnecessarily complicate our lives. It happened to us some time ago while trying to figure out how to change the style of the yellow tooltip box (alt or title<\/em>) that provides more information about an image when you hover over it.<\/p>\n

In WordPress, the hover text for an image is added by typing in the title attribute<\/em> field within the image’s advanced options:<\/p>\n

\"screenshot-2016-11-15-at-9-16-03\"<\/p>\n

As a result, when we hover over the image, we get that text inside the aforementioned yellow box:<\/p>\n

\"\"
Screenshot of a tooltip<\/figcaption><\/figure>\n

 <\/p>\n

<\/h3>\n

1. HOW TO MODIFY THE CSS STYLE OF THE YELLOW BOX: TOOLTIP<\/em><\/h2>\n

What we wanted to do was replace that yellow box with a stylish and customized bubble, fully configurable with CSS\u2026<\/p>\n

We searched online for information, but most of it was confusing and didn\u2019t lead to any clear solution\u2026 However, we had seen this somewhere before! It couldn\u2019t be that hard!<\/p>\n

And it wasn\u2019t! We were simply searching the wrong way<\/em>. We should have started by typing “tooltip”<\/em> or what is more commonly known as a [simple_tooltip content=’It can also be called a help bubble… Aren\u2019t I cute?’] TOOLTIP<\/a><\/strong>[\/simple_tooltip] (Hover over the pink link!). Once we knew exactly what we wanted to change, everything became much easier.<\/p>\n

Within the WordPress plugin repository, there are many free plugins to generate these tooltips<\/em>. They’re not only useful for changing the style of image tooltips, but also to create descriptive bubbles for text, links, or any type of graphic element.<\/p>\n

For its simplicity and versatility, we recommend the plugin Simple Tooltips<\/strong><\/em>: https:\/\/es.wordpress.org\/plugins\/simple-tooltips\/<\/a>.<\/p>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row el_id=”tooltips” css=”.vc_custom_1548081609438{padding-top: 8% !important;}”][vc_column][vc_column_text]\n

2. SIMPLE TOOLTIPS<\/em> CONFIGURATION<\/h2>\n

Its configuration is very simple.<\/p>\n

We install and activate the plugin, then go to settings<\/em>:<\/p>\n

\"screenshot-2016-11-14-at-15-43-34\"<\/p>\n

We configure its options: Background, text color, max width, opacity, position (location of the balloon relative to the image: right, left, or center), disable on mobile (checkbox to decide if you want to deactivate it on mobile devices), and menu selectors (with a link to the tutorial explaining how to insert tooltips in the main menu of your website):<\/p>\n

\"screenshot-2016-11-14-at-15-44-00\"<\/p>\n

These would be the default values for our tooltips, but it doesn\u2019t matter, because we can also assign new values to the individual tooltips we create.<\/p>\n

 <\/p>\n

3. WHAT CODE TO USE AND HOW TO INSERT IT
\n<\/strong><\/h3>\n

To insert a simple tooltips<\/em> tooltip into an image, we can do it in several ways:<\/p>\n

3.1.1. The easiest way is to click the tooltip icon that appears in the WordPress visual editor:\u00a0\u00a0<\/span><\/h4>\n

\"tooltip\"<\/h4>\n

 <\/p>\n

3.1.2. Or manually inserting the basic code:<\/span><\/h4>\n

Example 1<\/strong> (In the visual editor):
\n[simple_tooltip content=’THIS WEBSITE IS DRIVING ME CRAZY!’]THIS TEXT TRIGGERS THE BUBBLE!<\/span><\/strong>[\/simple_tooltip]\n

[ simple_tooltip content='THIS WEBSITE IS DRIVING ME CRAZY!']THIS TEXT TRIGGERS THE BUBBLE!<\/span><\/strong>[ \/simple_tooltip ]<\/pre>\n
 <\/p>\n
Example 2<\/strong> (In the HTML editor):
\n[simple_tooltip content=’THIS WEBSITE IS DRIVING ME CRAZY!’]\"GROAOOOO!\"[\/simple_tooltip]\n
[ simple_tooltip content='THIS WEBSITE IS DRIVING ME CRAZY!' ]<img src=\"http:\/\/any-image.png\">[ \/simple_tooltip ]<\/pre>\n
 <\/p>\n
3.2.\u00a0By inserting the code manually, we can add inline styles to our bubble:<\/span><\/h4>\n
Example 3:<\/strong>
\n[simple_tooltip bubblewidth=’200′ bubbleopacity=’0.8′ bubblebgcolor=’#f23763′ bubbleposition=’right’ bubblecolor=’white’ content=’THIS WEBSITE IS DRIVING ME CRAZY!’]THIS TEXT TRIGGERS THE BUBBLE[\/simple_tooltip]\n
[ simple_tooltip bubblewidth='200' bubbleopacity='0.8' bubblebgcolor='#f23763' bubbleposition='right' bubblecolor='white' content='THIS WEBSITE IS DRIVING ME CRAZY!']THIS TEXT TRIGGERS THE BUBBLE[ \/simple_tooltip ]<\/pre>\n
 <\/p>\n
Example 4:<\/strong>
\n[simple_tooltip style=’background:#f23763;color:white;’ content=’THIS WEBSITE IS DRIVING ME CRAZY!’ ]THIS TEXT TRIGGERS THE BUBBLE.[\/simple_tooltip]\n
[ simple_tooltip style='background:#f23763;color:white;' content='THIS WEBSITE IS DRIVING ME CRAZY!' ]THIS TEXT TRIGGERS THE BUBBLE.[ \/simple_tooltip ]<\/pre>\n
 <\/p>\n
3.3. Adding the tooltips<\/em> class to the target HTML element<\/span><\/h4>\n
This method can also be useful due to its versatility. By adding the tooltips<\/em> class to the target element, we can create a tooltip in any part of the site we want. Let\u2019s see some real and practical examples of tooltips in different areas of the website.
\nExample 6:<\/strong>
\nI\u2019m a link with tooltips<\/a><\/p>\n
<a title=\"THIS WEBSITE IS DRIVING ME CRAZY!\" class=\"tooltips\" href=\"#\">I\u2019m a link with tooltips<\/a><\/pre>\n
 <\/p>\n
Example 5:<\/strong>
\n\"\"<\/p>\n
<img class=\"tooltips\" title=\"GROAOOOO!\" src=\"https:\/\/path-to-image.png\" alt=\"marabelia\" width=\"300\" height=\"48\" \/><\/pre>\n
 <\/p>\n
Example 6:<\/strong><\/p>\n
I\u2019m a whole paragraph with tooltips. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\n
<p class=\"tooltips\" title=\"THIS WEBSITE IS DRIVING ME CRAZY!\">I\u2019m a whole paragraph with tooltips. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p><\/pre>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row el_id=”contact” css=”.vc_custom_1548081621565{padding-top: 10% !important;}”][vc_column][vc_column_text]\n
4. ADDING TOOLTIPS TO OTHER EXTERNAL ELEMENTS<\/h2>\n
4.1. TOOLTIP TEXT IN CONTACT FORM (WITH CONTACT FORM 7)<\/h3>\n
Now that we\u2019ve seen the different ways to activate our tooltips<\/em>, let\u2019s apply this effect to elements outside of the WordPress visual\/html editor. For example, we think it\u2019s very useful to include it in contact forms to provide users with more information. To do this, we\u2019ll use the form generator Contact Form 7<\/a>.<\/p>\n
We create a new form and, by default, we have this configuration:<\/p>\n
<label> Name (required)\r\n[text* your-name] <\/label>\r\n<label> Your email (required)\r\n[email* your-email] <\/label>\r\n<label> Subject\r\n[text your-subject] <\/label>\r\n<label> Message\r\n[textarea your-message] <\/label>\r\n[submit \"Send\"]<\/pre>\n
We\u2019ll replace the default configuration with this:<\/p>\n
<p class=\"tooltips\" title=\"Enter your real name\">Name:\u00a0 [text* your-name]<\/p>\r\n<p class=\"tooltips\" title=\"Enter a valid email address\">E-mail:\u00a0 [email* your-email]<\/p>\r\n<p class=\"tooltips\" title=\"What is this about?\">Subject:\u00a0 [text your-subject]<\/p>\r\n<p class=\"tooltips\" title=\"Keep it brief and use punctuation marks\">Message:\u00a0\u00a0\u00a0 [textarea your-message] <\/p>\r\n<p class=\"tooltips\" title=\"The file can't be larger than 2 GB! Don't overdo it!\">If you want, you can attach a file:\r\n[file file-817]<\/p>\r\n[submit \"SEND\"]<\/pre>\n
With this sample code, we\u2019ll get a contact form like the one we saw above.<\/p>\n
Now let\u2019s improve the appearance of our form by integrating the placeholder text inside the input fields and also including tooltip descriptions:<\/strong><\/p>\n[contact-form-7 id=”8202″ title=”blog tooltips”]\n
It\u2019s as simple as this:<\/p>\n
<p class=\"tooltips\" title=\"Enter your real name\">[text* text-297 \"Name\"]\u00a0 <\/p>\r\n<p class=\"tooltips\" title=\"Enter a valid email address\">[email email-829 \"e-mail\"] <\/p>\r\n<p class=\"tooltips\" title=\"We\u2019re going to call you! Ring!\">[tel tel-165 \"Phone\"] <\/p>\r\n<p class=\"tooltips\" title=\"Where are you from?\">[text text-7 \"City\"] <\/p>\r\n<p class=\"tooltips\" title=\"What do you want?\">[select menu-322\u00a0 \"I want to request a quote\" \"I want to work\/collaborate with you\" \"I want to ask something...\"]<\/p>\r\n<p class=\"tooltips\" title=\"Explain yourself while you still can!\">[textarea textarea-424 3x6\/300\u00a0 \"Tell us more\"]<\/p>\r\n<p class=\"tooltips\" title=\"Go for it!\"> [submit \"SEND\"]<\/p><\/pre>\n[\/vc_column_text][\/vc_column][\/vc_row][vc_row css=”.vc_custom_1548103292030{padding-top: 10% !important;}”][vc_column][vc_column_text]\n
5. TOOLTIPS IN SLIDER REVOLUTION (Easy Coordinate Maps)<\/h2>\n
We\u2019re going to apply an example of tooltips in a slider \u2014 in this case, we\u2019re using Revolution Slider from Envato<\/a><\/strong>, which we believe is the best plugin on the market for creating slides due to its features. Although Layer Slider is also quite good and allows us to perform almost the same actions. Let\u2019s take a look at an example:<\/p>\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\t
There is nothing to show here!<\/div>\n\t\t\t\t\t\t
Slider with alias slider with tooltips not found.<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/rs-module>\n\t\t\t<\/rs-module-wrap>\n\t\t\t