Question

我有一个小问题：我无法使用hint.css添加新行我认为，这是因为echo函数所以我把它放到html文件中它在我的电脑上工作正常，但是当我发送到服务器，它没有...这是我的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ł&#10; Cena SMS: 11.07zł&#10; 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;
    }

和我的html网址：不再重要了

我会很乐意寻求帮助（对不起我的英语）

Answer 1

这可以帮助您在工具提示中获得新行，如果您正在寻找的话：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。

PHP hint.css添加新的文本行

1 个答案: