What I want: I have a gridview, if user hoverover col#4, than I want to show div (custom tooltip). if user hover out side of col#4 than hide div
Issue: How can I style so that ToolTipPanel shows up on top of col#4? so that it looks more of a tooltip rather than some random div ontop of file. Note gridview & col size can change depending on screensize or data size
Html - I have a panel which I am using as Custom ToolTip and a gridview
<asp:Panel ID="ToolTipPanel" class="ToolTipPanelC">
<div style="border:1px solid black; background:color:yellow;">
<p>Executive/Management Defendant, Owner Defendant</p>
</div>
</asp:Panel>
<asp:GridView ...>
...
<asp:TemplateField HeaderText="col4" SortExpression="col4">
<ItemTemplate>
<asp:Label ID="col4S" runat="server" Text='<%# Eval("col4") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
...
</asp:GridView>
Back-end Code - here call js functions
Protected Sub OnRowDataBound(sender As Object, e As GridViewRowEventArgs)
If e.Row.RowType = DataControlRowType.Header Then
e.Row.Cells(4).Attributes("onmouseover") = "javascript:showToolTip();"
e.Row.Cells(4).Attributes("onmouseout") = "javascript:hideToolTip();"
End If
End Sub
Javascript Hide or show div
<script type="text/javascript">
function showToolTip() {
var x = document.getElementById("ToolTipPanel");
x.style.display = "block";
}
function hideToolTip() {
var x = document.getElementById("ToolTipPanel");
x.style.display = "none";
}
</script>
Via Active questions tagged javascript - Stack Overflow https://ift.tt/2qp0xyK
Comments
Post a Comment