我有一个纯CSS工具提示，用伪元素制作，获取属性的内容，如何添加工具提示的链接？

Question

这是我的HTML

<div class="tooltip" tooltip-data="Hi, I'm a tooltip">Div with standard tooltip. Hover me to see the tooltip.
</div>

这是我的CSS

.tooltip:before {

    content: attr(tooltip-data);
    position: absolute;
    opacity: 0;
    margin-left: 200px;
    transition: all 0.15s ease;
    padding: 10px;
    color: #333;
    border-radius: 10px;
    box-shadow: 2px 2px 1px silver;    
}

.tooltip:hover:before {
    opacity: 1;
    background: yellow;
    margin-top: 0px;
    margin-left: 220px;    
}


.tooltip {
    border: 1px solid silver;
    background: #ddd;
    margin: 20px;
    padding: 10px;
    width: 200px;
}

我做了这个JSfiddle

我想使工具提示更时尚和链接

我想拥有：

• 大胆的大头衔 - 换行
• 短句 - 换行
• 链接

Answer 1

您可以通过添加额外的div并使用CSS来完成此操作。

它基本上是一个手动工具提示，您需要它，因为您无法将HTML插入工具提示的数据字段中。

希望这段代码片段有所帮助！

编辑：添加换行符。

.tooltip:before {
    content: attr(tooltip-data);
    position: absolute;
    opacity: 0;
    margin-left: 200px;
    transition: all 0.15s ease;
    padding: 10px;
    color: #333;
    border-radius: 10px;
    box-shadow: 2px 2px 1px silver;    
}

.tooltip:hover .tooltip-content {
    opacity: 1;
    background: yellow;
    margin-top: 0px;   
}

.tooltip-content {
  position: absolute;
  opacity: 0;
  border-radius: 12px;
  padding: 10px;
  margin-left: 220px;
  top: 3%;
}

.tt-title {
  font-weight: bold;
}

span {
  display: block;
}

.tooltip {
    border: 1px solid silver;
    background: #ddd;
    margin: 20px;
    padding: 10px;
    width: 200px;
}

<div class="tooltip">Div with standard tooltip. Hover me to see the tooltip.
  <div class="tooltip-content">
  <span class="tt-title">Bold title</span> <span>short sentence</span> <a href="#"">link</a>
  </div>
</div>

Answer 2

在span DOM中使用wrap并将其显示为onhover

.tooltip {
    position: absolute;
    opacity: 0;
    margin-left: 200px;
    transition: all 0.15s ease;
    padding: 10px;
    color: #333;
    border-radius: 10px;
    box-shadow: 2px 2px 1px silver;    
}

.wrap:hover  .tooltip{
    opacity: 1;
    background: yellow;
    margin-top: 0px;
    margin-left: 220px;    
}


.wrap {
    border: 1px solid silver;
    background: #ddd;
    margin: 20px;
    padding: 10px;
    width: 200px;
}

<div class="wrap">
  <div class="tooltip">
    <h4>TITLE</h4>
    <p>short sentence </p>
    <a href="#">click me!</a>
  </div>
 Div with standard tooltip. Hover me to see the tooltip.
</div>

Answer 3

伪内容有一些限制，我们不能用它来容纳HTML元素。但是，我们仍然可以通过创建自己的基于标签的工具提示来做一些很酷的事情。

• 使用transform代替margin进行移动的性能改进（特别是在移动设备上）
• 通过tab键显示工具提示访问来改进UX
• 使用transform缩放工具提示来改善外观
• 使用role=tooltip提高可访问性

.tooltip-wrapper {
  border: 1px solid silver;
  background: #ddd;
  margin: 20px;
  padding: 10px;
  width: 200px;
  position: relative;
}

[role="tooltip"] {
  position: absolute;
  opacity: 0;
  left: 100%;
  min-width: 90px;
  transform: translateX(-20px) scale(.85);
  transition: all 0.15s ease;
  padding: 10px;
  color: #333;
  border-radius: 10px;
  box-shadow: 2px 2px 1px silver;
}

.tooltip-wrapper:focus [role="tooltip"],
.tooltip-wrapper:hover [role="tooltip"] {
  opacity: 1;
  background: yellow;
  transform: translateX(0) scale(1);
}

[role="tooltip"].bottom {
  left: 50%;
  top: 100%;
  transform: translate(-50%, -20px) scale(.85);
}

.tooltip-wrapper:focus [role="tooltip"].bottom,
.tooltip-wrapper:hover [role="tooltip"].bottom {
  transform: translate(-50%, 0) scale(1);
}

<div class="tooltip-wrapper" tabindex="0">
  <div role="tooltip">
    <strong>Bold Title</strong>
    <p>short setence</p>
    <a href="#">a link!</a>
  </div>
  Div with HTML tooltip. Hover me to see the tooltip.
</div>

<div class="tooltip-wrapper" tabindex="0">
  <div role="tooltip" class="bottom">
    <strong>Bold Title</strong>
    <p>short setence</p>
    <a href="#">a link!</a>
  </div>
  Div with bottom HTML tooltip. Hover me to see the tooltip.
</div>

jsFiddle