Create a social media Tooltip

Question

I have put the social media icons in my footer as a "follow me" section. Now I would like to have a tooltip like this here https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_arrow_bottom where each one would pop up with a text "facebook", "Twitter", etc.

How do I achieve this with what I already have since I don't want to mess up my footer and my social media icons while attempting this. Is there a way to squeeze the <span class="tooltiptext"> in? Or use this as an id tag? I was thinking of trying something like this for example.

<a href="#" class="fa fa-facebook" id="tooltiptext"></a>

Is this possible?

Any tips and tricks would be much appreciated. Feel free to run the code snippet to see what my social media icons look like at the moment.

/* Footer aka a copyright + social media pages */

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  /* Height of the footer */
  background-color: #b3b3ff;
}

.tooltip .tooltiptext {
  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
  /* Use half of the width (120/2 = 60), to center the tooltip */
}

.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 50%;
}

.fa:hover {
  opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}

.fa-snapchat {
  background: #fffc00;
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="footer">
  <div class="tooltip">

    <!-- Now where should I place "tooltiptext" -->

    <a href="#" class="fa fa-facebook"></a>
    <a href="#" class="fa fa-twitter"></a>
    <a href="#" class="fa fa-linkedin"></a>
    <a href="#" class="fa fa-instagram"></a>
    <a href="#" class="fa fa-snapchat"></a>
  </div>
</div>

score 2 · Accepted Answer · answered Feb 07 '19 at 04:21

You should have used .tooltip in the <a> instead of the <div> which is the parent of the .tooltiptext

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  /* Height of the footer */
  background-color: #b3b3ff;
}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
 bottom: 100%;
  left: 50%; 
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 50%;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook:hover .tooltiptext {
  background: #3B5998;
  color: white;
  visibility: visible;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}

.fa-snapchat {
  background: #fffc00;
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Homepage</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="main.css">
  <script src="script.js"></script>
</head>

<body>
  
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <div class="footer">
      <div>
        <!-- Now where should I place "tooltiptext" -->
        <a href="#" class="fa fa-facebook tooltip"><span class="tooltiptext">Facebook</span></a>
        <a href="#" class="fa fa-twitter tooltip"><span class="tooltiptext">Twitter</span></a>
        <a href="#" class="fa fa-linkedin tooltip"><span class="tooltiptext">Linkedin</span></a>
        <a href="#" class="fa fa-instagram tooltip"><span class="tooltiptext">Instagram</span></a>
        <a href="#" class="fa fa-snapchat tooltip"><><span class="tooltiptext">Snapchat</span></a>
      </div>
    </div>
  
</body>
</html>

Hey that worked! Thanks! Now just one more question before I take off. How do I space out the icons so that for the title when the mouse hovers over it is a bit more readable? Seems to be a bit clutter. Take a look here https://codepen.io/AzazelNightCrawl3r/pen/LqOdQP — Azazel, Feb 07 '19 at 04:53
I forked your codepen here: [https://codepen.io/anon/pen/XOzEBG](https://codepen.io/anon/pen/XOzEBG), just add margin to `.tooltip .tooltiptext` and make `width` smaller to 90px instead of 120px — Alvin Theodora, Feb 07 '19 at 04:59
One more thing I forgot to mention. When I am doing this from my text editor on my desktop and opening the file on my browser in chrome, it shows that when I hover my mouse over the icons, the hover brings up the text from all of the social media icons, Why is it doing that? Take a look at my screenshot here. https://i.imgur.com/y3b7vms.jpg — Azazel, Feb 07 '19 at 05:00
This is just one last thing that I just want to resolve and that is when you hover the mouse over, have you noticed that all of the text appears on all of the social media icons instead of popping up, one at a time? — Azazel, Feb 07 '19 at 05:01
You might wanna change this line `
` to `
` just like my answer above, codepen updated — Alvin Theodora, Feb 07 '19 at 05:01
Can you clarify one more time when you said that you forked my codepen, in my line 594 is that the margin I should change (see screenshot) https://i.imgur.com/qkHJWpi.jpg — Azazel, Feb 07 '19 at 05:09
It's better to play around with the `width` and `margin-left` in `.tooltip .tooltiptext` instead, nevermind the margin — Alvin Theodora, Feb 07 '19 at 05:19

score 1 · Answer 2 · answered Feb 07 '19 at 03:52

I tried adding the following to your code and works:

Add visibility:hidden in your tooltip in css

.tooltip .tooltiptext {
 visibility: hidden;
 width: 120px;
 bottom: 100%;
 left: 50%;
 margin-left: -60px;
 /* Use half of the width (120/2 = 60), to center the tooltip */
}

In the css, declare the visibility of your tooltip everytime you hover the link. Try doing this to all links you have.

.fa-facebook:hover .tooltiptext {
 visibility: visible;
}

Add element with tooltiptext inside the element in html.

   <a href="#" class="fa fa-facebook">
       <span class="tooltiptext">Facebook</span>
    </a>

I added the Span class and it is not working properly as I wanted like in w3schools.com. Take a look at my stuff here https://codepen.io/AzazelNightCrawl3r/pen/NowyZR — Azazel, Feb 07 '19 at 04:07

Create a social media Tooltip

2 Answers2