jQWidgets Forums

jQuery UI Widgets › Forums › Dialogs and Notifications › Tooltip, Notification, Popover › Changing Tooltip Breaks Button

Tagged: 

This topic contains 2 replies, has 2 voices, and was last updated by  tapickens 12 years ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Changing Tooltip Breaks Button Posts
  • April 26, 2013 at 8:02 pm Changing Tooltip Breaks Button #20109

    tapickens
    Member

    Hello,

    I’m wanting to dynamically change a tooltip on a button when that button is clicked, but for some reason it seems that modifying the content of the tooltip for the button breaks the button. I have also tried to destroy and recreate the tooltip but that doesn’t work either. As an example, you can add:

    $("#jqxSubmitButton").jqxTooltip({
    	content: "Original",
    	position: 'mouse',
    	autoHide: false,
    	width: 300,
    	name: 'monitorTooltip',
    	theme: theme
    });
    $("#jqxSubmitButton").jqxTooltip({content:"Changed"});

    After creating the button on the defaultfunctionality.htm demo for jqxButton. The button still depresses but it doesn’t register click events and the hover does not work.

    April 27, 2013 at 8:46 am Changing Tooltip Breaks Button #20124

    Peter Stoev
    Keymaster

    Hi,

    I am unable to reproduce the reported behavior with jQWidgets 2.8.1. In case you use other version, then please consider upgrading to the latest.

    The following is the test sample which works on my side. The Tooltip’s content is changed dynamically.

    <!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>
        <script type="text/javascript" src="../../scripts/gettheme.js"></script>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.8.3.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/jqxtooltip.js"></script>
    </head>
    <body class='default'>
        <div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {
                    var theme = getDemoTheme();
                    // Create jqxButton widgets.
                    $("#jqxButton").jqxButton({ width: '150', theme: theme });
                    $("#jqxSubmitButton").jqxButton({ width: '150', theme: theme });
                    $("#jqxDisabledButton").jqxButton({ disabled: true, width: '150', theme: theme });
                    $("#jqxSubmitButton").jqxTooltip({
                        content: "Original",
                        position: 'mouse',
                        autoHide: false,
                        width: 300,
                        name: 'monitorTooltip',
                        theme: theme
                    });
                    // Subscribe to Click events.
                    $("#jqxButton").on('click', function () {
                        $("#events").find('span').remove();
                        $("#events").append('<span>Button Clicked</span');
                    });
                    $("#jqxSubmitButton").on('click', function () {
                        $("#jqxSubmitButton").jqxTooltip({ content: "Changed" });
                        $("#events").find('span').remove();
                        $("#events").append('<span>Submit Button Clicked</span');
                    });
                });
            </script>
            <div style='width: 150px;' id='jqxWidget'>
                <div>
                    <input type="button" value="Button" id='jqxButton' />
                </div>
                <div>
                    <input style='margin-top: 20px;' type="submit" value="Submit" id='jqxSubmitButton' />
                </div>
                <div>
                    <input style='margin-top: 20px;' type="Button" value="Disabled" id='jqxDisabledButton' />
                </div>
                <div style='font-size: 12px; font-family: Verdana; margin-top: 10px;'>
                    <div>Events:</div>
                    <div id='events'>
                    </div>
                </div>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

    April 29, 2013 at 2:22 pm Changing Tooltip Breaks Button #20240

    tapickens
    Member

    I was on jqwidgets 2.5, but after upgrading to 2.8.2, it solved the issue, thanks!

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

You must be logged in to reply to this topic.