CODEWITHSUNDEEP
asp.nettooltiprichtext
Mohamed Kamal
Mohamed Kamal

Reputation: 2352

How to display rich text in tooltip ASP.Net?

I use the following code to display a tooltip

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
    DataKeyNames="ID" DataSourceID="AccessDataSource1">
    <Columns>
        <asp:CommandField ShowEditButton="True" />
        <asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" 
            ReadOnly="True" SortExpression="ID" />
        <asp:BoundField DataField="datefu" HeaderText="date" 
            SortExpression="datefu" />
        <asp:TemplateField HeaderText="title" SortExpression="titlefu">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("titlefu") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>

        <a href="#" title="<asp:Literal ID="Label1" runat="server" Text='<%# Eval("fu") %>'/>"/>



        <asp:Label ID="NamePatientLabel" runat="server" Text='<%# Eval("titlefu") %>' />

            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

display the following result

alt text

however when i edit the text as follows (making it bold and red in another gridview containing rich text editor)

i get the following (as a formatting result in the second grid view)

alt text

however when i view in the first gridview to display the tooltip i get the following reult

alt text

i really need your help to display the tooltip as rich text

although many people say that jquery is "very easy", please let me know if you have a solution other than jquery.

Upvotes: 2

Views: 3340

Answers (3)

statmaster
statmaster

Reputation: 1219

try this

How to use AJAX tooltip control?

Upvotes: 1

PhilPursglove
PhilPursglove

Reputation: 12589

You might want to take a look at the HoverMenuExtender in the AjaxControlToolkit. Despite the name it doesn't just display menus - you can use it to do popups. I just used it to do something similar to what you want to do.
e.g. 

<%@ Register TagPrefix="ajaxtoolkit" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>
<asp:ScriptManager runat="server" ID="scriptmanager" />
<div>
    <asp:GridView ID="Gridview1" runat="server" AutoGenerateColumns="false" CellPadding="2"
        CellSpacing="2">
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <asp:Label ID="Label1" Text='<%# Container.DataItem %>' runat="server" />
                    <ajaxtoolkit:HoverMenuExtender runat="server" TargetControlID="Label1" PopupControlID="PopupPanel"
                        ID="hme" PopupPosition="Right" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
    <asp:Panel ID="PopupPanel" runat="server" BackColor="White">
        <asp:Label ID="Label2" Text="Some text" runat="server" Font-Bold="true" ForeColor="Red" />
    </asp:Panel>
</div>

Upvotes: 2

Pauli &#216;ster&#248;
Pauli &#216;ster&#248;

Reputation: 6916

Don't use the browser's native tooltip but implement some kind of balloon tip. There are many ways to do this, this page shows 12 ways in jquery http://www.dreamcss.com/2009/05/12-jquery-tooltip-for-web-developer.html

A simple example with qTip is to add an attribute named tooltip to all your a-hrefs containing your text and executing this jquery startup script

$(document).ready(function() 
{
   $('#content a[tooltip]').each(function()
   {
      $(this).qtip(
      {
         content: $(this).attr('tooltip')
      });
   });
});

Upvotes: 2

Related Questions