RadToolTip Object
The following table lists the most important members of the client-side RadToolTip object:
RadToolTip
Public Properties
Name | Description |
---|---|
get_animation | Gets animation value for the tooltip. Returns an object of type Telerik.Web.UI.ToolTipAnimation . |
get_animationDuration | Gets animation duration value for the tooltip in milliseconds. |
get_autoCloseDelay | Gets delay in milliseconds for the tooltip to close automatically |
get_content | Gets the current content of the tooltip |
get_contentElement | Gets the content element of the tooltip. See Example 1. |
get_contentScrolling | Gets a new overflow value for the tooltip content area. Returns an object of type Telerik.Web.UI.ToolTipScrolling |
get_enableShadow | Gets a value indicating whether the tooltip should have a shadow. |
get_height | Gets height of the tooltip |
get_hideDelay | Gets the delay in milliseconds before the tooltip is hidden. |
get_ignoreAltAttribute | Gets a value indicating whether the Alt attribute of the target should be ignored. |
get_modal | Gets whether the tooltip is modal. |
get_manualClose | Gets whether the tooltip requires to be hidden manually by the user, or hides automatically |
get_mouseTrailing | Gets whether the tooltip should follows the mouse movement or not |
get_offsetX | Gets the horizontal offset relative to its target element |
get_offsetY | Gets the vertical offset relative to its target element |
get_overlay | Gets a value indicating whether the tooltip has an overlay element. |
get_popupElement | Returns a reference to the DOM object of the popup element. |
get_position | Gets the relative position to the tooltip to its target element. Returns an object of type Telerik.Web.UI.ToolTipPosition. |
get_relativeTo | Gets whether the tooltip is positioned relative to the mouse or relative to the tooltip. Returns an object of type Telerik.Web.UI.ToolTipRelativeDisplay . |
get_showCallout | Gets whether the tooltip callout image will be displayed |
get_showDelay | Gets delay in milliseconds for the tooltip to appear |
get_sticky | Gets whether the tooltip is hidden when the mouse leaves the target control, or the tooltip itself |
get_targetControl | Gets a reference to the tooltip target element |
get_targetControlID | Gets the target control of the tooltip |
get_text | Gets the text of the tooltip. See Example 2. |
get_title | Gets the title of the tooltip |
get_width | Gets width of the tooltip |
set_animation | Sets animation value for the tooltip. Requires a parameter of type Telerik.Web.UI.ToolTipAnimation . The possible values of this enumerator are None , Resize , Fade , Slide , FlyIn . For example: radToolTip.set_animation(Telerik.Web.UI.ToolTipAnimation.None); . |
set_animationDuration | Sets animation duration value for the tooltip in milliseconds. |
set_autoCloseDelay | Sets delay in milliseconds for the tooltip to close automatically. See Example 3. |
set_content | Sets new content to the tooltip |
set_contentElement | Sets a new content element to the tooltip |
set_contentScrolling | Sets a new overflow value for the tooltip content area. Requires a parameter of type Telerik.Web.UI.ToolTipScrolling . The possible values are Auto , None , X , Y , Both , Default. For example: radToolTip.set_contentScrolling(Telerik.Web.UI.ToolTipScrolling.None); . |
set_enableShadow | Sets a value indicating whether the tooltip should have a shadow. |
set_height | Sets new height to the tooltip |
set_hideDelay | Sets the delay in milliseconds before the tooltip is hidden. |
set_hideEvent | Sets on what event the tooltip should hide (see Example 4). The HideEvent property is an enum and can take the following values, which names describe the effect when they are set: Default, FromCode, LeaveTargetAndToolTip, LeaveToolTip, ManualClose. |
set_ignoreAltAttribute | Sets a value indicating whether the Alt attribute of the target should be ignored. |
set_modal | Sets whether the tooltip is displayed modally. |
set_mouseTrailing | Sets whether the tooltip should follows the mouse movement or not |
set_offsetX | Sets a new horizontal offset relative to its target element |
set_offsetY | Sets a new vertical offset relative to its target element |
set_overlay | Sets a value indicating whether the tooltip will create an overlay element. |
set_position | Sets a new relative position to the tooltip according to its target element. Requires an object of type Telerik.Web.UI.ToolTipPosition as a parameter. The possible values are TopLeft , TopCenter , TopRight , MiddleLeft , Center , MiddleRight , BottomLeft , BottomCenter , BottomRight . For example: radToolTip.set_position(Telerik.Web.UI.ToolTipPosition.BottomRight); . |
set_relativeTo | Sets whether the tooltip is positioned relative to the mouse or relative to the tooltip. Requires a parameter of type Telerik.Web.UI.ToolTipRelativeDisplay . Its possible values are Mouse , Element , BrowserWindow . For example: radToolTip.set_position(Telerik.Web.UI.ToolTipRelativeDisplay.Element); . |
set_showCallout | Sets whether the tooltip callout image will be displayed |
set_showDelay | Sets delay in milliseconds for the tooltip to appear. See Example 5. |
set_showEvent | Sets on what event the tooltip should show (see Example 6). The ShowEvent property is an enum and can take the following values, which names describe the effect when they are set: OnMouseOver, OnClick, OnRightClick, OnFocus, FromCode. |
set_targetControl | Sets a new target control to the tooltip. When showing a tooltip after changing its target on the client a small timeout is needed. See Example 7. |
set_targetControlID | Sets a new target control to the tooltip. When showing a tooltip after changing its target on the client a small timeout is needed. See Example 8. |
set_text | Sets new text to the tooltip. See Example 9. |
set_title | Sets a new title to the tooltip. See Example 10. |
set_width | Sets new width to the tooltip |
Example 1: Get the content element of a tooltip so you can access all checkboxes inside.
var tooltip = $find("RadToolTip3");
var contentElement = tooltip.get_contentElement();
var checkboxes = contentElement.getElementsByTagName("INPUT");
Example 2: Get a tooltip text.
var radToolTip = $find("<%= RadToolTip1.ClientID %>");
alert(radToolTip.get_text());
Example 3: Set the time after which a tooltip will close automatically.
var radToolTip = $find("<%= RadToolTip1.ClientID %>"); // set the auto close delay to 5 seconds
secondsradToolTip.set_autoCloseDelay(5000);
Example 4: Set the user action that will close a tooltip.
var radToolTip = $find("<%= RadToolTip1.ClientID %>");
radToolTip.set_hideEvent(Telerik.Web.UI.ToolTipHideEvent.ManualClose);
Example 5: Set the time that will pass before the user action that shows the tooltip and the actual tooltip showing.
var radToolTip = $find("<%= RadToolTip1.ClientID %>"); // set the show delay to 2 seconds
secondsradToolTip.set_showDelay(2000);
Example 6: Set the user action that will show the tooltip
var radToolTip = $find("<%= RadToolTip1.ClientID %>");
radToolTip.set_showEvent(Telerik.Web.UI.ToolTipShowEvent.FromCode); //will be shown only via an API call
Example 7: Showing a tooltip after a new target has been set.
var radToolTip = $find("<%= RadToolTip1.ClientID %>");
radToolTip.set_targetControl(txtBoxReference);
setTimeout(function ()
{
radToolTip.show();
}, 20);
Example 8: Showing a tooltip after a new target has been set.
var radToolTip = $find("<%= RadToolTip1.ClientID %>");
radToolTip.set_targetControlID("Button1");
setTimeout(function () {
radToolTip.show();
}, 20);
Example 9: Setting new text in a tooltip.
var radToolTip = $find("<%= RadToolTip1.ClientID %>");
radToolTip.set_text("This is the new tool tip text to display");
Example 10: Setting a new title to a tooltip.
var radToolTip = $find("<%= RadToolTip1.ClientID %>");
radToolTip.set_title("This is the new title");
Public Methods
Name | Description |
---|---|
clone | Creates a clone of the tooltip for another targetElement, and possibly with a different text to display. |
getManualCloseButton | Returns a reference to the DOM object of the tooltip's close button when HideEvent="ManualClose". |
hide | Hides the tooltip. See Example 11. |
isVisible | Returns whether the tooltip control is currently visible. See Example 12. |
isModal | Returns whether the tooltip control is displaying modally. |
show | Displays the tooltip at the proper position, relative to its target control. See Example 13. If the target of the tooltip has been changed with JavaScript, a small timeout is needed prior to calling show() (see Example 14). |
showLoadingMessage | Displays the loading message. |
updateLocation | Calculates the tooltip position according to its targets and repositions the tooltip accordingly. |
For a live demo see Client Side API.
Example 11: Hiding a tooltip.
var radToolTip = $find("<%= RadToolTip1.ClientID %>");
if (radToolTip.isVisible())
{
radToolTip.hide();
}
Example 12: Showing a tooltip with a new text.
var radToolTip = $find("<%= RadToolTip1.ClientID %>");
radToolTip.set_text("This is the new tool tip text to display");
if (!radToolTip.isVisible())
{
radToolTip.show();
}
Example 13: Show a tooltip.
var radToolTip = $find("<%= RadToolTip1.ClientID %>");
radToolTip.set_text("This is the new tool tip text to display");
radToolTip.show();
Example 14: Show a tooltip after its target has been changed.
var radToolTip = $find("<%= RadToolTip1.ClientID %>");
radToolTip.set_targetControlID("Button1");
setTimeout(function () {
radToolTip.show();
}, 20);
RadToolTip's static methods
Name | Description |
---|---|
getCurrent | Gets a reference to the tooltip element that is currently open. See Example 15. |
Example 15: Getting the currently shown tooltip, if any.
var activeToolTip = Telerik.Web.UI.RadToolTip.getCurrent();