jquery tooltip into display:column

Question

i'm using displayTag to show some tables. I want to add a tooltip to display:column using jquery

Here is my code:

<c:set var="titleName"><wp:i18n key="FILENAME"/></c:set>
<display:column  title="${titleName}" class="nowrap">       
<script type="text/javascript" >
    $(document).ready(function() {
        $('.infoTooltip${docFinancial_rowNum}').tooltip({ 
            items: 'span',
            content: "<c:out value="${docFinancial.fileNameToDisplay}" />" }).tooltip("open");;
    });
</script>           
<span id="infoTooltip${docFinancial_rowNum}"> <c:out value="${fn:substring(docFinancial.fileNameToDisplay, 0, 20)}" />...</span>
</display:column>

But it's not working.. the tooltip is never displayed and i have no js error

this is the HTML source generated code

<td class="nowrap"><script type="text/javascript" >
        $(document).ready(function() {
            $('#infoTooltip14').tooltip({ 
                items: 'span',
                content: "I-B_2.1_529_AQUAKNIGHT_Budget A Contingency_I-B_2.1_529_AQUAKNIGHT_budget approved_customized_b" }).tooltip("open");
        });
    </script>           
    <span id="infoTooltip14"> I-B_2.1_529_AQUAKNIG...</span>
    </td>

What's wrong?

Thanks

andrea

Answer 1

You need to use # to target element by id , you also need to escape special characters using double backslashes \\\\ :

$('#infoTooltip\\$\\{docFinancial_rowNum\\}').tooltip({ 
// ^-- Use # instead of . 

---

Try to use attribute start with selector:

$('[id^="infoTooltip"]').tooltip({