I tried combining the jQuery truncation plugin that I found a while back with the jQuery clueTip plugin that I posted about several weeks ago to improve the display of data in an ASP.NET ListView.

Demo | Download

End Product:

I had some trouble getting the two plugins to work together. I initially tried adding a ToolTip to the label containing the note, but things just didn't work.  I suspect one or the other isn't properly constructed, but I am not really sure. I haven't learned how to write jQuery plugins yet so it is only an assumption which could certainly be wrong and I might be missing something.

I was able to get things to work by not including the ToolTip or title on the label, but instead on the cell that contains the note. This has the advantage that the clueTip appears whenever the user's mouse is in the cell and not just when over the text.

HTML:

<td title='<%# Eval("contactname") + " Note|" + Eval("note") %>' class="noteTD">
    <asp:Label ID="Label1" runat="server" Text='<%# Eval("note") %>' CssClass="note"></asp:Label>
</td>

jQuery:

<script type="text/javascript">
    $(document).ready(function() {
        $('.noteTD').cluetip({ splitTitle: '|', width: 300, cursor: 'pointer', sticky: false });
        $('.note').truncate({ max_length: 50 });
    });         
</script>

If anyone figures out why the two plugins don't play nice, please let me know in the comments.