我有一个小问题:我以为我不能使用hint.css添加新行,这是因为回声函数,所以我将其放入html文件中,并且在我的PC上工作正常,但是当我发送它时到服务器,它不是...这是我的html代码:
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<link rel="stylesheet" href="hint.css">
</head>
<body>
<form action="#" method="post">
<center>
<div id="identyfikator" '.$hjk.'>
<font size="5"><b><label>Wybierz pakiet:</label></b></font><br><br>
<table align="center" width="600" cellpadding="0" cellspacing="0" border="0">
<tbody><tr>
<td align="center" valign="top" width="200">
<span class="hint--bottom hint--info" data-hint="'.$opu1.'"><label for="b4"><img src="images/1.jpg" border="0" alt="" onclick="formshowhide("0")" style="cursor: pointer;"></label></span>
</td>
<td align="center" valign="top" width="200">
<span class="hint--bottom hint--info" data-hint="'.$opu2.'"><label for="b5"><img src="images/2.jpg" border="0" alt="" onclick="formshowhide("1")" style="cursor: pointer;"></label></span>
</td>
<td align="center" valign="top" width="200">
<label for="b6"><img src="images/3.jpg" border="0" alt="" onclick="formshowhide("2")" style="cursor: pointer;"></label>
</td>
</tr>
<tr><td colspan="3" style="height:5px;"></td></tr>
<tr>
<td align="center" valign="top" width="200">
<span class="hint--bottom hint--info" data-hint="Cena przelewem: 7.38zł Cena SMS: 11.07zł Opis:"><input type="radio" id="b4" name="check_list[]" onclick="formshowhide("0")" value="V31"> <label style="cursor: pointer;" for="b4"><b>Vip na 31 dni</b></label></span>
</td>
<td align="center" valign="top" width="200">
<span class="hint--bottom hint--info" data-hint="'.$opu2.'"><input type="radio" id="b5" name="check_list[]" onclick="formshowhide("1")" value="DISCZ"> <label style="cursor: pointer;" for="b5"><b>Disco Zbroja</b></label></span>
</td>
<td align="center" valign="top" width="200">
<input type="radio" id="b6" name="check_list[]" onclick="formshowhide("2")" value="test"> <label style="cursor: pointer;" for="b6"><b>test</b></label>
</td>
</tr>
</tr>
</tbody></table>
<input type="submit" name="submit" value="Dalej" />
</div>
<br/>
这是我的hint.css配置:
.hint:before, .hint:after, [data-hint]:before, [data-hint]:after {
position: absolute;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: hidden;
opacity: 0;
z-index: 1000000;
pointer-events: none;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
transition: 0.3s ease;
-webkit-transition-delay: 0ms;
-moz-transition-delay: 0ms;
transition-delay: 0ms; }
.hint:hover:before, .hint:hover:after, .hint:focus:before, .hint:focus:after, [data-hint]:hover:before, [data-hint]:hover:after, [data-hint]:focus:before, [data-hint]:focus:after {
visibility: visible;
opacity: 1; }
.hint:hover:before, .hint:hover:after, [data-hint]:hover:before, [data-hint]:hover:after {
-webkit-transition-delay: 100ms;
-moz-transition-delay: 100ms;
transition-delay: 100ms; }
.hint:before, [data-hint]:before {
content: '';
position: absolute;
background: transparent;
border: 6px solid transparent;
z-index: 1000001; }
.hint:after, [data-hint]:after {
content: attr(data-hint);
background: #383838;
color: white;
padding: 8px 10px;
font-size: 12px;
line-height: 12px;
white-space : pre!important;
}
和URL到我的HTML:没关系了
我会竭尽全力的帮助(对不起我的英语)
最佳答案
如果您要查找的是,这应该可以帮助您在工具提示中添加新行:https://github.com/chinchang/hint.css/issues/13
基本上,您需要更改white-space
值:
.hint:after, [data-hint]:after {
white-space: pre;
}
Demo
或者,您可以在工具提示上also simply set
max-width
并删除white-space: nowrap
。