how to use tipsy in php?

Question

I am using Tipsy in my webpage to show tooltip. But it is showing Title with Tipsy css etc.. perfectly for first result but not working on another results from mysql. On Another Simple Title is shown on hover. (Please See below attached Image )

I am using following code where $data["remark"] is fetched from mysql database and used as title in code and it is working ok.

In Head

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

In Body section

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

Image : -

Answer 1

I found Following Solution. It is working with CSS only, But Worked Perfectly At least For Me..

Code Is As Follow :

In Head Section -

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

In Body Section -

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

Found This HERE

Answer 2

You've probably used the SAME id for all of your elements. Since a DOM ID must be unique across the entire document, $('#delay-example') is properly returning the FIRST id found in your document, and ignoring all the others.

e.g.

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

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

Would result in this html:

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

By comparison, using CSS classes:

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

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

would produce

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