CODEWITHSUNDEEP
jqueryuser-interfacetooltip
Stanton
Stanton

Reputation: 1374

Is it possible to use jQuery UI tooltip on a table row?

I've searched for two hours, found this question asked a zillion times but never really answered:

Can I get the jQuery UI to give me a tooltip popup on mouseover of a table row? I've tried this:

$('*').tooltip({ content: "hello world" });

Which gives me the tooltip on some elements but not others. Any insight is much appreciated.

EDIT:

Sample of the markup:

<asp:Panel ID="pnlWrapperMainTable" runat="server">

    <!--    Main data table  -->
    <table id="tblDisplayEDD" class="c_grid_table" border="0">

        <thead>
            <tr>
                <th  class="c_grid_head">Field ID</th>
                <th  class="c_grid_head">Field Name</th>
            </tr>   
        </thead>

        <tbody>

        <asp:Repeater ID="rptrMainTable" runat="server">
            <ItemTemplate>
                <tr class="c_grid_row">
                    <td class="c_grid_cell" style="text-align: left;">   
                    <%#Eval("FieldID")%></td>
                    <td class="c_grid_cell"><%#Eval("FieldName")%></td>
                </tr>
            </ItemTemplate>

            </asp:Repeater>

        </tbody>

    </table>

</asp:Panel>

Upvotes: 0

Views: 10375

Answers (3)

Steve Leherpeux
Steve Leherpeux

Reputation: 1

See this page : http://api.jqueryui.com/tooltip/#option-items

There is information about the way to use different html tag instead "title" attributes.

In my case i use tooltip on td tag with this code :

HTML

<td class="to"></td>

Javascript

$(".to").tooltip({
    items: "td",
    content: "My content :)"
});

Regards,

Upvotes: 0

Stanton
Stanton

Reputation: 1374

Hours of trial and error revealed the simple solution: any control you want to have a tooltip must have a 'Title' property. Title = '' will do fine, and you can change the value of the 'title' tag on mouseover.

Upvotes: 4

Miguel Jose R. Raudez
Miguel Jose R. Raudez

Reputation: 171

Not give much information about what you want to do, if you gave more information would be better. I made a small example of what was understood your question.

jsFiddle

.js

$(document).tooltip({
items:"[title],[data-title]",
content: function () { 
    var element = $(this);
    if ( element.is( "[data-title]" ) ) {
        return element.data("title");
        }
    if ( element.is( "[title]" ) ) {
       return element.attr( "title" );
        }
    }
});

Example with tooltip input in row

Upvotes: 3

Related Questions