{"id":25415,"date":"2018-02-07T11:04:57","date_gmt":"2018-02-07T01:04:57","guid":{"rendered":"https:\/\/codemyui.com\/?p=25415"},"modified":"2018-02-07T11:04:57","modified_gmt":"2018-02-07T01:04:57","slug":"quote-card-dictionary-like-tooltip","status":"publish","type":"post","link":"https:\/\/codemyui.com\/quote-card-dictionary-like-tooltip\/","title":{"rendered":"Quote Card with Dictionary Like Tooltip"},"content":{"rendered":"<p>In this <a href=\"https:\/\/codemyui.com\/tag\/pure-css\/\">CSS only snippet<\/a> designed by Matthias Martin we have a <a href=\"https:\/\/codemyui.com\/tag\/card-ui\/\">card UI<\/a> for the <a href=\"https:\/\/codemyui.com\/tag\/quotes\/\">quotes section<\/a> of a website with a <a href=\"https:\/\/codemyui.com\/tag\/tooltip\/\">tooltip<\/a> that shows a dictionary-like definition of the highlighted word. <\/p>\n<p><!--more--><\/p>\n<p>If you are having trouble with the pen, try the archived copy on <a href=\"https:\/\/gist.github.com\/CodeMyUI\/7364fb0aeeedb71ccaeacf66ffad226a\" rel=\"noopener\" target=\"_blank\">GitHub<\/a><\/p>\n<h2>Dictionary Like Tooltip Snippet<\/h2>\n<p class='codepen'  data-height='542' data-theme-id='0' data-slug-hash='gPyzEa' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen 012 \u2013 Tooltip by Matthias Martin (@roydigerhund) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>In this CSS only snippet designed by Matthias Martin we have a card UI for the quotes section of a website with a tooltip that shows a dictionary-like definition of the highlighted word.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/quote-card-dictionary-like-tooltip\/ \">Read More<\/a>","protected":false},"author":1,"featured_media":25416,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[177948406,192416248,30305495,755,796127],"class_list":["post-25415","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-card-ui","tag-hover-animation","tag-pure-css","tag-quotes","tag-tooltip","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/02\/quote-card-with-dictionary-like-tooltip.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":15757,"url":"https:\/\/codemyui.com\/multicoloured-pure-css-tooltips\/","url_meta":{"origin":25415,"position":0},"title":"Multicoloured Pure CSS Tooltips","author":"Hima Vincent","date":"May 17, 2017","format":false,"excerpt":"This snippet designed by Samuel Janes is great if you want to show tooltips on your next web design project. These are in pure CSS and you have the option to show images or text in them. When you hover over the buttons the hidden message comes into view on\u2026","rel":"","context":"In \"hidden content\"","block_context":{"text":"hidden content","link":"https:\/\/codemyui.com\/tag\/hidden-content\/"},"img":{"alt_text":"Multicoloured Pure CSS Tooltips","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/multicoloured-pure-css-tooltips.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/multicoloured-pure-css-tooltips.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/multicoloured-pure-css-tooltips.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/multicoloured-pure-css-tooltips.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":19981,"url":"https:\/\/codemyui.com\/multi-directional-css-tooltip-text-buttons\/","url_meta":{"origin":25415,"position":1},"title":"Multi Directional CSS Tooltip for Text and Buttons","author":"Hima Vincent","date":"July 10, 2017","format":false,"excerpt":"From multicoloured to fancy shapes we have seen tooltips in all shapes and directions, today we have another CSS-only tooltip snippet from John Fink. You can use these for Tooltips on Divs, Links and Buttons. If you are having trouble with the pen, try the archived copy on GitHub CSS\u2026","rel":"","context":"In \"hover animation\"","block_context":{"text":"hover animation","link":"https:\/\/codemyui.com\/tag\/hover-animation\/"},"img":{"alt_text":"Multi Directional CSS Tooltip for Text and Buttons","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/07\/multi-directional-css-tooltip-for-text-and-buttons.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/07\/multi-directional-css-tooltip-for-text-and-buttons.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/07\/multi-directional-css-tooltip-for-text-and-buttons.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/07\/multi-directional-css-tooltip-for-text-and-buttons.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":15418,"url":"https:\/\/codemyui.com\/wonky-rise-css-tooltip-hover\/","url_meta":{"origin":25415,"position":2},"title":"Wonky Rise Up CSS Tooltip on Hover","author":"Hima Vincent","date":"May 15, 2017","format":false,"excerpt":"We have seen many tooltip designs here, this pure CSS tooltip was designed by Sasha. When you hover over the ? icon a tooltip appear with a wobbly animation and reveals the content. If you are having trouble with the pen, try the archived copy on GitHub Wonky CSS Tooltip\u2026","rel":"","context":"In \"hidden content\"","block_context":{"text":"hidden content","link":"https:\/\/codemyui.com\/tag\/hidden-content\/"},"img":{"alt_text":"Wonky Rise Up CSS Tooltip on Hover","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/wonky-rise-up-css-tooltip-on-hover.gif?fit=880%2C400&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/wonky-rise-up-css-tooltip-on-hover.gif?fit=880%2C400&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/wonky-rise-up-css-tooltip-on-hover.gif?fit=880%2C400&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/wonky-rise-up-css-tooltip-on-hover.gif?fit=880%2C400&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":15434,"url":"https:\/\/codemyui.com\/pure-css-tooltips-directions\/","url_meta":{"origin":25415,"position":3},"title":"Pure CSS Tooltips in All Directions","author":"Hima Vincent","date":"May 1, 2017","format":false,"excerpt":"Here is another tooltip design for you, this one is in pure CSS and there are multiple positions you can choose for this one. It was designed by Jase You can choose one of the following direction: Up Up-Left Up-Right Left Right Down-Left Down-Right Down If you are having trouble\u2026","rel":"","context":"In \"hidden content\"","block_context":{"text":"hidden content","link":"https:\/\/codemyui.com\/tag\/hidden-content\/"},"img":{"alt_text":"Pure CSS Tooltips in All Directions","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/pure-css-tooltips-in-all-directions.gif?fit=880%2C400&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/pure-css-tooltips-in-all-directions.gif?fit=880%2C400&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/pure-css-tooltips-in-all-directions.gif?fit=880%2C400&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/pure-css-tooltips-in-all-directions.gif?fit=880%2C400&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":2297,"url":"https:\/\/codemyui.com\/button-tooltip-hover\/","url_meta":{"origin":25415,"position":4},"title":"Button With Tooltip on Hover","author":"Hima Vincent","date":"September 11, 2016","format":false,"excerpt":"This is a nice button to offer up downloads for your visitors. When you hover over it, it shows you a tooltip which in this case tells you the size of the download. It was designed by Fabrizio Cuscini. If you are having trouble with the pen, try the archived\u2026","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Button With Tooltip on Hover","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/09\/button-with-tooltip-on-hover.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/09\/button-with-tooltip-on-hover.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/09\/button-with-tooltip-on-hover.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/09\/button-with-tooltip-on-hover.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":26472,"url":"https:\/\/codemyui.com\/animated-notification-tooltip-for-mobile-navigation-menu\/","url_meta":{"origin":25415,"position":5},"title":"Animated Notification Tooltip for Mobile Navigation Menu","author":"Saijo George","date":"June 21, 2018","format":false,"excerpt":"A subtle animated notification tooltip that shows up when one of the menu items from the navigation bar is activated. This snippet was designed by Yanni. If you are having trouble with the pen, try the archived copy on GitHub Notification Tooltip Snippet","rel":"","context":"In \"microinteractions\"","block_context":{"text":"microinteractions","link":"https:\/\/codemyui.com\/tag\/microinteractions\/"},"img":{"alt_text":"Animated Notification Tooltip for Mobile Navigation Menu","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/06\/Animated-Notification-Tooltip-for-Mobile-Navigation-Menu.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/06\/Animated-Notification-Tooltip-for-Mobile-Navigation-Menu.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/06\/Animated-Notification-Tooltip-for-Mobile-Navigation-Menu.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/06\/Animated-Notification-Tooltip-for-Mobile-Navigation-Menu.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/25415","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=25415"}],"version-history":[{"count":0,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/25415\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/25416"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=25415"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=25415"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=25415"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}