This topic contains 2 replies, has 2 voices, and was last updated by  pete 9 years, 4 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Conditional tooltip #65036

    pete
    Participant

    How do I do a conditional tooltip where it either shows or it doesn’t based on a condition.
    – I’ve tried putting the condition in the content property and returning a blank string. JQueryUI does it this way but doesn’t work for jqxtooltip as the content seems to be only read once and not dynamically.
    – I’ve tried the opening event and blanking out the content on the condition but that still shows an empty tooltip. Executing a close method in the event still shows the tooltip.

    Any other ideas?

    Regards,
    Peter.

    Conditional tooltip #65040

    Dimitar
    Participant

    Hello Peter,

    Here is how to achieve your requirement:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="Stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#jqxbutton").jqxButton({ width: 100, height: 30 });
                $("#jqxCheckBox").jqxCheckBox({ width: 120, height: 25 });
                $("#jqxbutton").jqxTooltip({ position: 'top', content: 'This is a jqxButton.', trigger: 'none' });
    
                var tooltipShown = false;
                $("#jqxbutton").mouseenter(function () {
                    var condition = $("#jqxCheckBox").val();
                    if (condition === true) {
                        $("#jqxbutton").jqxTooltip("open");
                        tooltipShown = true;
                    }
                });
                $("#jqxbutton").mouseleave(function () {
                    if (tooltipShown === true) {
                        $("#jqxbutton").jqxTooltip("close");
                    }
                });
    
                $('#jqxbutton').bind('close', function () {
                    tooltipShown = false;
                });
            });
        </script>
    </head>
    <body>
        <div>
            If the checkbox is checked, a tooltip will appear over the button when you hover
            it.</div>
        <input type="button" style="margin: 50px;" id="jqxbutton" value="Button" />
        <br />
        <div id="jqxCheckBox">
            Condition</div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    Conditional tooltip #65063

    pete
    Participant

    Thanks Dimitar – that works well.

    Regards,
    Peter.

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

You must be logged in to reply to this topic.