jQWidgets Forums

jQuery UI Widgets › Forums › Dialogs and Notifications › Tooltip, Notification, Popover › Tooltip DOM removal

Tagged: 

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Tooltip DOM removal Posts
  • July 24, 2013 at 12:21 pm Tooltip DOM removal #25671

    jqWizard
    Participant

    Hi!

    I’ve noticed that jqxtooltip DOM element (look html below) is added each time with different id (jqxtooltip + some random number) to the DOM structure whenever I apply jqxTooltip multiple times to the same HTML element. Is this a bug? I think it would be better to use the existing tooltip and not add the new one to the DOM structure each time.

    <div id="jqxtooltip667e5986" class="jqx-tooltip jqx-popup" style="visibility: hidden; display: none; opacity: 0; z-index: 9999; width: auto; height: auto; top: 611px; left: 574px;"><div id="jqxtooltip667e5986Main" class="jqx-widget jqx-fill-state-normal jqx-tooltip-main"><div id="jqxtooltip667e5986Text" class="jqx-widget jqx-fill-state-normal jqx-tooltip-text">some text</div></div><div id="jqxtooltip667e5986Arrow" class="jqx-widget jqx-fill-state-normal jqx-tooltip-arrow jqx-tooltip-arrow-t-b" style="border-width: 5px 5px 0px; top: 48px; left: 72px;"></div></div>

    Workaround for removing the tooltip before it is applied:
    $(‘.jqx-tooltip’).remove();

    July 24, 2013 at 8:54 pm Tooltip DOM removal #25706

    Peter Stoev
    Keymaster

    Hi jqWizard,

    jqxTooltip works as it is designed and is created when it is necessary to be according to its internal logic. To remove a Tooltip from the DOM, use its API method called ‘destroy’.

    Best Regards,
    Peter Stoev

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

    July 25, 2013 at 7:07 am Tooltip DOM removal #25714

    jqWizard
    Participant

    ‘destroy’ method is not working. It does not remove “<div id='jqxtooltip667e5986' …" from DOM structure.

    July 25, 2013 at 11:39 am Tooltip DOM removal #25722

    Peter Stoev
    Keymaster

    Hi jqWizard,

    Please, provide a sample which demonstrates your scenario. The following code with “destroy” method works as expected with the current version – 2.9.3:

    <!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" type="text/css" href="../../jqwidgets/styles/jqx.base.css" />
        <script type="text/javascript" src="../../scripts/jquery-1.10.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="../../scripts/gettheme.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#filmPicture1").jqxTooltip({ content: '<b>Title:</b> <i>The Amazing Spider-man</i><br /><b>Year:</b> 2012', position: 'mouse', name: 'movieTooltip' });
                $("#Button").click(function () {
                    $("#filmPicture1").jqxTooltip('destroy');
                });
            });
        </script>
    </head>
    <body>
        <div style="width: 400px;" id="container">
            <img style="margin: 8px;" src="../../images/The_Amazng_Spider_Man.jpeg" id="filmPicture1" />
        </div>
        <input value="Destroy" type="button" id="Button" />
    </body>
    </html>

    Best Regards,
    Peter Stoev

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

    July 28, 2013 at 9:08 am Tooltip DOM removal #25849

    jqWizard
    Participant

    I’ve found a bug in my code. Tooltip is working as expected. Thank you for your help.

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

You must be logged in to reply to this topic.