如何在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合作，但至少对我而言......

代码如下：

在主管部分 -

<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>

在正文部分 -

<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>

找到 HERE

Answer 2

您可能已将 SAME ID用于所有元素。由于DOM ID在整个文档中必须是唯一的，因此$('#delay-example')正确返回文档中的FIRST ID，并忽略所有其他ID。

e.g。

<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>