创建社交媒体工具提示答案

【问题标题】：Create a social media Tooltip创建社交媒体工具提示
【发布时间】：2019-02-07 02:49:25
【问题描述】：

我已将社交媒体图标作为“跟我来” 部分放在我的页脚中。现在我想在https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_arrow_bottom 有一个像这样的工具提示，其中每个都会弹出一个文本“facebook”、“Twitter”等。

由于我不想在尝试此操作时弄乱我的页脚和社交媒体图标，因此我如何利用已有的实现这一目标。有没有办法把<span class="tooltiptext"> 挤进去？或者将其用作 id 标签？例如，我正在考虑尝试这样的事情。

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

这可能吗？

任何提示和技巧将不胜感激。 随意运行代码 sn-p 看看我的社交媒体图标现在是什么样子。

/* 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>

【问题讨论】：

标签： html css tooltip font-awesome cloudflare

【解决方案1】：

您应该在<a> 中使用.tooltip，而不是<div>，后者是.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>

【讨论】：

嘿，成功了！谢谢！现在在我起飞之前还有一个问题。如何隔开图标，以便鼠标悬停在标题上时的标题更具可读性？好像有点乱。看看这里codepen.io/AzazelNightCrawl3r/pen/LqOdQP
我在这里分叉了你的代码笔：https://codepen.io/anon/pen/XOzEBG，只需将边距添加到.tooltip .tooltiptext 并将width 缩小到 90 像素而不是 120 像素
还有一件事我忘了说。当我从桌面上的文本编辑器执行此操作并在浏览器中以 chrome 打开文件时，它显示当我将鼠标悬停在图标上时，悬停会显示所有社交媒体图标中的文本，为什么它这样做？看看我的截图在这里。 i.imgur.com/y3b7vms.jpg
这只是我想解决的最后一件事，那就是当您将鼠标悬停在上方时，您是否注意到所有文本都出现在所有社交媒体图标上而不是弹出，一次一个？
您可能想将这一行 <div class="tooltip"> 更改为 <div> 就像我上面的回答一样，codepen 已更新

【解决方案2】：

我尝试将以下内容添加到您的代码中并且有效：

添加可见性：隐藏在 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 */
}

在 CSS 中，每次悬停链接时声明工具提示的可见性。尝试对您拥有的所有链接执行此操作。

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

在 html 的元素内添加带有 tooltiptext 的元素。

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

【讨论】：

我添加了 Span 类，但它无法正常工作，就像我在 w3schools.com 中想要的那样。看看我这里的东西codepen.io/AzazelNightCrawl3r/pen/NowyZR