jQuery UI Widgets › Forums › Dialogs and Notifications › Tooltip, Notification, Popover › Conditional tooltip

Tagged: , , , , ,

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Conditional tooltip Posts
  • January 7, 2015 at 3:53 am 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.

    January 7, 2015 at 6:29 am 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/

    January 7, 2015 at 11:16 am Conditional tooltip #65063

    pete
    Participant

    Thanks Dimitar – that works well.

    Regards,
    Peter.

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

You must be logged in to reply to this topic.