├── README.md
├── assets
    ├── css
    │   └── styles.css
    └── scss
    │   └── styles.scss
├── index.html
└── preview.png


/README.md:
--------------------------------------------------------------------------------
 1 | # Social Media Icons Tooltips
 2 | ## [Watch it on youtube](https://youtu.be/C03eRxMrYB0)
 3 | ### Social Media Icons Tooltips
 4 | 
 5 | - Social Media Icons Tooltips Using HTML And CSS
 6 | - Integrate a tooltip on the right, left, top and bottom.
 7 | 
 8 | 💙 Join the channel to see more videos like this. [Bedimcode](https://www.youtube.com/@Bedimcode)
 9 | 
10 | ![preview img](/preview.png)
11 | 


--------------------------------------------------------------------------------
/assets/css/styles.css:
--------------------------------------------------------------------------------
  1 | /*===== GOOGLE FONTS =====*/
  2 | @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500;700&display=swap');
  3 | 
  4 | /*===== VARIABLES CSS =====*/
  5 | :root{
  6 |   /*========== Colors ==========*/
  7 |   --first-color: #322FF2;
  8 |   --first-color-light: #E3E2FD;
  9 |   --body-color: #FAFAFF;
 10 | 
 11 |   /*========== Font and typography ==========*/
 12 |   --body-font: 'Quicksand', sans-serif;
 13 |   --normal-font-size: 1rem;
 14 | }
 15 | 
 16 | /*========== BASE ==========*/
 17 | *,::before,::after{
 18 |   box-sizing: border-box;
 19 | }
 20 | 
 21 | body{
 22 |   margin: 0;
 23 |   font-family: var(--body-font);
 24 |   background-color: var(--body-color);
 25 | }
 26 | 
 27 | /*========== ICONS TOOLTIP ==========*/
 28 | .social,
 29 | .social__container,
 30 | .social__content{
 31 |   display: flex;
 32 | }
 33 | 
 34 | .social{
 35 |   height: 100vh;
 36 |   justify-content: center;
 37 |   align-items: center;
 38 | }
 39 | 
 40 | .social__content{
 41 |   position: relative;
 42 |   padding: .5rem;
 43 |   margin: 0 1rem;
 44 |   background-color: var(--first-color-light);
 45 |   border-radius: 1rem;
 46 |   box-shadow: -2px -2px 8px #FAFAFF,
 47 |                2px 2px 8px rgba(13,12,64,.2);
 48 |   cursor: pointer;
 49 | }
 50 | 
 51 | .social__icon{
 52 |   font-size: 2rem;
 53 |   color: var(--first-color);
 54 | }
 55 | 
 56 | .social__tooltip{
 57 |   opacity: 0;
 58 |   position: absolute;
 59 |   padding: .5rem 1rem;
 60 |   background-color: var(--first-color);
 61 |   color: var(--first-color-light);
 62 |   font-size: var(--normal-font-size);
 63 |   white-space: nowrap;
 64 |   font-weight: 700;
 65 |   border-radius: .5rem;
 66 |   pointer-events: none;
 67 | }
 68 | 
 69 | .social__tooltip::after{
 70 |   content: '';
 71 |   position: absolute;
 72 |   width: 12px;
 73 |   height: 12px;
 74 |   background-color: var(--first-color);
 75 |   border-radius: 3px;
 76 | }
 77 | 
 78 | .social__content,
 79 | .social__tooltip,
 80 | .social__icon{
 81 |   transition: .3s;
 82 | }
 83 | 
 84 | .social__content:hover{
 85 |   background-color: var(--first-color);
 86 | }
 87 | 
 88 | .social__content:hover .social__icon{
 89 |   color: var(--first-color-light);
 90 | }
 91 | 
 92 | /*========== Tooltip left ==========*/
 93 | .social__tooltip-left{
 94 |   left: 0;
 95 |   transform: translateX(-100%);
 96 | }
 97 | 
 98 | .social__tooltip-left::after{
 99 |   top: 50%;
100 |   transform: translate(50%, -50%) rotate(45deg);
101 |   right: 1px;
102 | }
103 | 
104 | .social__content:hover .social__tooltip-left{
105 |   opacity: 1;
106 |   left: -1rem;
107 | }
108 | 
109 | /*========== Tooltip top ==========*/
110 | .social__tooltip-top{
111 |   top: -2.25rem;
112 |   left: 50%;
113 |   transform: translateX(-50%);
114 | }
115 | 
116 | .social__tooltip-top::after{
117 |   left: 50%;
118 |   transform: translate(-50%, 50%) rotate(45deg);
119 |   bottom: 1px;
120 | }
121 | 
122 | .social__content:hover .social__tooltip-top{
123 |   opacity: 1;
124 |   top: -3.25rem;
125 | }
126 | 
127 | /*========== Tooltip bottom ==========*/
128 | .social__tooltip-bottom{
129 |   bottom: 0;
130 |   left: 50%;
131 |   transform: translate(-50%, 100%);
132 | }
133 | 
134 | .social__tooltip-bottom::after{
135 |   left: 50%;
136 |   transform: translate(-50%, -50%) rotate(45deg);
137 |   top: 1px;
138 | }
139 | 
140 | .social__content:hover .social__tooltip-bottom{
141 |   opacity: 1;
142 |   bottom: -1rem;
143 | }
144 | 
145 | /*========== Tooltip right  ==========*/
146 | .social__tooltip-right{
147 |   right: 0;
148 |   transform: translateX(100%);
149 | }
150 | 
151 | .social__tooltip-right::after{
152 |   top: 50%;
153 |   transform: translate(-50%, -50%) rotate(45deg);
154 |   left: 1px;
155 | }
156 | 
157 | .social__content:hover .social__tooltip-right{
158 |   opacity: 1;
159 |   right: -1rem;
160 | }
161 | 


--------------------------------------------------------------------------------
/assets/scss/styles.scss:
--------------------------------------------------------------------------------
  1 | /*===== GOOGLE FONTS =====*/
  2 | @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500;700&display=swap');
  3 | 
  4 | /*===== VARIABLES CSS =====*/
  5 | :root{
  6 |     /*========== Colors ==========*/
  7 |     --first-color: #322FF2;
  8 |     --first-color-light: #E3E2FD;
  9 |     --body-color: #FAFAFF;
 10 | 
 11 |     /*========== Font and typography ==========*/
 12 |     --body-font: 'Quicksand', sans-serif;
 13 |     --normal-font-size: 1rem;
 14 | }
 15 | 
 16 | /*========== BASE ==========*/
 17 | *,::before,::after{
 18 |     box-sizing: border-box;
 19 | }
 20 | 
 21 | body{
 22 |     margin: 0;
 23 |     font-family: var(--body-font);
 24 |     background-color: var(--body-color);
 25 | }
 26 | 
 27 | /*========== ICONS TOOLTIP ==========*/
 28 | .social{
 29 |     height: 100vh;
 30 |     justify-content: center;
 31 |     align-items: center;
 32 | 
 33 |     &, &__container, &__content{
 34 |         display: flex;
 35 |     }
 36 |     &__content{
 37 |         position: relative;
 38 |         padding: .5rem;
 39 |         margin: 0 1rem;
 40 |         background-color: var(--first-color-light);
 41 |         border-radius: 1rem;
 42 |         box-shadow: -2px -2px 8px #FAFAFF,
 43 |                      2px 2px 8px rgba(13, 12, 64, .2);
 44 |         cursor: pointer;
 45 |     }
 46 |     &__icon{
 47 |         font-size: 2rem;
 48 |         color: var(--first-color);
 49 |     }
 50 |     &__tooltip{
 51 |         opacity: 0;
 52 |         position: absolute;
 53 |         padding: .5rem 1rem;
 54 |         background-color: var(--first-color);
 55 |         color: var(--first-color-light);
 56 |         font-size: var(--normal-font-size);
 57 |         white-space: nowrap;
 58 |         font-weight: 700;
 59 |         border-radius: .5rem;
 60 |         pointer-events: none;
 61 | 
 62 |         &::after{
 63 |             content: '';
 64 |             position: absolute;
 65 |             width: 12px;
 66 |             height: 12px;
 67 |             background-color: var(--first-color);
 68 |             border-radius: 3px;
 69 |         }
 70 |     }
 71 |     &__content, &__tooltip, &__icon{
 72 |         transition: .3s;
 73 |     }
 74 | 
 75 |     &__content:hover{
 76 |         background-color: var(--first-color);
 77 |     }
 78 |     
 79 |     &__content:hover &__icon{
 80 |         color: var(--first-color-light);
 81 |     }
 82 | 
 83 |     /*========== Tooltip left ==========*/
 84 |     &__tooltip-left{
 85 |         left: 0;
 86 |         transform: translateX(-100%);
 87 | 
 88 |         &::after{
 89 |             top: 50%;
 90 |             transform: translate(50%, -50%) rotate(45deg);
 91 |             right: 1px;
 92 |         }
 93 |     }
 94 | 
 95 |     &__content:hover &__tooltip-left{
 96 |         opacity: 1;
 97 |         left: -1rem;
 98 |     }
 99 | 
100 |     /*========== Tooltip top ==========*/
101 |     &__tooltip-top{
102 |         top: -2.25rem;
103 |         left: 50%;
104 |         transform: translateX(-50%);
105 | 
106 |         &::after{
107 |             left: 50%;
108 |             transform: translate(-50%, 50%) rotate(45deg);
109 |             bottom: 1px;
110 |         }
111 |     }
112 | 
113 |     &__content:hover &__tooltip-top{
114 |         opacity: 1;
115 |         top: -3.25rem;
116 |     }
117 | 
118 |     /*========== Tooltip bottom ==========*/
119 |     &__tooltip-bottom{
120 |         bottom: 0;
121 |         left: 50%;
122 |         transform: translate(-50%, 100%);
123 | 
124 |         &::after{
125 |             left: 50%;
126 |             transform: translate(-50%, -50%) rotate(45deg);
127 |             top: 1px;
128 |         }
129 |     }
130 |     &__content:hover &__tooltip-bottom{
131 |         opacity: 1;
132 |         bottom: -1rem;
133 |     }
134 | 
135 |     /*========== Tooltip right  ==========*/
136 |     &__tooltip-right{
137 |         right: 0;
138 |         transform: translateX(100%);
139 | 
140 |         &::after{
141 |             top: 50%;
142 |             transform: translate(-50%, -50%) rotate(45deg);
143 |             left: 1px;
144 |         }
145 |     }
146 | 
147 |     &__content:hover &__tooltip-right{
148 |         opacity: 1;
149 |         right: -1rem;
150 |     }
151 | }
152 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 |     <html lang="en">
 3 |     <head>
 4 |         <meta charset="UTF-8">
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | 
 7 |         <!--========== BOX ICONS ==========-->
 8 |         <link href='https://cdn.jsdelivr.net/npm/boxicons@2.0.5/css/boxicons.min.css' rel='stylesheet'>
 9 | 
10 |         <!--========== CSS ==========-->
11 |         <link rel="stylesheet" href="assets/css/styles.css">
12 | 
13 |         <title>Social icons tooltip</title>
14 |     </head>
15 |     <body>
16 |         <div class="social">
17 |             <div class="social__container">
18 |                 <div class="social__content">
19 |                     <i class='bx bxl-facebook-circle social__icon'></i>
20 |                     <div class="social__tooltip social__tooltip-left">15000 +</div>
21 |                 </div>
22 | 
23 |                 <div class="social__content">
24 |                     <i class='bx bxl-instagram-alt social__icon'></i>
25 |                     <span class="social__tooltip social__tooltip-top">10000 +</span>
26 |                 </div>
27 | 
28 |                 <div class="social__content">
29 |                     <i class='bx bxl-twitter social__icon' ></i>
30 |                     <span class="social__tooltip social__tooltip-bottom">12000 +</span>
31 |                 </div>
32 | 
33 |                 <div class="social__content">
34 |                     <i class='bx bxl-github social__icon' ></i>
35 |                     <span class="social__tooltip social__tooltip-top">1500 +</span>
36 |                 </div>
37 | 
38 |                 <div class="social__content">
39 |                     <i class='bx bxl-discord social__icon' ></i>
40 |                     <span class="social__tooltip social__tooltip-right">800 +</span>
41 |                 </div>
42 |             </div>
43 |         </div>
44 |     </body>
45 | </html>


--------------------------------------------------------------------------------
/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bedimcode/social-icons-tooltip/bff3112fc361bb094d10c40d14cddb258ba1a749/preview.png


--------------------------------------------------------------------------------