{"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

\"tooltip-annoying\"<\/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

    \n
  1. Added titles back into the hyperlink that triggers the lightbox.<\/li>\n
  2. Ran some jQuery code to hide the title from displaying a tooltip, but then show it again so the lightbox shows the title as the description.<\/li>\n<\/ol>\n

     <\/p>\n

    Step 1: \u00a0Add Titles Back into Hyperlink<\/h2>\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":"\nHow to Have Titles Appear in Lightbox But Not as Tooltip<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/geektactics.co.nz\/blog\/how-to-have-titles-appear-in-lightbox-but-not-as-tooltip\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Have Titles Appear in Lightbox But Not as Tooltip\" \/>\n<meta property=\"og:description\" content=\"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 […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/geektactics.co.nz\/blog\/how-to-have-titles-appear-in-lightbox-but-not-as-tooltip\/\" \/>\n<meta property=\"og:site_name\" content=\"Geektactics\" \/>\n<meta property=\"article:published_time\" content=\"2015-08-10T21:12:57+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-13T21:51:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/geektactics.co.nz\/wp-content\/uploads\/sites\/2\/2015\/08\/tooltip-annoying.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"239\" \/>\n\t<meta property=\"og:image:height\" content=\"235\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Josh Moore\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Josh Moore\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/geektactics.co.nz\/blog\/how-to-have-titles-appear-in-lightbox-but-not-as-tooltip\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/geektactics.co.nz\/blog\/how-to-have-titles-appear-in-lightbox-but-not-as-tooltip\/\"},\"author\":{\"name\":\"Josh Moore\",\"@id\":\"https:\/\/geektactics.co.nz\/#\/schema\/person\/6bb496f93975e50731c7b169c39bc4ab\"},\"headline\":\"How to Have Titles Appear in Lightbox But Not as Tooltip\",\"datePublished\":\"2015-08-10T21:12:57+00:00\",\"dateModified\":\"2024-06-13T21:51:40+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/geektactics.co.nz\/blog\/how-to-have-titles-appear-in-lightbox-but-not-as-tooltip\/\"},\"wordCount\":357,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/geektactics.co.nz\/#organization\"},\"image\":{\"@id\":\"https:\/\/geektactics.co.nz\/blog\/how-to-have-titles-appear-in-lightbox-but-not-as-tooltip\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/geektactics.co.nz\/wp-content\/uploads\/sites\/2\/2015\/08\/tooltip-annoying.jpg\",\"keywords\":[\"lightbox\",\"troubleshooting Wordpress\",\"wordpress plugins\"],\"articleSection\":[\"Wordpress\"],\"inLanguage\":\"en-NZ\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/geektactics.co.nz\/blog\/how-to-have-titles-appear-in-lightbox-but-not-as-tooltip\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/geektactics.co.nz\/blog\/how-to-have-titles-appear-in-lightbox-but-not-as-tooltip\/\",\"url\":\"https:\/\/geektactics.co.nz\/blog\/how-to-have-titles-appear-in-lightbox-but-not-as-tooltip\/\",\"name\":\"How to Have Titles Appear in Lightbox But Not as Tooltip\",\"isPartOf\":{\"@id\":\"https:\/\/geektactics.co.nz\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/geektactics.co.nz\/blog\/how-to-have-titles-appear-in-lightbox-but-not-as-tooltip\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/geektactics.co.nz\/blog\/how-to-have-titles-appear-in-lightbox-but-not-as-tooltip\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/geektactics.co.nz\/wp-content\/uploads\/sites\/2\/2015\/08\/tooltip-annoying.jpg\",\"datePublished\":\"2015-08-10T21:12:57+00:00\",\"dateModified\":\"2024-06-13T21:51:40+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/geektactics.co.nz\/blog\/how-to-have-titles-appear-in-lightbox-but-not-as-tooltip\/#breadcrumb\"},\"inLanguage\":\"en-NZ\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/geektactics.co.nz\/blog\/how-to-have-titles-appear-in-lightbox-but-not-as-tooltip\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-NZ\",\"@id\":\"https:\/\/geektactics.co.nz\/blog\/how-to-have-titles-appear-in-lightbox-but-not-as-tooltip\/#primaryimage\",\"url\":\"https:\/\/geektactics.co.nz\/wp-content\/uploads\/sites\/2\/2015\/08\/tooltip-annoying.jpg\",\"contentUrl\":\"https:\/\/geektactics.co.nz\/wp-content\/uploads\/sites\/2\/2015\/08\/tooltip-annoying.jpg\",\"width\":239,\"height\":235},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/geektactics.co.nz\/blog\/how-to-have-titles-appear-in-lightbox-but-not-as-tooltip\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/geektactics.co.nz\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Have Titles Appear in Lightbox But Not as Tooltip\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/geektactics.co.nz\/#website\",\"url\":\"https:\/\/geektactics.co.nz\/\",\"name\":\"Geektactics\",\"description\":\"Interesting Stuff for Geeks\",\"publisher\":{\"@id\":\"https:\/\/geektactics.co.nz\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/geektactics.co.nz\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-NZ\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/geektactics.co.nz\/#organization\",\"name\":\"Geektactics\",\"url\":\"https:\/\/geektactics.co.nz\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-NZ\",\"@id\":\"https:\/\/geektactics.co.nz\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/geektactics.co.nz\/wp-content\/uploads\/sites\/2\/2024\/06\/geektactics-logo.png\",\"contentUrl\":\"https:\/\/geektactics.co.nz\/wp-content\/uploads\/sites\/2\/2024\/06\/geektactics-logo.png\",\"width\":2001,\"height\":831,\"caption\":\"Geektactics\"},\"image\":{\"@id\":\"https:\/\/geektactics.co.nz\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/geektactics.co.nz\/#\/schema\/person\/6bb496f93975e50731c7b169c39bc4ab\",\"name\":\"Josh Moore\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-NZ\",\"@id\":\"https:\/\/geektactics.co.nz\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2bea43488633fc79ace340300f8ab6d6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2bea43488633fc79ace340300f8ab6d6?s=96&d=mm&r=g\",\"caption\":\"Josh Moore\"},\"description\":\"I love marketing and technology. I run Duoplus Online Marketing and enjoy helping companies grow their income especially through using online marketing effectively.\",\"sameAs\":[\"https:\/\/www.duoplus.nz\"],\"url\":\"https:\/\/geektactics.co.nz\/blog\/author\/josh\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Have Titles Appear in Lightbox But Not as Tooltip","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:\/\/geektactics.co.nz\/blog\/how-to-have-titles-appear-in-lightbox-but-not-as-tooltip\/","og_locale":"en_US","og_type":"article","og_title":"How to Have Titles Appear in Lightbox But Not as Tooltip","og_description":"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 […]","og_url":"https:\/\/geektactics.co.nz\/blog\/how-to-have-titles-appear-in-lightbox-but-not-as-tooltip\/","og_site_name":"Geektactics","article_published_time":"2015-08-10T21:12:57+00:00","article_modified_time":"2024-06-13T21:51:40+00:00","og_image":[{"width":239,"height":235,"url":"https:\/\/geektactics.co.nz\/wp-content\/uploads\/sites\/2\/2015\/08\/tooltip-annoying.jpg","type":"image\/jpeg"}],"author":"Josh Moore","twitter_misc":{"Written by":"Josh Moore","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/geektactics.co.nz\/blog\/how-to-have-titles-appear-in-lightbox-but-not-as-tooltip\/#article","isPartOf":{"@id":"https:\/\/geektactics.co.nz\/blog\/how-to-have-titles-appear-in-lightbox-but-not-as-tooltip\/"},"author":{"name":"Josh Moore","@id":"https:\/\/geektactics.co.nz\/#\/schema\/person\/6bb496f93975e50731c7b169c39bc4ab"},"headline":"How to Have Titles Appear in Lightbox But Not as Tooltip","datePublished":"2015-08-10T21:12:57+00:00","dateModified":"2024-06-13T21:51:40+00:00","mainEntityOfPage":{"@id":"https:\/\/geektactics.co.nz\/blog\/how-to-have-titles-appear-in-lightbox-but-not-as-tooltip\/"},"wordCount":357,"commentCount":0,"publisher":{"@id":"https:\/\/geektactics.co.nz\/#organization"},"image":{"@id":"https:\/\/geektactics.co.nz\/blog\/how-to-have-titles-appear-in-lightbox-but-not-as-tooltip\/#primaryimage"},"thumbnailUrl":"https:\/\/geektactics.co.nz\/wp-content\/uploads\/sites\/2\/2015\/08\/tooltip-annoying.jpg","keywords":["lightbox","troubleshooting Wordpress","wordpress plugins"],"articleSection":["Wordpress"],"inLanguage":"en-NZ","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/geektactics.co.nz\/blog\/how-to-have-titles-appear-in-lightbox-but-not-as-tooltip\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/geektactics.co.nz\/blog\/how-to-have-titles-appear-in-lightbox-but-not-as-tooltip\/","url":"https:\/\/geektactics.co.nz\/blog\/how-to-have-titles-appear-in-lightbox-but-not-as-tooltip\/","name":"How to Have Titles Appear in Lightbox But Not as Tooltip","isPartOf":{"@id":"https:\/\/geektactics.co.nz\/#website"},"primaryImageOfPage":{"@id":"https:\/\/geektactics.co.nz\/blog\/how-to-have-titles-appear-in-lightbox-but-not-as-tooltip\/#primaryimage"},"image":{"@id":"https:\/\/geektactics.co.nz\/blog\/how-to-have-titles-appear-in-lightbox-but-not-as-tooltip\/#primaryimage"},"thumbnailUrl":"https:\/\/geektactics.co.nz\/wp-content\/uploads\/sites\/2\/2015\/08\/tooltip-annoying.jpg","datePublished":"2015-08-10T21:12:57+00:00","dateModified":"2024-06-13T21:51:40+00:00","breadcrumb":{"@id":"https:\/\/geektactics.co.nz\/blog\/how-to-have-titles-appear-in-lightbox-but-not-as-tooltip\/#breadcrumb"},"inLanguage":"en-NZ","potentialAction":[{"@type":"ReadAction","target":["https:\/\/geektactics.co.nz\/blog\/how-to-have-titles-appear-in-lightbox-but-not-as-tooltip\/"]}]},{"@type":"ImageObject","inLanguage":"en-NZ","@id":"https:\/\/geektactics.co.nz\/blog\/how-to-have-titles-appear-in-lightbox-but-not-as-tooltip\/#primaryimage","url":"https:\/\/geektactics.co.nz\/wp-content\/uploads\/sites\/2\/2015\/08\/tooltip-annoying.jpg","contentUrl":"https:\/\/geektactics.co.nz\/wp-content\/uploads\/sites\/2\/2015\/08\/tooltip-annoying.jpg","width":239,"height":235},{"@type":"BreadcrumbList","@id":"https:\/\/geektactics.co.nz\/blog\/how-to-have-titles-appear-in-lightbox-but-not-as-tooltip\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/geektactics.co.nz\/"},{"@type":"ListItem","position":2,"name":"How to Have Titles Appear in Lightbox But Not as Tooltip"}]},{"@type":"WebSite","@id":"https:\/\/geektactics.co.nz\/#website","url":"https:\/\/geektactics.co.nz\/","name":"Geektactics","description":"Interesting Stuff for Geeks","publisher":{"@id":"https:\/\/geektactics.co.nz\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/geektactics.co.nz\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-NZ"},{"@type":"Organization","@id":"https:\/\/geektactics.co.nz\/#organization","name":"Geektactics","url":"https:\/\/geektactics.co.nz\/","logo":{"@type":"ImageObject","inLanguage":"en-NZ","@id":"https:\/\/geektactics.co.nz\/#\/schema\/logo\/image\/","url":"https:\/\/geektactics.co.nz\/wp-content\/uploads\/sites\/2\/2024\/06\/geektactics-logo.png","contentUrl":"https:\/\/geektactics.co.nz\/wp-content\/uploads\/sites\/2\/2024\/06\/geektactics-logo.png","width":2001,"height":831,"caption":"Geektactics"},"image":{"@id":"https:\/\/geektactics.co.nz\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/geektactics.co.nz\/#\/schema\/person\/6bb496f93975e50731c7b169c39bc4ab","name":"Josh Moore","image":{"@type":"ImageObject","inLanguage":"en-NZ","@id":"https:\/\/geektactics.co.nz\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2bea43488633fc79ace340300f8ab6d6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2bea43488633fc79ace340300f8ab6d6?s=96&d=mm&r=g","caption":"Josh Moore"},"description":"I love marketing and technology. I run Duoplus Online Marketing and enjoy helping companies grow their income especially through using online marketing effectively.","sameAs":["https:\/\/www.duoplus.nz"],"url":"https:\/\/geektactics.co.nz\/blog\/author\/josh\/"}]}},"_links":{"self":[{"href":"https:\/\/geektactics.co.nz\/wp-json\/wp\/v2\/posts\/637"}],"collection":[{"href":"https:\/\/geektactics.co.nz\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/geektactics.co.nz\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/geektactics.co.nz\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/geektactics.co.nz\/wp-json\/wp\/v2\/comments?post=637"}],"version-history":[{"count":1,"href":"https:\/\/geektactics.co.nz\/wp-json\/wp\/v2\/posts\/637\/revisions"}],"predecessor-version":[{"id":639,"href":"https:\/\/geektactics.co.nz\/wp-json\/wp\/v2\/posts\/637\/revisions\/639"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/geektactics.co.nz\/wp-json\/wp\/v2\/media\/638"}],"wp:attachment":[{"href":"https:\/\/geektactics.co.nz\/wp-json\/wp\/v2\/media?parent=637"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/geektactics.co.nz\/wp-json\/wp\/v2\/categories?post=637"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/geektactics.co.nz\/wp-json\/wp\/v2\/tags?post=637"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}