0

我在我的网页中使用Tipsy来显示工具提示。但它显示 Title with Tipsy css etc.. 非常适合第一个结果，但不适用于 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>

图片 ： -

在此处输入图像描述

4

2 回答 2

2

我找到了以下解决方案。它仅适用于 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>

在这里找到这个

于 2015-02-23T16:30:14.187 回答
0

您可能对所有元素都使用了相同的id。由于 DOM ID 在整个文档中必须是唯一的，$('#delay-example')因此正确返回在您的文档中找到的 FIRST 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>
于 2015-02-23T15:57:42.923 回答