jQuery UI Widgets › Forums › Dialogs and Notifications › Window › Window with Tooltip Icon

Tagged: , ,

This topic contains 1 reply, has 2 voices, and was last updated by  milen 12 years, 2 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Window with Tooltip Icon Posts
  • July 18, 2012 at 8:07 am Window with Tooltip Icon #6094

    binfch
    Participant

    Hi there

    A small issue where I am unable to find a solution for.

    Here a test page -> When changing the window’s title the tooltip icon gets erased. How can I avoid that?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
        <link rel="stylesheet" href="jqwidgets/styles/jqx.classic.css" type="text/css" />
        <style type="text/css">
            .windowTitle {
              float: left;
            }
            .windowInfoIcon {
              position: absolute; 
              right: 5px;
            }
        </style>
        <script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxdocking.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxwindow.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxtooltip.js"></script>   
    </head>
    <body>
        <div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {
                    var theme = 'classic';
                    $('#chartDockingContainer').jqxDocking({ 
                        theme: theme,
                        windowsOffset: 0
                    });
                    $('#chartDockingContainer').jqxDocking('hideAllCloseButtons');
                    $('#chartDockingContainer').jqxDocking('hideAllCollapseButtons');
                    $('#chartDockingContainer').jqxDocking('pinWindow', 'chartWindow');
                    $('#chartWindow').jqxWindow({
                    	height: '150',
                    	width: '400',
                        resizable: false,
                        draggable: false,
                        showCloseButton: false
                    });
                    $("#chartTooltip").jqxTooltip({
                        width: '250',
                        theme: theme,
                        showHtml: true
                    });
                    var element = $('#chartIcon');
                    $("#chartTooltip").jqxTooltip('add', element, '<div style="text-align:left;"><b>Test Chart</b></br></div>');
                    
                    $("#testButton").jqxButton({
                        width: '250',
                        height: '20',
                        theme: theme
                    });
                    $("#testButton").bind('click', function () {
                        $('#chartWindow').jqxWindow('setTitle', 'New Title (Problem -> Tooltip Icon disappeared)');
                    });
                });
            </script>
            <div id='chartDockingContainer'>
                <div id='panel0'>
                    <div id='chartWindow'>
                        <div>
                            <span class='windowTitle'>Test Chart</span>
                            <img id='chartIcon' class='windowInfoIcon' src='img/info.gif' width='16' height='16'/>
                            <div id='chartTooltip'></div>
                        </div>
                        <div>              
                            <div id='testChart'></div>
                        </div>
                    </div>
                </div>
            </div>
            <div id='testButton'>Change window title</div>
        </div>
    </body>
    </html>

    Thanks & cheers,
    Peter

    July 19, 2012 at 4:41 am Window with Tooltip Icon #6126

    milen
    Participant

    Hi Peter,

    The jqxWindow’s ‘setTitle’ method sets the HTML or Text to be displayed in the window’s header. Setting it to a string will erase your previous content. In your scenario, I think that it’s better to select your ‘windowTitle’ span element and invoke the jQuery’s text() method with the new title string.

    Best Regards,
    Milen Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.