0

Web ページで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>

画像 ： -

ここに画像の説明を入力

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')見つかった最初の 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 に答える