{"id":2181,"date":"2016-07-28T07:30:20","date_gmt":"2016-07-28T07:30:20","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=2181"},"modified":"2023-11-07T02:53:55","modified_gmt":"2023-11-07T02:53:55","slug":"css-based-tooltips-over-social-icons-code-and-live-demo","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/css-based-tooltips-over-social-icons-code-and-live-demo\/","title":{"rendered":"CSS Based Tooltips Over Social Icons: SVG Based"},"content":{"rendered":"<h3><strong>Creating CSS-based tooltips<\/strong><\/h3>\n<p>In today\u2019s world websites, showing social icons for sharing content is common. How about adding some effects by way of tooltips as the visitors hover over any icon of social networks like Facebook, Twitter, LinkedIn, etc?<\/p>\n<p>In this post, I am going to share such tooltip effects by using pure CSS.<\/p>\n<h3><strong>A demo of CSS tooltip for social icons<\/strong><\/h3>\n<p>In the demo, the icons of Facebook, Twitter, Pinterest, Instagram, and Snapchat are created by using SVG tag of HTML 5. As you bring the mouse over any icon, the tooltips with respective brand color appears with the social network name, have a look:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter size-full wp-image-2182\" src=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/07\/15.0_1-CSS-tooltips.jpg\" alt=\"CSS tooltips\" width=\"372\" height=\"143\" srcset=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/07\/15.0_1-CSS-tooltips.jpg 372w, https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/07\/15.0_1-CSS-tooltips-300x115.jpg 300w\" sizes=\"(max-width: 372px) 100vw, 372px\" \/><\/p>\n<p><strong>The CSS:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">body {\r\n\r\n\u00a0\u00a0\u00a0 display: -webkit-box;\r\n\r\n\u00a0\u00a0\u00a0 display: -webkit-flex;\r\n\r\n\u00a0\u00a0\u00a0 display: -ms-flexbox;\r\n\r\n\u00a0\u00a0\u00a0 display: flex;\r\n\r\n\u00a0\u00a0\u00a0 -webkit-flex-wrap: wrap;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 -ms-flex-wrap: wrap;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 flex-wrap: wrap;\r\n\r\n\u00a0\u00a0\u00a0 -webkit-box-pack: center;\r\n\r\n\u00a0\u00a0\u00a0 -webkit-justify-content: center;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 -ms-flex-pack: center;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 justify-content: center;\r\n\r\n\u00a0\u00a0\u00a0 -webkit-box-align: center;\r\n\r\n\u00a0\u00a0\u00a0 -webkit-align-items: center;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 -ms-flex-align: center;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 align-items: center;\r\n\r\n\u00a0\u00a0\u00a0 -webkit-align-content: center;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 -ms-flex-line-pack: center;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 align-content: center;\r\n\r\n\u00a0\u00a0\u00a0 height: 100vh;\r\n\r\n\u00a0\u00a0\u00a0 font: 16px Roboto, sans-serif;\r\n\r\n\u00a0\u00a0\u00a0 background: #f9f9f9;\r\n\r\n}\r\n\r\n\u00a0\r\n\r\na {\r\n\r\n\u00a0\u00a0\u00a0 text-decoration: none;\r\n\r\n\u00a0\u00a0\u00a0 color: inherit;\r\n\r\n}\r\n\r\n\u00a0\r\n\r\n.social-icon {\r\n\r\n\u00a0\u00a0\u00a0 width:\u00a0 36px;\r\n\r\n\u00a0\u00a0\u00a0 height: 36px;\r\n\r\n\u00a0\u00a0\u00a0 fill: currentColor;\r\n\r\n\u00a0\u00a0\u00a0 -webkit-transition: .2s;\r\n\r\n\u00a0\u00a0\u00a0 transition: .2s;\r\n\r\n}\r\n\r\n\u00a0\r\n\r\n.social-cls-facebook:hover\u00a0 { color: #3b5998 }\r\n\r\n.social-cls-twitter:hover\u00a0\u00a0 { color: #55acee }\r\n\r\n.social-cls-google:hover\u00a0\u00a0\u00a0 { color: #dd4b39 }\r\n\r\n.social-cls-pinterest:hover { color: #bd081c }\r\n\r\n.social-cls-instagram:hover { color: #833ab4 }\r\n\r\n.social-cls-snapchat:hover\u00a0 { color: #fbe00f }\r\n\r\n.social-cls-facebook:hover::after\u00a0 { background: #3b5998 }\r\n\r\n.social-cls-twitter:hover::after\u00a0\u00a0 { background: #55acee }\r\n\r\n.social-cls-google:hover::after\u00a0\u00a0\u00a0 { background: #dd4b39 }\r\n\r\n.social-cls-pinterest:hover::after { background: #bd081c }\r\n\r\n.social-cls-instagram:hover::after { background: #833ab4 }\r\n\r\n.social-cls-snapchat:hover::after\u00a0 { background: #fbe00f }\r\n\r\n\u00a0\r\n\r\n.c-link {\r\n\r\n\u00a0\u00a0\u00a0 position: relative;\r\n\r\n\u00a0\u00a0\u00a0 color: #bbb;\r\n\r\n}\r\n\r\n\u00a0\r\n\r\n.c-link:not(:last-of-type) {\r\n\r\n\u00a0\u00a0\u00a0 margin-right: 15px;\r\n\r\n}\r\n\r\n\u00a0\r\n\r\n.c-tooltip::before,\r\n\r\n.c-tooltip::after {\r\n\r\n\u00a0\u00a0\u00a0 display: block;\r\n\r\n\u00a0\u00a0\u00a0 position: absolute;\r\n\r\n\u00a0\u00a0\u00a0 left: 50%;\r\n\r\n\u00a0\u00a0\u00a0 -webkit-transform: translate(-50%, -10px);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 transform: translate(-50%, -10px);\r\n\r\n\u00a0\u00a0\u00a0 opacity: 0;\r\n\r\n\u00a0\u00a0\u00a0 -webkit-transition: .2s;\r\n\r\n\u00a0\u00a0\u00a0 transition: .2s;\r\n\r\n}\r\n\r\n\u00a0\r\n\r\n.c-tooltip::before {\r\n\r\n\u00a0\u00a0\u00a0 content: '';\r\n\r\n\u00a0\u00a0\u00a0 bottom: calc(100% + 2px);\r\n\r\n\u00a0\u00a0\u00a0 border: solid 5px transparent;\r\n\r\n\u00a0\u00a0\u00a0 border-top-color: currentColor;\r\n\r\n}\r\n\r\n\u00a0\r\n\r\n.c-tooltip::after {\r\n\r\n\u00a0\u00a0\u00a0 content: attr(aria-label);\r\n\r\n\u00a0\u00a0\u00a0 bottom: calc(100% + 12px);\r\n\r\n\u00a0\u00a0\u00a0 padding: .61em .93em;\r\n\r\n\u00a0\u00a0\u00a0 font-size: .875rem;\r\n\r\n\u00a0\u00a0\u00a0 color: white;\r\n\r\n\u00a0\u00a0\u00a0 border-radius: 3px;\r\n\r\n}\r\n\r\n\u00a0\r\n\r\n.c-tooltip:hover::before,\r\n\r\n.c-tooltip:hover::after {\r\n\r\n\u00a0\u00a0\u00a0 opacity: 1;\r\n\r\n\u00a0\u00a0\u00a0 -webkit-transform: translate(-50%);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 transform: translate(-50%);\r\n\r\n}\r\n\r\n\u00a0\r\n\r\n.pens-link-container {\r\n\r\n\u00a0\u00a0\u00a0 -webkit-flex-basis: 100%;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 -ms-flex-preferred-size: 100%;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 flex-basis: 100%;\r\n\r\n\u00a0\u00a0\u00a0 font-size: .9rem;\r\n\r\n\u00a0\u00a0\u00a0 text-align: center;\r\n\r\n}\r\n\r\n\u00a0\r\n\r\n.pens-link {\r\n\r\n\u00a0\u00a0\u00a0 margin-bottom: 0;\r\n\r\n\u00a0\u00a0\u00a0 background: white;\r\n\r\n\u00a0\u00a0\u00a0 box-shadow: 0 4px 18px rgba(0, 0, 0, .1);\r\n\r\n\u00a0\u00a0\u00a0 border: none;\r\n\r\n}<\/pre>\n<p><strong>The markup:<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;a href=\"#0\" class=\"c-link social-cls-facebook c-tooltip\" aria-label=\"Facebook\"&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;svg class=\"social-icon\"&gt;&lt;use xlink:href=\"#icon--facebook\"&gt;&lt;\/use&gt;&lt;\/svg&gt;\r\n\r\n&lt;\/a&gt;\r\n\r\n\u00a0\r\n\r\n&lt;a href=\"#0\" class=\"c-link social-cls-twitter c-tooltip\" aria-label=\"Twitter\"&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;svg class=\"social-icon\"&gt;&lt;use xlink:href=\"#icon--twitter\"&gt;&lt;\/use&gt;&lt;\/svg&gt;\r\n\r\n&lt;\/a&gt;\r\n\r\n\u00a0\r\n\r\n&lt;a href=\"#0\" class=\"c-link social-cls-google c-tooltip\" aria-label=\"Google+\"&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;svg class=\"social-icon\"&gt;&lt;use xlink:href=\"#icon--google\"&gt;&lt;\/use&gt;&lt;\/svg&gt;\r\n\r\n&lt;\/a&gt;\r\n\r\n\u00a0\r\n\r\n&lt;a href=\"#0\" class=\"c-link social-cls-pinterest c-tooltip\" aria-label=\"Pinterest\"&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;svg class=\"social-icon\"&gt;&lt;use xlink:href=\"#icon--pinterest\"&gt;&lt;\/use&gt;&lt;\/svg&gt;\r\n\r\n&lt;\/a&gt;\r\n\r\n\u00a0\r\n\r\n&lt;a href=\"#0\" class=\"c-link social-cls-instagram c-tooltip\" aria-label=\"Instagram\"&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;svg class=\"social-icon\"&gt;&lt;use xlink:href=\"#icon--instagram\"&gt;&lt;\/use&gt;&lt;\/svg&gt;\r\n\r\n&lt;\/a&gt;\r\n\r\n\u00a0\r\n\r\n&lt;a href=\"#0\" class=\"c-link social-cls-snapchat c-tooltip\" aria-label=\"Snapchat\"&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;svg class=\"social-icon\"&gt;&lt;use xlink:href=\"#icon--snapchat\"&gt;&lt;\/use&gt;&lt;\/svg&gt;\r\n\r\n&lt;\/a&gt;\r\n\r\n\u00a0\r\n\r\n&lt;svg style=\"display: none\"&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;symbol id=\"icon--facebook\" viewBox=\"0 0 24 24\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;path d=\"M19,4V7H17A1,1 0 0,0 16,8V10H19V13H16V20H13V13H11V10H13V7.5C13,5.56 14.57,4 16.5,4M20,2H4A2,2 0 0,0 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z\" \/&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;\/symbol&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;symbol id=\"icon--twitter\" viewBox=\"0 0 24 24\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;path d=\"M17.71,9.33C17.64,13.95 14.69,17.11 10.28,17.31C8.46,17.39 7.15,16.81 6,16.08C7.34,16.29 9,15.76 9.9,15C8.58,14.86 7.81,14.19 7.44,13.12C7.82,13.18 8.22,13.16 8.58,13.09C7.39,12.69 6.54,11.95 6.5,10.41C6.83,10.57 7.18,10.71 7.64,10.74C6.75,10.23 6.1,8.38 6.85,7.16C8.17,8.61 9.76,9.79 12.37,9.95C11.71,7.15 15.42,5.63 16.97,7.5C17.63,7.38 18.16,7.14 18.68,6.86C18.47,7.5 18.06,7.97 17.56,8.33C18.1,8.26 18.59,8.13 19,7.92C18.75,8.45 18.19,8.93 17.71,9.33M20,2H4A2,2 0 0,0 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z\" \/&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;\/symbol&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;symbol id=\"icon--google\" viewBox=\"0 0 24 24\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;path d=\"M23,11H21V9H19V11H17V13H19V15H21V13H23M8,11V13.4H12C11.8,14.4 10.8,16.4 8,16.4C5.6,16.4 3.7,14.4 3.7,12C3.7,9.6 5.6,7.6 8,7.6C9.4,7.6 10.3,8.2 10.8,8.7L12.7,6.9C11.5,5.7 9.9,5 8,5C4.1,5 1,8.1 1,12C1,15.9 4.1,19 8,19C12,19 14.7,16.2 14.7,12.2C14.7,11.7 14.7,11.4 14.6,11H8Z\" \/&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;\/symbol&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;symbol id=\"icon--pinterest\" viewBox=\"0 0 24 24\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;path d=\"M13,16.2C12.2,16.2 11.43,15.86 10.88,15.28L9.93,18.5L9.86,18.69L9.83,18.67C9.64,19 9.29,19.2 8.9,19.2C8.29,19.2 7.8,18.71 7.8,18.1C7.8,18.05 7.81,18 7.81,17.95H7.8L7.85,17.77L9.7,12.21C9.7,12.21 9.5,11.59 9.5,10.73C9.5,9 10.42,8.5 11.16,8.5C11.91,8.5 12.58,8.76 12.58,9.81C12.58,11.15 11.69,11.84 11.69,12.81C11.69,13.55 12.29,14.16 13.03,14.16C15.37,14.16 16.2,12.4 16.2,10.75C16.2,8.57 14.32,6.8 12,6.8C9.68,6.8 7.8,8.57 7.8,10.75C7.8,11.42 8,12.09 8.34,12.68C8.43,12.84 8.5,13 8.5,13.2A1,1 0 0,1 7.5,14.2C7.13,14.2 6.79,14 6.62,13.7C6.08,12.81 5.8,11.79 5.8,10.75C5.8,7.47 8.58,4.8 12,4.8C15.42,4.8 18.2,7.47 18.2,10.75C18.2,13.37 16.57,16.2 13,16.2M20,2H4C2.89,2 2,2.89 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z\" \/&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;\/symbol&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;symbol id=\"icon--instagram\" viewBox=\"0 0 24 24\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;path d=\"M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z\" \/&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;\/symbol&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;symbol id=\"icon--snapchat\" viewBox=\"0 0 24 24\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;path d=\"M12,20.45C10.81,20.45 10.1,19.94 9.47,19.5C9,19.18 8.58,18.87 8.08,18.79C6.93,18.73 6.59,18.79 5.97,18.9C5.86,18.9 5.73,18.87 5.68,18.69C5.5,17.94 5.45,17.73 5.32,17.71C4,17.5 3.19,17.2 3.03,16.83C3,16.6 3.07,16.5 3.18,16.5C4.25,16.31 5.2,15.75 6,14.81C6.63,14.09 6.93,13.39 6.96,13.32C7.12,13 7.15,12.72 7.06,12.5C6.89,12.09 6.31,11.91 5.68,11.7C5.34,11.57 4.79,11.29 4.86,10.9C4.92,10.62 5.29,10.42 5.81,10.46C6.16,10.62 6.46,10.7 6.73,10.7C7.06,10.7 7.21,10.58 7.25,10.54C7.14,8.78 7.05,7.25 7.44,6.38C8.61,3.76 11.08,3.55 12,3.55C12.92,3.55 15.39,3.76 16.56,6.38C16.95,7.25 16.86,8.78 16.75,10.54C16.79,10.58 16.94,10.7 17.27,10.7C17.54,10.7 17.84,10.62 18.19,10.46C18.71,10.42 19.08,10.62 19.14,10.9C19.21,11.29 18.66,11.57 18.32,11.7C17.69,11.91 17.11,12.09 16.94,12.5C16.85,12.72 16.88,13 17.04,13.32C17.07,13.39 17.37,14.09 18,14.81C18.8,15.75 19.75,16.31 20.82,16.5C20.93,16.5 21,16.6 20.97,16.83C20.81,17.2 20,17.5 18.68,17.71C18.55,17.73 18.5,17.94 18.32,18.69C18.27,18.87 18.14,18.9 18.03,18.9C17.41,18.79 17.07,18.73 15.92,18.79C15.42,18.87 15,19.18 14.53,19.5C13.9,19.94 13.19,20.45 12,20.45Z\" \/&gt;\r\n\r\n\u00a0\u00a0\u00a0 &lt;\/symbol&gt;\r\n\r\n&lt;\/svg&gt;<\/pre>\n<p>Credit: <a href=\"http:\/\/codepen.io\/nxworld\/pen\/oLdoWb\" target=\"_blank\" rel=\"nofollow\" class=\"broken_link\">nxworld<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Creating CSS-based tooltips In today\u2019s world websites, showing social icons for sharing content is common. How about adding some effects by way of tooltips as the visitors hover over any icon of social networks like Facebook, Twitter, LinkedIn, etc? In this post, I am going to share such tooltip effects by using pure CSS. A &#8230; <a title=\"CSS Based Tooltips Over Social Icons: SVG Based\" class=\"read-more\" href=\"https:\/\/www.jquery-az.com\/css-based-tooltips-over-social-icons-code-and-live-demo\/\" aria-label=\"More on CSS Based Tooltips Over Social Icons: SVG Based\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":2182,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[12],"tags":[36],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS Based Tooltips Over Social Icons: SVG Based<\/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:\/\/www.jquery-az.com\/css-based-tooltips-over-social-icons-code-and-live-demo\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Based Tooltips Over Social Icons: SVG Based\" \/>\n<meta property=\"og:description\" content=\"Creating CSS-based tooltips In today\u2019s world websites, showing social icons for sharing content is common. How about adding some effects by way of tooltips as the visitors hover over any icon of social networks like Facebook, Twitter, LinkedIn, etc? In this post, I am going to share such tooltip effects by using pure CSS. A ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/css-based-tooltips-over-social-icons-code-and-live-demo\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-07-28T07:30:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-07T02:53:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/07\/15.0_1-CSS-tooltips.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"372\" \/>\n\t<meta property=\"og:image:height\" content=\"143\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/css-based-tooltips-over-social-icons-code-and-live-demo\/\",\"url\":\"https:\/\/www.jquery-az.com\/css-based-tooltips-over-social-icons-code-and-live-demo\/\",\"name\":\"CSS Based Tooltips Over Social Icons: SVG Based\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2016-07-28T07:30:20+00:00\",\"dateModified\":\"2023-11-07T02:53:55+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/css-based-tooltips-over-social-icons-code-and-live-demo\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/css-based-tooltips-over-social-icons-code-and-live-demo\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/css-based-tooltips-over-social-icons-code-and-live-demo\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Based Tooltips Over Social Icons: SVG Based\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Based Tooltips Over Social Icons: SVG Based","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:\/\/www.jquery-az.com\/css-based-tooltips-over-social-icons-code-and-live-demo\/","og_locale":"en_US","og_type":"article","og_title":"CSS Based Tooltips Over Social Icons: SVG Based","og_description":"Creating CSS-based tooltips In today\u2019s world websites, showing social icons for sharing content is common. How about adding some effects by way of tooltips as the visitors hover over any icon of social networks like Facebook, Twitter, LinkedIn, etc? In this post, I am going to share such tooltip effects by using pure CSS. A ... Read more","og_url":"https:\/\/www.jquery-az.com\/css-based-tooltips-over-social-icons-code-and-live-demo\/","article_published_time":"2016-07-28T07:30:20+00:00","article_modified_time":"2023-11-07T02:53:55+00:00","og_image":[{"width":372,"height":143,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/07\/15.0_1-CSS-tooltips.jpg","type":"image\/jpeg"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/css-based-tooltips-over-social-icons-code-and-live-demo\/","url":"https:\/\/www.jquery-az.com\/css-based-tooltips-over-social-icons-code-and-live-demo\/","name":"CSS Based Tooltips Over Social Icons: SVG Based","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2016-07-28T07:30:20+00:00","dateModified":"2023-11-07T02:53:55+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/css-based-tooltips-over-social-icons-code-and-live-demo\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/css-based-tooltips-over-social-icons-code-and-live-demo\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/css-based-tooltips-over-social-icons-code-and-live-demo\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"CSS Based Tooltips Over Social Icons: SVG Based"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/2181"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=2181"}],"version-history":[{"count":4,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/2181\/revisions"}],"predecessor-version":[{"id":11188,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/2181\/revisions\/11188"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/2182"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=2181"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=2181"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=2181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}