如何在php中使用tipsy？

Question

我在我的网页中使用Tipsy来显示工具提示。但它使用Tipsy css等显示标题。完美适用于第一个结果，但不适用于mysql的另一个结果。另一个简单的标题显示在鼠标悬停位置。(请参阅以下附图)

我正在使用下面的代码，其中$data"remark“是从mysql数据库中提取的，并在代码中用作标题，它工作正常。

在头部

<link rel="stylesheet" href="css/tipsy.css" type="text/css" />
<script type="text/javascript" src="js/jquery.tipsy.js"></script>

在正文部分

<div>
<a id='delay-example' href="#"  title="<?=$data['remark']?>" 
        style="cursor:pointer;"> Show Remark</a>
</div>


<script type='text/javascript'>
   $('#delay-example').tipsy({delayIn: 500, delayOut: 3000});
</script>

图片：-

​

​

Answer 1

我找到了以下解决方案。它只适用于CSS，但至少对我来说是完美的。

代码如下：

在Head部分中-

<style type="text/css">
    .tooltip {
        border-bottom: 1px dotted #000000; color: #000000; outline: none;
        cursor: help; text-decoration: none;
        position: relative;
    }
    .tooltip span {
        margin-left: -999em;
        position: absolute;
    }
    .tooltip:hover span {
        border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
        font-family: Calibri, Tahoma, Geneva, sans-serif;
        position: absolute; left: 1em; top: 2em; z-index: 99;
        margin-left: 0; width: 250px;
        -webkit-transition: all 0.1s ease-out; -moz-transition: all .1s ease; -o-transition: all .1s ease;
    }
    .tooltip:hover img {
        border: 0; margin: -10px 0 0 -55px;
        float: left; position: absolute;
    }
    .tooltip:hover em {
        font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
        display: block; padding: 0.2em 0 0.6em 0;
    }

    .help { background: #9FDAEE; border: 1px solid #2BB0D7; }

    </style>

在Body部分中-

<div>
  Special Remark <a class="tooltip" href="#"  style="cursor:pointer;"><img src="images/remarkhelp.png" width="15px" height="15px"/><span class="custom help"><img src="images/help.png" width="15px" height="15px"/><em>Special Remark</em> <?=$data['remark']?></span></a>
</div>

找到此

Answer 2

您可能对所有元素都使用了相同的 id。因为DOM ID在整个文档中必须是惟一的，所以$('#delay-example')正确地返回了文档中找到的第一个id，而忽略了所有其他的id。

例如：

<div id="foo">foo #1</div>
<div id="foo">foo #2</div>

$('#foo').innerText = 'hahaha not foo any more';

将产生这个html：

<div id="foo">hahaha not foo anymore</div>
<div id="foo">foo #2</div>

相比之下，使用CSS类：

<div class="foo">foo #1</div>
<div class="foo">foo #2</div>

$('.foo').innerText = 'hahaha not foo anymore';

会产生

<div class="foo">hahaha not foo anymore</div>
<div class="foo">hahaha not foo anymore</div>