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>

我有一个由伪元素组成的纯CSS工具提示，将内容用作属性，如何添加指向工具提示的链接？

1 个答案: