{"id":17578,"date":"2017-06-13T15:25:29","date_gmt":"2017-06-13T05:25:29","guid":{"rendered":"https:\/\/codemyui.com\/?p=17578"},"modified":"2018-05-16T16:43:05","modified_gmt":"2018-05-16T06:43:05","slug":"fancy-tooltip-animations","status":"publish","type":"post","link":"https:\/\/codemyui.com\/fancy-tooltip-animations\/","title":{"rendered":"Fancy Tooltip Animations"},"content":{"rendered":"<p>Here is a bunch of <a href=\"https:\/\/codemyui.com\/tag\/tooltip\/\">fancy tooltip animations<\/a> using <a href=\"https:\/\/codemyui.com\/tag\/anime-js\/\">anime.js<\/a> and <a href=\"https:\/\/codemyui.com\/tag\/svg\/\">SVG<\/a>. There are 12 designs ranging from <a href=\"https:\/\/codemyui.com\/tag\/quotes\/\">thought bubble to chat bubble<\/a> to choose from. <\/p>\n<p><!--more--><\/p>\n<p>You can find the project on <a href=\"https:\/\/github.com\/CodeMyUI\/TooltipAnimations\" target=\"_blank\" rel=\"noopener\">Github(Our Fork)<\/a>. Check out the <a href=\"https:\/\/tympanus.net\/Development\/TooltipAnimations\/\" target=\"_blank\" rel=\"noopener\">Demo<\/a> and <a href=\"https:\/\/tympanus.net\/codrops\/2017\/05\/31\/playful-little-tooltip-ideas\/\" target=\"_blank\" rel=\"noopener\">Tutorial<\/a> on Codrops.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Here is a bunch of fancy tooltip animations using anime.js and SVG. There are 12 designs ranging from thought bubble to chat bubble to choose from.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/fancy-tooltip-animations\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":17581,"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":[535381576,192416248,755,112936,796127],"class_list":["post-17578","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-anime-js","tag-hover-animation","tag-quotes","tag-svg","tag-tooltip","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/06\/fancy-tooltip-animations.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":25444,"url":"https:\/\/codemyui.com\/download-button-circular-progress-indicator\/","url_meta":{"origin":17578,"position":0},"title":"Download Button with Circular Progress Indicator","author":"Saijo George","date":"February 14, 2018","format":false,"excerpt":"Here is a fancy little download button that has a faint neon glow on hover and on clicking it the button transforms into a circular loader like interface to show the progress of the download. There is a stop button on it if you want to stop the download and\u2026","rel":"","context":"In \"anime.js\"","block_context":{"text":"anime.js","link":"https:\/\/codemyui.com\/tag\/anime-js\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/02\/download-button-with-circular-progress-indicator.gif?fit=440%2C220&ssl=1&resize=350%2C250","width":350,"height":250},"classes":[]},{"id":1296,"url":"https:\/\/codemyui.com\/social-media-icon-hover-tooltip\/","url_meta":{"origin":17578,"position":1},"title":"Social Media Icon Hover Tooltip","author":"Hima Vincent","date":"July 26, 2016","format":false,"excerpt":"This is an interesting way to showcase your social media profiles on your webpage. When you hover over these SVG icons you get a solid colored tooltip with a text label. Designed by Maciej Leszczy\u0144ski If you are having trouble with the pen, try the archived copy on GitHub","rel":"","context":"In \"hidden content\"","block_context":{"text":"hidden content","link":"https:\/\/codemyui.com\/tag\/hidden-content\/"},"img":{"alt_text":"Social Media Icon Hover Tooltip","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/07\/social-media-icon-hover-tooltip.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/07\/social-media-icon-hover-tooltip.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/07\/social-media-icon-hover-tooltip.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/07\/social-media-icon-hover-tooltip.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":2755,"url":"https:\/\/codemyui.com\/svg-alphabet-animation\/","url_meta":{"origin":17578,"position":2},"title":"SVG Alphabet Animation","author":"Hima Vincent","date":"October 3, 2016","format":false,"excerpt":"This epic lettering animation is made with SVG and anime.js and is perfect where you want to add some eye catchy animation to some text that you want to highlight on a web page. There are four different effects to choose from. In the first one, the colourful letters are\u2026","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"SVG Aphabet Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/svg-alphabet-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/svg-alphabet-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/svg-alphabet-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/10\/svg-alphabet-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25409,"url":"https:\/\/codemyui.com\/animated-image-collapsing-slideshow-transition-using-svg\/","url_meta":{"origin":17578,"position":3},"title":"Animated Image Collapsing Slideshow Transition using SVG","author":"Saijo George","date":"September 22, 2019","format":false,"excerpt":"In this animated transition for image slider by the awesome folks at Codrops, we have six different fullscreen styles to choose from. This snippet using SVG and these two Javascript libraries anime.js and imagesLoaded.js The image collaps in to the center of the screen and slides to the right revealing\u2026","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Animated Image Collapsing Slideshow Transition using SVG","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/02\/animated-image-collapsing-slideshow-transition-using-svg.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/02\/animated-image-collapsing-slideshow-transition-using-svg.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/02\/animated-image-collapsing-slideshow-transition-using-svg.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/02\/animated-image-collapsing-slideshow-transition-using-svg.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":17578,"position":4},"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":26472,"url":"https:\/\/codemyui.com\/animated-notification-tooltip-for-mobile-navigation-menu\/","url_meta":{"origin":17578,"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\/17578","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\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=17578"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/17578\/revisions"}],"predecessor-version":[{"id":25784,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/17578\/revisions\/25784"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/17581"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=17578"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=17578"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=17578"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}