Toogle tooltip with onclick

[Victor]

Is it possible to show/hide the tooltip with the onclick event of the tagetcontrolid?

[Shinu]

Hi Victor,

I am not sure whether I understood the question correctly. Give a try with the following code snippet and see if it is helpful.

ASPX:

<asp:Button ID="Button1" runat="server" Text="Click" OnClick="Button1_Click" />

        <telerik:RadToolTip ID="RadToolTip1"   Text="MyToolTip" TargetControlID="Button1" runat="server">
        </telerik:RadToolTip>

CS:

protected void Button1_Click(object sender, EventArgs e)
    {
        RadToolTip1.Visible = !RadToolTip1.Visible;
    }

Thanks
Shinu.

[Victor]

The OnClick event never fires.

[Tervel]

Hello Victor,


I suggest using the RadToolTip's property ShowEvent = "OnClick"

All the best,
Tervel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Victor]

Yes this works to show the tip, but not to toggle it.

What I am trying to do is, if the tooltip is hidden and you click on a link (the targetcontrolid) the tip shows. If the tooltip is showing and you click on the link the tip hides.

[Shinu]

Hi Victor,

Could you please send your aspx?

Shinu.

[Victor]

	<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ArtistMenu.ascx.cs" Inherits="usercontrols_ArtistMenu" %>
	<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
	<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
	<asp:LinkButton ID="hlArtistName" runat="server" CssClass="ArtistMenu" OnClick="LinkButton_Click" />
	<telerik:RadToolTip ID="radArtistMenu" runat="server" Width="200" TargetControlID="hlArtistName" ShowCallout="false" ShowEvent="onclick" Sticky="true" Animation="fade" ManualClose="true" RelativeTo="element" Skin="Default" Position="BottomRight">
	<asp:Panel runat="server" ID="pnlArtist" CssClass="ArtistMenuItemFirst">
	<asp:Image runat="server" ID="radMenuArtistIcon" Width="20" /><asp:HyperLink runat="server" ID="radMenuArtist" />
	</asp:Panel>
	<asp:Panel runat="server" ID="pnlAddToFavorites" CssClass="ArtistMenuItem">
	<asp:Image runat="server" ID="imgAddToFavorites" ImageUrl="/images/community/17x17-AddFavArtist.png" /><asp:HyperLink runat="server" ID="radMenuAddToFavorites" Text="Add to Favorite Artists" />
	</asp:Panel>
	<asp:Panel runat="server" ID="pnlSendAMessage" CssClass="ArtistMenuItem">
	<asp:Image runat="server" ID="imgSendAMessage" ImageUrl="/images/community/16x16-SendMessage.png" /><asp:HyperLink runat="server" ID="radMenuSendAMessage" Text="Send a Message" />
	</asp:Panel>
	<asp:Panel runat="server" ID="pnlSeeGalleries" CssClass="ArtistMenuItem">
	<asp:Image runat="server" ID="imgSeeGalleries" ImageUrl="/images/community/16x16-SeeGalleries.png" /><asp:HyperLink runat="server" ID="radMenuSeeGalleries" Text="See Galleries" />
	</asp:Panel>
	<asp:Panel runat="server" ID="pnlInviteToAGroup" CssClass="ArtistMenuItem">
	<asp:Image runat="server" ID="imgInviteToAGroup" ImageUrl="/images/community/16x16-InviteToGroup.png" /><asp:HyperLink runat="server" ID="radMenuInviteToAGroup" Text="Invite to a Group" />
	</asp:Panel>
	</telerik:RadToolTip>

[Svetlina Anati]

Hi Victor,

You can achieve the desired behavior by using some javascript code - you can declare a global boolean variable and switch its value. Based on the variable's value you can determine whether to show the tooltip or not in the tooltip's OnClientBeforeShow handler as shown below:

  <script type="text/javascript">
        var toShow = true;
        function OnClientBeforeShow(sender, args)
        {
            if(!toShow)
            {
               args.set_cancel(true);
            }
            toShow = !toShow;

        }
        </script>
        <asp:LinkButton ID="hlArtistName" runat="server" CssClass="ArtistMenu" Text="Target control" />
        <telerik:RadToolTip ID="radArtistMenu" runat="server" Width="200" TargetControlID="hlArtistName"
            ShowCallout="false" ShowEvent="onclick" Sticky="true" Animation="fade" ManualClose="true"
            RelativeTo="element" Skin="Default" Position="BottomRight" OnClientBeforeShow="OnClientBeforeShow">
            <asp:Panel runat="server" ID="pnlArtist" CssClass="ArtistMenuItemFirst">

For your convenience I attached the sample page.

All the best,
Svetlina
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.