Question

我创建了这段HTML代码，它有一个css样式工具提示和一个指向该工具提示的链接，无论何时将鼠标悬停在其上都会显示一段文字。
但现在我想在我的工具提示中显示两行或更多行文本。我怎样才能做到这一点？

我尝试使用\n和<br>但没有效果。

＆＃13;

<!DOCTYPE html>
<html>
    
    <head>
        <style>
            table, th, td {
                border: 1px solid black;
            }
        </style>
        <title>CSS3 tooltip</title>
        <style type="text/css">
            .ordertooltip {
                display: inline;
                position: relative;
            }
            .ordertooltip:hover:after {
                background: #333;
                background: rgba(0, 0, 0, .8);
                border-radius: 5px;
                bottom: 26px;
                color: #fff;
                content: attr(title);
                left: 20%;
                padding: 5px 15px;
                position: absolute;
                z-index: 98;
                width: 220px;
            }
            .ordertooltip:hover:before {
                border: solid;
                border-color: #333 transparent;
                border-width: 6px 6px 0 6px;
                bottom: 20px;
                content:"";
                left: 50%;
                position: absolute;
                z-index: 99;
            }
        </style>
    </head>
    
    <body>
        </br>
        </br>
        </br>
        </br> <a title="1-Line One\n2-Line two<br>3-Line Three" class="ordertooltip"><span title="More">My Tip</span></a>

    </body>

</html>

＆＃13;

更新

好的使用以我不会应用我的css的方式工作，但是当我应用它时，它不再工作。

更新2

感谢您的回复，但我应该说我不能使用任何外部库我需要支持至少Firefox，因此命中输入不适合我。

更新3

我为自己的问题找到了解决方法并回答here，但肯定是不可接受的答案，因为它只是一种解决方法。希望有人为原始问题带来一个很好的解决方案。

Answer 1

如果工具提示文本没有更改运行时，则可以将固定宽度赋予.ordertooltip:Hover:after

使用换行;

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
</style>


<title>CSS3 tooltip</title>
	
<style type="text/css">
	
.ordertooltip{
  display: inline;
  position: relative;
 }
		
 .ordertooltip:Hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(title);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 100px;
}
		
.ordertooltip:Hover:before{
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}
	
  </style>


</head>


<body>

</br></br></br></br>
<a title="1-Line One&#013;2-Line two&#013;3-Line Three" class="ordertooltip"><span title="More">My Tip</span></a>


</body>
</html>

希望有助于前进。

Answer 2

我通过添加 data 属性解决了这个问题。

data-html="true"

并在标题中添加 <br> 为：title="Requirement: <br> 0.7"。

Answer 3

您有几个选择：

使用工具提示插件（http://iamceege.github.io/tooltipster/也不错）
只需按下＆＃34;输入＆＃34;密钥（并非在所有浏览器中都支持）

对于选项2，这是代码的外观：

<a title="First line
Second line
Third line">My link</a>

我没有测试浏览器兼容性。

有关更多信息，请查看this stackoverflow post。

选项2演示：

＆＃13;

a { background-color: #c3c3c3; display: block; width: 100px; height: 100px; }

＆＃13;

<a title="This is a title
Second line
Third line">Contents</div>

＆＃13;

然后只需添加自己的自定义CSS。

但就个人而言，如果我是你，我会使用工具提示库。它更简单，有很多选择。不要重新发明轮子！：）

Answer 4

我没有接受我自己的答案，因为它只是一个没有答案的工作

我已经更改了我的CSS并在我的HTML中使用了span，所以现在我可以使用<br>标记添加换行符。

＆＃13;

<!DOCTYPE html>
<html>
    
    <head>
        <style type="text/css">
            .txt {
				display: inline-block;
				position: relative;
			}
			.ordertooltip {
				display: none;
				width: 200px;
				position: absolute;
				padding: 8px;
				margin: 4px 0 0 4px;
				top: 20;
				left: 16px;
				border: 1px solid #76B6D7;
				border-radius: 0px 8px 8px 8px;
				background: #bedffe;
				font-size: 15px;
				box-shadow: 0 1px 2px -1px #21759B;
				z-index: 999;
				background-position: 0 0;
				border-color: #76B6D7;
				background-color: #bedffe;
				box-shadow-color: #21759B;
			}
			.txt:hover .ordertooltip {
				display: block;
			}
        </style>
    </head>
    
    <body>
        </br>
        </br>
        </br>
        </br> 
		<span class="txt">My Tip</a>
				<span class="ordertooltip">1-Line One<br>2-Line two<br>3-Line Three</span>
		</span>

    </body>

</html>

＆＃13;

如何在标题值中打破行

4 个答案: