jQWidgets Forums

This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 12 years, 2 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

ToolTip in Modal jqxWindow Posts

February 14, 2013 at 6:57 pm ToolTip in Modal jqxWindow #15258

Member

When I attach a jqxTooltip to an element that’s inside a modal jqxWindow (isModal: true), the tooltip displays behind the modal window. When the jqxWindow’s isModal property is false, the tooltip displays just fine inside the window. I’ve tried setting the z-index of the tooltip to a very high value, but it’s still displayed behind the modal window.

February 14, 2013 at 10:45 pm ToolTip in Modal jqxWindow #15264

Peter Stoev

Keymaster

Hi bpsilver,

The modal window’s z-Index is 18001 in jQWidgets 2.7. To make the tooltip appear above the window, you should use a higher z-index than that.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

February 15, 2013 at 4:28 pm ToolTip in Modal jqxWindow #15315

bpsilver

Member

Peter,

I’ve tried to set the z-order as high as 99999, but it still shows underneath the modal window. I can reproduce this on jqWidgets 2.6 & 2.7. Here’s a simple test page:

<!DOCTYPE html>
<html>
<head>
    <title>ToolTip Tester</title>
    <link href="/jqwidgets/styles/jqx.base.css" rel="stylesheet" type="text/css" />
    <link href="/jqwidgets/styles/jqx.classic.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="/jqwidgets/jqxcore.js" type="text/javascript"></script>
    <script type="text/javascript" src="/jqwidgets/jqx-all.js"></script>
    <script type="text/javascript" src="/jqwidgets/globalization/jquery.global.js"></script>
    <script>
        $(function () {
            var $popup;
            $('#testlink').click(function (e) {
                e.preventDefault();
                if (!$popup) {
                    $popup = $('#popup').jqxWindow({ width: 300, height: 250, theme: 'classic', isModal: true });
                } else {
                    $popup.jqxWindow('open');
                }
                var $tt = $('#popupcontent').jqxTooltip({ content: "test tooltip", position: 'top', autoHide: false });
                $tt.css("z-index", 25000);
        });
    </script>
</head>
<body>
<h2>tooltip.cshtml</h2>
<p>
<a id='testlink' href="#">Test Link</a>
</p>
<div id="popup" style="">
    <div>Header</div>
    <div id="popupcontent" style="height: 30px; margin-top: 60px; border: 1px solid green"><p>here is some content in the modal</p></div>
</div>
</body>
</html>

February 18, 2013 at 7:17 am ToolTip in Modal jqxWindow #15386

Peter Stoev

Keymaster

Hi bpsilver,

The provided code does not set the z-index of the tooltip. To set the z-index of the tooltip, you should do the following:

  $(".jqx-tooltip").css("z-index", 99999);

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.