{"id":5166,"date":"2016-09-28T18:23:34","date_gmt":"2016-09-28T12:53:34","guid":{"rendered":"https:\/\/email.uplers.com\/blogs\/?p=5166"},"modified":"2022-05-18T16:22:50","modified_gmt":"2022-05-18T10:52:50","slug":"tooltip-email-one-interactive-approach","status":"publish","type":"post","link":"https:\/\/email.uplers.com\/blog\/tooltip-email-one-interactive-approach\/","title":{"rendered":"Tooltip in Email: One More Interactive Approach"},"content":{"rendered":"\n<p>In between preparing <a href=\"https:\/\/email.uplers.com\/blog\/email-advancements-holiday-campaigns\/\" target=\"_blank\" rel=\"noopener noreferrer\">a Holiday Calendar and Planner<\/a> for 2016 and coding your beautifully designed emails, the workplace has been buzzing with activities. But this has never come between the Monks\u2019 passion for making email a better and enjoyable domain. Uplers are always ahead in implementing interactive elements in email with global compatibility (including fallback for the non-supportive devices). You may sample all the interactive email elements.<\/p>\n<p>Today we have come up with another interactive element which is <strong>ToolTip<\/strong>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-5173 size-full aligncenter\" title=\"Tooltip in email\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/09\/Tooltip-in-email-example.png\" alt=\"Tooltip in email\" width=\"471\" height=\"199\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/09\/Tooltip-in-email-example.png 471w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/09\/Tooltip-in-email-example-300x127.png 300w\" sizes=\"auto, (max-width: 471px) 100vw, 471px\" \/><\/p>\n<p>As per definition, the tooltip is a small &#8220;hover box&#8221; with information about the item being clicked\/ hovered over by the user.<\/p>\n<h2>Advantages:<\/h2>\n<p>Email is a medium of quick yet brief interaction. With an average email, read time is an average 11 seconds. This said we cannot risk adding the entire content within the email since it may turn into a mess of text &amp; become boring.<\/p>\n<p>ToolTip can be a very useful interactive element for compressing email content without actually sacrificing the email length. In simpler terms, you can manage to show the additional content without occupying additional added space with it.<\/p>\n<h2>How it works:<\/h2>\n<p>The popup content will be only visible once the information icon or the CTA is been clicked.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-5177 size-full aligncenter\" title=\"Tooltip in email\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/09\/Tooltip-in-email-Live-example.jpg\" alt=\"Tooltip in email\" width=\"640\" height=\"1136\"\/><\/p>\n<p>This way only the viewer who is interested viewer will \u2018click\u2019 it to view the additional information \u2013 a great useful feature ; very useful for mobile users.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-5178 size-full aligncenter\" title=\"Tooltip in email\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/09\/Tooltip-in-email-Live-pop-up.jpg\" alt=\"Tooltip in email\" width=\"640\" height=\"1136\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/09\/Tooltip-in-email-Live-pop-up.jpg 640w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/09\/Tooltip-in-email-Live-pop-up-169x300.jpg 169w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/09\/Tooltip-in-email-Live-pop-up-577x1024.jpg 577w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/09\/Tooltip-in-email-Live-pop-up-79x140.jpg 79w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/09\/Tooltip-in-email-Live-pop-up-624x1108.jpg 624w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/p>\n<p>It needs to be coded using &lt;Form&gt; elements, as explained below:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-5172 size-full aligncenter\" title=\"Tooltip in email\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/09\/Tooltip-in-email-code-example.jpg\" alt=\"Tooltip in email\" width=\"1864\" height=\"544\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/09\/Tooltip-in-email-code-example.jpg 1864w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/09\/Tooltip-in-email-code-example-300x88.jpg 300w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/09\/Tooltip-in-email-code-example-768x224.jpg 768w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/09\/Tooltip-in-email-code-example-1024x299.jpg 1024w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/09\/Tooltip-in-email-code-example-624x182.jpg 624w\" sizes=\"auto, (max-width: 1864px) 100vw, 1864px\" \/><\/p>\n<h2>Scope of Real World Implementation:<\/h2>\n<ul>\n<li>Apparels store can show elaborate information on their products when the user clicks it.<\/li>\n<li>Email can contain an excerpt of the e-book in which certain words can be highlighted to be redirected to different links.<\/li>\n<li>Tourism companies can share amazing destinations with related package details displayed on correct word.<\/li>\n<li>Combined with forms in emails, it can be used to provide helpful information.<\/li>\n<\/ul>\n<h2>Real world Examples:<\/h2>\n<p>BBC promoted their upcoming series by sending an email to their subscribers with multiple tooltips. On clicking any of the (+) sign, a tooltip pops out with information about respective animal.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-12324 size-full\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/09\/BBC-Mail.gif\" alt=\"Tooltip in email BBC-Mail\" width=\"696\" height=\"968\"\/><\/p>\n<h2>Compatibility:<\/h2>\n<p>The compatibility will be currently limited to Apple Mail and Thunderbird.<\/p>\n<p>To make it globally compatible we need to use few email hacks, for supportive and non-supportive <a href=\"https:\/\/email.uplers.com\/infographics\/ultimate-guide-email-client-hacks\/\">email clients<\/a>.<\/p>\n<ul>\n<li>For supportive email client, we need to use client specific hack to force the email client to render the interactivity.<\/li>\n<li>For non-supportive email client we need to use client specific hack to force the email client to render the fall-back version.<\/li>\n<\/ul>\n<p>Additionally, the point of concern will be Yahoo! Mail. On testing, Yahoo! mail displays both tooltip and the fall-back. The <a href=\"https:\/\/email.uplers.com\/hire-dedicated-email-developer\/\">email developers<\/a> must be prepared to find a workaround for Yahoo Mail.<\/p>\n<p>Do you think you can provide help in finding workaround? Start the conversation in the comments below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In between preparing a Holiday Calendar and Planner for 2016 and coding your beautifully designed emails, the workplace has been buzzing with activities. But this has never come between the Monks\u2019 passion for making email a better and enjoyable domain. Uplers are always ahead in implementing interactive elements in email with global compatibility (including fallback [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5171,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-5166","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-email-marketing"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tooltip in Email - One More Interactive Approach<\/title>\n<meta name=\"description\" content=\"Ever faced a scenario where you could provide more information without adding the email length? Interactivity using Tooltip in email can be your answer.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/email.uplers.com\/blog\/tooltip-email-one-interactive-approach\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tooltip in Email - One More Interactive Approach\" \/>\n<meta property=\"og:description\" content=\"Ever faced a scenario where you could provide more information without adding the email length? Interactivity using Tooltip in email can be your answer.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/email.uplers.com\/blog\/tooltip-email-one-interactive-approach\/\" \/>\n<meta property=\"og:site_name\" content=\"Email Uplers\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/email.uplers\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-09-28T12:53:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-05-18T10:52:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/09\/Interactive-Tooltip-in-Emails-540x282.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"540\" \/>\n\t<meta property=\"og:image:height\" content=\"282\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Kevin George\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@email_uplers\" \/>\n<meta name=\"twitter:site\" content=\"@email_uplers\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kevin George\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/email.uplers.com\/blog\/tooltip-email-one-interactive-approach\/\",\"url\":\"https:\/\/email.uplers.com\/blog\/tooltip-email-one-interactive-approach\/\",\"name\":\"Tooltip in Email - One More Interactive Approach\",\"isPartOf\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/tooltip-email-one-interactive-approach\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/tooltip-email-one-interactive-approach\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/09\/Interactive-Tooltip-in-Emails.jpg\",\"author\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/7ffa431167e8be5eb07b050cd5c663fa\"},\"description\":\"Ever faced a scenario where you could provide more information without adding the email length? Interactivity using Tooltip in email can be your answer.\",\"breadcrumb\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/tooltip-email-one-interactive-approach\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/email.uplers.com\/blog\/tooltip-email-one-interactive-approach\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/email.uplers.com\/blog\/tooltip-email-one-interactive-approach\/#primaryimage\",\"url\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/09\/Interactive-Tooltip-in-Emails.jpg\",\"contentUrl\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/09\/Interactive-Tooltip-in-Emails.jpg\",\"width\":\"1170\",\"height\":\"470\",\"caption\":\"Tooltip in emails\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/email.uplers.com\/blog\/tooltip-email-one-interactive-approach\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/email.uplers.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tooltip in Email: One More Interactive Approach\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/email.uplers.com\/blog\/#website\",\"url\":\"https:\/\/email.uplers.com\/blog\/\",\"name\":\"Email Uplers\",\"description\":\"Email Marketing Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/email.uplers.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/7ffa431167e8be5eb07b050cd5c663fa\",\"name\":\"Kevin George\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/03\/Img-96x96.png\",\"contentUrl\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/03\/Img-96x96.png\",\"caption\":\"Kevin George\"},\"description\":\"Kevin is the Head of Marketing at Email Uplers, one of the fastest-growing full-service email marketing companies. He is an email enthusiast at heart and loves to pen down email marketing content. You can reach him at kevin.g@uplers.com or connect with him on LinkedIn.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/kevin-george-email\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tooltip in Email - One More Interactive Approach","description":"Ever faced a scenario where you could provide more information without adding the email length? Interactivity using Tooltip in email can be your answer.","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:\/\/email.uplers.com\/blog\/tooltip-email-one-interactive-approach\/","og_locale":"en_US","og_type":"article","og_title":"Tooltip in Email - One More Interactive Approach","og_description":"Ever faced a scenario where you could provide more information without adding the email length? Interactivity using Tooltip in email can be your answer.","og_url":"https:\/\/email.uplers.com\/blog\/tooltip-email-one-interactive-approach\/","og_site_name":"Email Uplers","article_publisher":"https:\/\/www.facebook.com\/email.uplers\/","article_published_time":"2016-09-28T12:53:34+00:00","article_modified_time":"2022-05-18T10:52:50+00:00","og_image":[{"width":540,"height":282,"url":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/09\/Interactive-Tooltip-in-Emails-540x282.jpg","type":"image\/jpeg"}],"author":"Kevin George","twitter_card":"summary_large_image","twitter_creator":"@email_uplers","twitter_site":"@email_uplers","twitter_misc":{"Written by":"Kevin George","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/email.uplers.com\/blog\/tooltip-email-one-interactive-approach\/","url":"https:\/\/email.uplers.com\/blog\/tooltip-email-one-interactive-approach\/","name":"Tooltip in Email - One More Interactive Approach","isPartOf":{"@id":"https:\/\/email.uplers.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/email.uplers.com\/blog\/tooltip-email-one-interactive-approach\/#primaryimage"},"image":{"@id":"https:\/\/email.uplers.com\/blog\/tooltip-email-one-interactive-approach\/#primaryimage"},"thumbnailUrl":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/09\/Interactive-Tooltip-in-Emails.jpg","author":{"@id":"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/7ffa431167e8be5eb07b050cd5c663fa"},"description":"Ever faced a scenario where you could provide more information without adding the email length? Interactivity using Tooltip in email can be your answer.","breadcrumb":{"@id":"https:\/\/email.uplers.com\/blog\/tooltip-email-one-interactive-approach\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/email.uplers.com\/blog\/tooltip-email-one-interactive-approach\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/email.uplers.com\/blog\/tooltip-email-one-interactive-approach\/#primaryimage","url":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/09\/Interactive-Tooltip-in-Emails.jpg","contentUrl":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2016\/09\/Interactive-Tooltip-in-Emails.jpg","width":"1170","height":"470","caption":"Tooltip in emails"},{"@type":"BreadcrumbList","@id":"https:\/\/email.uplers.com\/blog\/tooltip-email-one-interactive-approach\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/email.uplers.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Tooltip in Email: One More Interactive Approach"}]},{"@type":"WebSite","@id":"https:\/\/email.uplers.com\/blog\/#website","url":"https:\/\/email.uplers.com\/blog\/","name":"Email Uplers","description":"Email Marketing Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/email.uplers.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/7ffa431167e8be5eb07b050cd5c663fa","name":"Kevin George","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/03\/Img-96x96.png","contentUrl":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2019\/03\/Img-96x96.png","caption":"Kevin George"},"description":"Kevin is the Head of Marketing at Email Uplers, one of the fastest-growing full-service email marketing companies. He is an email enthusiast at heart and loves to pen down email marketing content. You can reach him at kevin.g@uplers.com or connect with him on LinkedIn.","sameAs":["https:\/\/www.linkedin.com\/in\/kevin-george-email\/"]}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts\/5166","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/comments?post=5166"}],"version-history":[{"count":23,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts\/5166\/revisions"}],"predecessor-version":[{"id":31727,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts\/5166\/revisions\/31727"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/media\/5171"}],"wp:attachment":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/media?parent=5166"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/categories?post=5166"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/tags?post=5166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}