Use the existing html markup in the page as tooltip

6 posts, 1 answers
  1. Tigger Tag
    Tigger Tag avatar
    23 posts
    Member since:
    Dec 2009

    Posted 09 Apr 2014 Link to this post

    Hi,

    I have a grid in the RadAjaxPanel, which has a column with a asp button. Also, the same column has display none div with all the html need for tooltip. I want to use this div as tooltip when the user mouse over this button. Also, this div has links that are clickable. So, how do I use RadToolTipManager or RadToolTip to show the tool tip. Any help is greatly appreciated.

    Thanks,
    Ana
  2. Tigger Tag
    Tigger Tag avatar
    23 posts
    Member since:
    Dec 2009

    Posted 09 Apr 2014 in reply to Tigger Tag Link to this post

    This is what I so far.
    In the radgrid ItemDataBound I am adding the button as TargetControls list. I am sending the ClientId of the Div (which has tooltip html markup for this row) as value

        
    HtmlGenericControl divControl = dataItem.FindControl("_attachmentDiv") as HtmlGenericControl;                      this.TooltipManger.TargetControls.Add(downloadButton.ClientID, divControl.ClientID, true);


    On aspx file:
    <telerik:RadToolTipManager ID="TooltipManger" runat="server" OnClientShow="createContent">      </telerik:RadToolTipManager>


    On javascript code:

        
    function createContent(sender, args) {
             var dataKeys = sender.get_value(); // I am getting the ClientID of the div which need to be shown
    //What should I do now to actually show the content of the Div associated with the dataKeys as tooltip
    }
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 10 Apr 2014 Link to this post

    Hi,

    You can see how to set custom HTML content for a tooltip here: http://demos.telerik.com/aspnet-ajax/tooltip/examples/databasetooltipswithoutlod/defaultvb.aspx. The demo uses a templated div, sets it in the tooltip and populates it with data according to the value property of each tooltip. In your case, you only need to get your div and put it in the tooltip.


    Regards,

    Marin Bratanov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. Tigger Tag
    Tigger Tag avatar
    23 posts
    Member since:
    Dec 2009

    Posted 10 Apr 2014 in reply to Marin Bratanov Link to this post

    Thank you Marin! Going thru the link once again helped me fix the issue. All I needed to add was

    sender.set_content($get(dataKeys).innerHTML);

    But, the tooltip shows but it closes after few seconds even though the mouse is on the button or on the tooltip itself. How do I make sure as long as the mouse is on the button or the tooltip, the tooltip stays open?

    Thank you,
    Ana
  6. Tigger Tag
    Tigger Tag avatar
    23 posts
    Member since:
    Dec 2009

    Posted 10 Apr 2014 in reply to Tigger Tag Link to this post

    Ok, I figured out the property HideEvent is what I need, I thought I needed to set it to LeaveTargetAndTooltip, but that caused the tooltip to close even when the mouse is stayed on the target, but setting LeaveTooltip worked. I didn't find any explanation in the doc as it said they mean what they say, but I thought LeaveTargetAndTooltip is what I needed since I want the tooltip to stay open until the mouse is on target or on the tooltip.
  7. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 10 Apr 2014 Link to this post

    Hello,

    You can just set the AutoCloseDelay property to 0 so it does not close automatically: http://www.telerik.com/help/aspnet-ajax/tooltip-controlling-delay.html.

    You can see the different HideEvent options here: http://demos.telerik.com/aspnet-ajax/tooltip/examples/hideevent/defaultcs.aspx.


    Regards,

    Marin Bratanov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017