A possible workaround is to add the background-color via CSS: div.RadToolTip.RadToolTip_Office2007, .RadToolTip_Office2007 div.rtContent { background-color: #d7e3f2; }
In case the color difference is a problem, you can examine the rendered Classic tooltip and find the color CSS rule that is applied, then apply it to the Lightweight mode via a CSS selector similar to the following: div.RadToolTip_Simple .rtContent { color: #C98400; } Where you can change Simple with the skin name that you are using.
The workaround is to avoid the other settings (e.g., Auto). In most cases Lightweight RenderMode will suffice, the only potential issue is loss of gradients, shadows and rounded corners in IE6-8.
The request needs to be encoded for the WCF service context to be able to recognize the data as a class the developer can create. A small sample is attached that: - overrides a function from RadToolTipManager to encode the request - has a simple WCF service implemented that shows how to access the passed data and use it
The issue stems from the content div element that has explicit background color. The loading sign is a background-image on the main tooltip wrapper, so having explicit height and/or scrolling causes the later element to hide the root element, thus, hiding the loading sign as well. You can work around this by removing the explicit color declaration for all skins: div.RadToolTip div.rtContent { background-color: transparent; }
When the tooltip is behind the modality it cannot be closed by the users. You can workaround this behavior by following the script below: <telerik:RadButton runat="server" ID="RadButton1" Text="Hover"></telerik:RadButton> <telerik:RadToolTip ID="rttAdditionalFeatures" runat="server" ManualClose="True" Modal="True" TargetControlID="RadButton1" ShowEvent="OnMouseOver" OnClientShow="OnClientShow"> Some text </telerik:RadToolTip> <script type="text/javascript"> function OnClientShow(sender, args) { var modalLayerZindex = sender._modalExtender._backgroundElement.style.zIndex; if (sender.get_zIndex() <= modalLayerZindex) { sender.get_popupElement().style.zIndex = modalLayerZindex + 1; } } </script>
The RadTooltip and RadTooltipManager do not display tooltips like the default browser tooltips, if the tooltips are "nested". Consider HTML like this My name is <span class="app" title="Person Tooltip">Mathyß<a class="noteLink criticalRight" id="RqoTeiLink_a" title="Der Notelink Tooltip"><sup>a</sup></a> Schwertzenbachen</span>, and I live somewhere. If you tooltipify this HTML then only the "outer" tooltip is displayed all the time. When using just the browser, then it displays correctly the "inner" tooltip when you hover over the link. As the behaviour is not consitent with the browser (and other Tooltip libraries) this should be fixed.
A possible workaround is to recalculate the positions in the OnClientShow event. Here is an example for the BottomCenter position <script> function repositionCallout(sender, args) { var callout = $telerik.$(".rtCallout.rtCalloutTopCenter", sender.get_popupElement()); if (callout.length > 0) { //there is a callout and its position is in the top center (i.e., tooltip's position is BottomCenter) var targetPos = $telerik.getBounds(sender.get_targetControl()); var ttipPos = $telerik.getBounds(sender.get_popupElement()); var calloutPos = $telerik.getBounds(callout[0]); var desiredCalloutLeft = targetPos.x - ttipPos.x + targetPos.width / 2 - calloutPos.width / 2; callout.css("left", desiredCalloutLeft); } } </script> <telerik:RadToolTip ID="MainMenu" runat="server" TargetControlID="imgbtnMenuIcon" ShowEvent="OnClick" ShowDelay="0" AutoCloseDelay="0" Position="BottomCenter" RelativeTo="Element" RenderMode="Lightweight" Width="500px" Height="500px" OnClientShow="repositionCallout"> tooltip content </telerik:RadToolTip>
When a large page is scrolled to the target element, the tooltip is placed higher than expected. Possible workaround is to use RelativeTo="Element" property.