CSS based tooltips over social icons: Code and live demo

Creating CSS based tooltips

In today’s world websites, showing social icons for sharing the 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 tooltips effect by using pure CSS.

A demo of CSS tooltip for social icons

In the demo, the icons of Facebook, Twitter, Google plus, 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:

See online demo and code

The CSS:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

body {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-flex-wrap: wrap;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-align-content: center;

-ms-flex-line-pack: center;

align-content: center;

height: 100vh;

font: 16px Roboto, sans-serif;

background: #f9f9f9;

}

a {

text-decoration: none;

color: inherit;

}

.social-icon {

width: 36px;

height: 36px;

fill: currentColor;

-webkit-transition: .2s;

transition: .2s;

}

.social-cls-facebook:hover { color: #3b5998 }

.social-cls-twitter:hover { color: #55acee }

.social-cls-google:hover { color: #dd4b39 }

.social-cls-pinterest:hover { color: #bd081c }

.social-cls-instagram:hover { color: #833ab4 }

.social-cls-snapchat:hover { color: #fbe00f }

.social-cls-facebook:hover::after { background: #3b5998 }

.social-cls-twitter:hover::after { background: #55acee }

.social-cls-google:hover::after { background: #dd4b39 }

.social-cls-pinterest:hover::after { background: #bd081c }

.social-cls-instagram:hover::after { background: #833ab4 }

.social-cls-snapchat:hover::after { background: #fbe00f }

.c-link {

position: relative;

color: #bbb;

}

.c-link:not(:last-of-type) {

margin-right: 15px;

}

.c-tooltip::before,

.c-tooltip::after {

display: block;

position: absolute;

left: 50%;

-webkit-transform: translate(-50%, -10px);

transform: translate(-50%, -10px);

opacity: 0;

-webkit-transition: .2s;

transition: .2s;

}

.c-tooltip::before {

content: '';

bottom: calc(100% + 2px);

border: solid 5px transparent;

border-top-color: currentColor;

}

.c-tooltip::after {

content: attr(aria-label);

bottom: calc(100% + 12px);

padding: .61em .93em;

font-size: .875rem;

color: white;

border-radius: 3px;

}

.c-tooltip:hover::before,

.c-tooltip:hover::after {

opacity: 1;

-webkit-transform: translate(-50%);

transform: translate(-50%);

}

.pens-link-container {

-webkit-flex-basis: 100%;

-ms-flex-preferred-size: 100%;

flex-basis: 100%;

font-size: .9rem;

text-align: center;

}

.pens-link {

margin-bottom: 0;

background: white;

box-shadow: 0 4px 18px rgba(0, 0, 0, .1);

border: none;

}

The markup:

</a>

</a>

</a>

</a>

</a>

</a>

</symbol>

</symbol>

</symbol>

</symbol>

</symbol>

</symbol>

</svg>

Get the complete code from the demo page.

Credit: nxworld

Tooltips

Creating CSS based tooltips

A demo of CSS tooltip for social icons

See online demo and code

Related Tutorials: