RadTooltipManager in QuirksMode

3 posts, 0 answers
  1. Pat
    Pat avatar
    31 posts
    Member since:
    Dec 2011

    Posted 08 Dec 2011 Link to this post

    I'm currently working with the RadTooltipManager to be able to click on a thumbnail and display a larger portion of the image positioned at the center of the browser window.  It is currently working in every browser except in "QuirksMode" in InternetExplorer.  When using QuirksMode, the image is placed at the verybottom of the screen. Any idea why this issue is happening or any advice on how to resolve it?  See attached images for clarification and understanding, below are snippets of my code.

    <telerik:RadToolTipManager ID="RadToolTipManager1" runat="server" Width="400" Height="400" Enabled="true" Modal="true" OnAjaxUpdate="RadToolTipManager1_AjaxUpdate" ShowEvent="OnClick" HideEvent="ManualClose"   RelativeTo="BrowserWindow" Position="Center" ></telerik:RadToolTipManager>

    protected void PictureGrid_DataBound(object sender, RadListViewItemEventArgs e)
    {
           if (e.Item is RadListViewDataItem)
           {
               int position = ((RadListViewDataItem)e.Item).DataItemIndex;
               ((RadTextBox)e.Item.FindControl("ThumbnailCaptionTextbox")).Text = FindCurrentEntry().Attachments.ElementAt(position).Caption;
               Image image = (Image)e.Item.FindControl("ThumbnailImage");
               image.ImageUrl = "../ImageViewer.ashx?fileId=" + PictureGridData.ElementAt(position).Key + "&sizeType=thumbnail";
               RadToolTipManager1.TargetControls.Add(image.ClientID, true);
          }
    }
    protected void RadToolTipManager1_AjaxUpdate(object sender, ToolTipUpdateEventArgs e)
    {
          Image image = new Image();
     
          bool found = false;
          for (int i = 0; ((i < PictureGrid.Items.Count) && (!found)); i++)
          {
               for (int j = 0; ((j < PictureGrid.Items[i].Controls.Count) && (!found)); j++)
               {
                    if (e.TargetControlID == PictureGrid.Items[i].Controls[j].ClientID)
                    {
                         image.ImageUrl = "../ImageViewer.ashx?fileId=" + PictureGridData.ElementAt(i).Key + "&sizeType=larger";
                         found = true;
                    }
               }
          }
         e.UpdatePanel.ContentTemplateContainer.Controls.Add(image);
    }
  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 09 Dec 2011 Link to this post

    Hello Pat,

    Since you want the tooltip centered in the browser it has its CSS position property set to fixed in order to stay relative to the browser. The QuirksMode of IE resembles IE5 and IE6 which do not support this property and thus the tooltip is not positioned as you might expect.

    What I can say is that entering quirksmode would generally not happen, especially if your page correctly has the XHTML 1.0 Transitional doctyle and is valid HTML, so this issue will not manifest itself. Additionally you can fore IE into its newest mode by using a meta tag as explained here by Microsoft (the IEMode=Edge option):
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" >


    All that being said there is a way to make it work in quirks mode by forcing the position to absolute by using a CSS hack only IE6 will read (note the underscore in the beginning of the property):
    div.RadToolTip
    {
        _position: absolute !important;
    }



    Best wishes,
    Marin
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Pat
    Pat avatar
    31 posts
    Member since:
    Dec 2011

    Posted 12 Dec 2011 Link to this post

    That worked perfectly,

    Thanks for the help Marin.

    -  Pat
Back to Top