{"id":637,"date":"2015-08-11T09:12:57","date_gmt":"2015-08-10T21:12:57","guid":{"rendered":"http:\/\/geektactics.geektamin.com\/?p=637"},"modified":"2024-06-14T09:51:40","modified_gmt":"2024-06-13T21:51:40","slug":"how-to-have-titles-appear-in-lightbox-but-not-as-tooltip","status":"publish","type":"post","link":"https:\/\/geektactics.co.nz\/blog\/how-to-have-titles-appear-in-lightbox-but-not-as-tooltip\/","title":{"rendered":"How to Have Titles Appear in Lightbox But Not as Tooltip"},"content":{"rendered":"
Back in WordPress 3.7 WordPress finally got rid of the ‘title’ tag from images in galleries. \u00a0This title tag created an annoying tooltip when visitors\u00a0hovered over gallery images, which interfered with nice design. \u00a0Like this:<\/p>\n
<\/p>\n
However many lightbox plugins used that title tag to display the name\u00a0of the image. This means that many WordPress site owners\u00a0now find that there are no image descriptions in their lightbox.<\/p>\n
So lightboxes enable you to choose where the description is pulled from. But in my case I could only use the ‘title’ tag on the hyperlink.<\/p>\n
So to solve this I did two things:<\/p>\n
<\/p>\n
How you do this\u00a0will depend on what gallery you’re using. \u00a0If you are using a standard WordPress gallery then add this code your you child theme’s functions.php file or your custom functions plugin.<\/p>\n
\/* This adds the title to a standard WP gallery *\/\r\nfunction add_title_attachment_link($link, $id = null) {\r\n $id = intval( $id );\r\n $_post = get_post( $id );\r\n $post_title = esc_attr( $_post->post_title );\r\n return str_replace('<a href', '<a title=\"'. $post_title .'\" href', $link);\r\n}\r\nadd_filter('wp_get_attachment_link', 'add_title_attachment_link', 10, 2);<\/pre>\n<\/p>\n
Now you have those annoying tooltips back when viewing your gallery!<\/p>\n
Step 2: use jQuery to hide the tooltip<\/h2>\n
This little bit of jQuery\u00a0removes the title when you hover over the image – so no tooltip appears – and then puts the title back when you mouseout or click, so that the title appears for your lightbox.<\/p>\n
(Note – we use “mousedown” instead of “click”, so that the title is put back in place before your lightbox plugin looks for the title).<\/p>\n
To make this code work, you need to look in your HTML and find a class that is assigned to the hyperlink that triggers the lightbox. \u00a0In my case the class is
mfp-image<\/code> which is why the ‘removeTitleSelector’ is set to
a.mfp-image<\/code>. \u00a0Change this to whatever class your hpyerlink is.<\/p>\n
Again, add this code to your functions.php file in your child theme, or in your custom functions plugin.<\/p>\n
\/* This hides the tooltip in the gallery *\/\r\n\r\nfunction hide_tooltip(){\r\n?>\r\n<script>\r\n\/*\r\n * jQuery remove title browser tooltip\r\n *\/\r\nvar removeTitleSelector = 'a.mfp-image';\r\njQuery('body').on('mouseover', removeTitleSelector, function () {\r\n jQuery(this).data('title', jQuery(this).attr('title'));\r\n jQuery(this).removeAttr('title');\r\n}).on('mousedown mouseout', removeTitleSelector, function () {\r\n jQuery(this).attr('title', jQuery(this).data('title'));\r\n});\r\n<\/script>\r\n<?php\r\n}\r\nadd_action('wp_footer','hide_tooltip');\r\n\r\n\/* end of gallery tooltip hiding code *\/<\/pre>\n<\/p>\n
I hope you find this helpful for display descriptions\/titles in your lightboxes.<\/p>\n","protected":false},"excerpt":{"rendered":"
Back in WordPress 3.7 WordPress finally got rid of the ‘title’ tag from images in galleries. \u00a0This title tag created an annoying tooltip when visitors\u00a0hovered over gallery images, which interfered with nice design. \u00a0Like this: However many lightbox plugins used that title tag to display the name\u00a0of the image. This means that many WordPress site […]<\/p>\n","protected":false},"author":5,"featured_media":638,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14],"tags":[24,20,96],"class_list":["post-637","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-lightbox","tag-troubleshooting-wordpress","tag-wordpress-plugins"],"yoast_head":"\n
How to Have Titles Appear in Lightbox But Not as Tooltip<\/title>\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\t\n\n\n\t\n\t\n\t\n