April 20, 2021

Software Mile.com

Latest Software News and Hacks

JavaScript custom tooltip of Grid not visible within viewport

I have created a custom tooltip for my radgrid because I have a requirement to display 5000 character in tooltip.

I have done with all my requirement, but got stuck when I mouseover the last row of the grid it displays tooltip below the viewport, unable to view complete tooltip. My code is below. How can I adjust those tooltip to display within viewport only?

<radG:GridTemplateColumn DataField="Remarks" HeaderText="Update / Remark" UniqueName="UpdateRemarks">
                            <ItemTemplate>
                                <asp:Label ID="lblRemarks" runat="server" CssClass="tooltip" Text='<%#Eval("Remarks")%>'
                                    ToolTip='<%#Eval("FullRemarks")%>' onmouseover="showTooltip(this)"
                                    onmouseout="hideTooltip(this)"></asp:Label>

                            </ItemTemplate>
                            <HeaderStyle Width="200px" />
                            <ItemStyle CssClass="wraptext" />
                        </radG:GridTemplateColumn>

For JavaScript functions:

function showTooltip(control) {
    var ttext = control.title;
    var tt = document.createElement('SPAN');
    var tnode = document.createTextNode(ttext);
    tt.appendChild(tnode);
    control.parentNode.insertBefore(tt, control.nextSibling);
    tt.className = "tooltipCss";
    control.title = "";
}
function hideTooltip(control) {
    var ttext = control.nextSibling.childNodes[0].nodeValue;
    control.parentNode.removeChild(control.nextSibling);
    control.title = ttext;
}

and for CSS:

 .tooltipCss
{
    position: absolute;
    border: 1px solid gray;
    margin1: 1em;
    padding: 1px;
    background: white;
    font-family: Arial;
    font-weight: normal;
    color: blue;
    font-size: 9px;
    /*width: 400px;
    max-height: 250px;
    overflow-y: scroll;*/
    text-wrap: normal;
    border-radius: 2px 2px 2px 2px;
}


Go to Source of this post
Author Of this post: Nadeem Shaikh
Title Of post: JavaScript custom tooltip of Grid not visible within viewport
Author Link: {authorlink}