html - 在文本悬停框中格式化文本

Question

我正在使用一些代码，当您将鼠标悬停在某些文本上时会显示一个文本框。问题是文本框中显示的文本来自 <a> 的属性标记它在里面，我无法格式化它。我想在文本框中做一个列表，但我只能做成一堵文字墙。

HTML:

<a data-text="Could use this text instead of title" title="1. ~~~~ List item (/br)~~~~ 
                                    2. ~~~~ List item ~~~~ 
                                    3. ~~~~ List item ~~~~ 
                                    4. ~~~~ List item ~~~~ 
                                    5. ~~~~ List item ~~~~ " class="tooltip">Hover over this text</a>   

CSS:

.tooltip{
    display: inline;
    position: relative;
}

.tooltip:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(title);
    left: 100%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 220px;
}

content: attr(title);

.tooltip:hover:before{
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}

查看此演示:http://jsfiddle.net/h3tqwust/1/

我如何为此格式化文本(有换行符)？

Answer 1

这是一种简单的格式化方法，使用 white-space: pre保留 :after 中的空白伪元素并确保 title仔细格式化属性。

但是，HTML 标记如 <b>由于插入内容的解析方式，将无法正常工作。

如果您需要更复杂的样式，那么您需要一个 jQuery/JavaScript 辅助解决方案。

.tooltip{
    display: inline;
    position: relative;
}

.tooltip:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 0px 5px 5px 5px;
    top: 15px;
    color: #fff;
    content: attr(title);
    left: 100%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 220px;
    white-space: pre;
}

<a
title="1. ~~~~ List item ~~~~ 
2. ~~~~ List item ~~~~ 
3. ~~~~ List item ~~~~ 
4. ~~~~ List item ~~~~ 
5. ~~~~ List item ~~~~" 
   class="tooltip">Hover over this text</a>