Hello,
I have a radgrid with a column of thumbnail images (unique per row), and I would like to add a tooltip with the full-size image that shows and hides when the mouse is above the thumbnail.
this can all be done on the client since the thumbnail images are named similarly to the full-size images. So far I have the following code:
my tooltip manager markup:
the itemtemplate of the gridtemplatecolumn in the radgrid
the relevant javascript code:
The result doesn't work the way it should... it is very peculiar.
the tooltips tend to show up at like one of three or so places (ie to the "middleRight" of say Row 1, row 4, and row 5)
all of the tooltips show up and display the correct content when hovered over the corresponding target, however where the tooltip is positioned seems almost random.
this is becoming a problem for the usability of the interface, because the tooltip is rendered on top of it's own target, and thus it closes and reopens with every mouse movement (since the mouseout event is fired when the tooltip element is on top of the target element).
I have tried everything i can think of, but it does not seem to cooperate. any help would be much appreciated!
I have a radgrid with a column of thumbnail images (unique per row), and I would like to add a tooltip with the full-size image that shows and hides when the mouse is above the thumbnail.
this can all be done on the client since the thumbnail images are named similarly to the full-size images. So far I have the following code:
my tooltip manager markup:
<
telerik:RadToolTipManager
ID
=
"slideToolTipMan"
runat
=
"server"
OffsetY
=
"-1"
ShowEvent
=
"FromCode"
OnClientBeforeShow
=
"OnClientBeforeShow"
EnableShadow
=
"true"
Sticky
=
"false"
RelativeTo
=
"Mouse"
Position
=
"MiddleRight"
>
</
telerik:RadToolTipManager
>
the itemtemplate of the gridtemplatecolumn in the radgrid
<
ItemTemplate
>
<
img
onmouseout
=
'HideSlideToolTip(this);'
onmouseover
=
'ShowSlideToolTip(this);'
id
=
"thumbnailImg"
alt
=
"X"
src
=
'...'
/>
</
ItemTemplate
>
the relevant javascript code:
function
ShowSlideToolTip(element) {
var
tooltipManager = $find(
"<%= slideToolTipMan.ClientID %>"
);
if
(!tooltipManager)
return
;
var
tooltip = tooltipManager.getToolTipByElement(element);
if
(!tooltip) {
tooltip = tooltipManager.createToolTip(element);
tooltip.set_position(Telerik.Web.UI.ToolTipPosition.MiddleRight);
// <here I insert content into the tooltip>
tooltip.show();
tooltip.set_autoCloseDelay(0);
tooltip.set_contentElement(imgElement);
}
tooltip.set_position(Telerik.Web.UI.ToolTipPosition.MiddleRight);
}
function
OnClientBeforeShow(sender, args) {
sender.set_position(Telerik.Web.UI.ToolTipPosition.MiddleRight);
}
function
HideSlideToolTip(element) {
var
controller = Telerik.Web.UI.RadToolTipController.getInstance();
var
tooltip = controller.get_activeToolTip();
if
(tooltip) tooltip.hide();
}
The result doesn't work the way it should... it is very peculiar.
the tooltips tend to show up at like one of three or so places (ie to the "middleRight" of say Row 1, row 4, and row 5)
all of the tooltips show up and display the correct content when hovered over the corresponding target, however where the tooltip is positioned seems almost random.
this is becoming a problem for the usability of the interface, because the tooltip is rendered on top of it's own target, and thus it closes and reopens with every mouse movement (since the mouseout event is fired when the tooltip element is on top of the target element).
I have tried everything i can think of, but it does not seem to cooperate. any help would be much appreciated!