All geek questions in one place

JQuery dynamic qtip shows a div, but slower and slower with every tip

I am using jQuery qTip plugin to display divs for mouseover link / img. I wrote 2 use cases, but both of them cause problems.

V1: the first version shows a tooltip, only the second time I move the mouse over the link. After repeating the mouse over the link, the script seems to get slower and slower, and after 6/7 times my browser almost crashes ... What is the problem?

V2: in my second version, I try to use qTip in the usual way, but I try to put the contents of the linked div into the contents of qTip, but this does not happen. Perhaps the qTip plugin does not accept functions inside the configuration, right?

Can you look at these 2 scripts and tell me what I'm doing wrong? I don't understand anymore.

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Project</title>
    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="js/jquery.qtip-1.0.0-rc3.min.js" type="text/javascript"></script> <!-- http://craigsworks.com/projects/qtip/ -->

    <SCRIPT LANGUAGE="JavaScript">
    jQuery(document).ready(function() {

        // hide all tooltip div's
        $(".tooltip_request").hide();


        // V1 - show qtip layer - THIS ONE GETS VERY SLOW AFTER MOUSEOVER-ING several times??
        $(".editrequest_v1").live('mouseover', function() {
            var request = $(this).attr('id'); // "request1"
            var name_tipdiv = "tooltip"+request;
            var div_content = $("#"+name_tipdiv).html();

            $(this).qtip({
                content: div_content,
                style: 'light',
            });
        });

        // V2 - show qtip layer - this one is not getting slow, but does not show the content
        $(".editrequest_v2").qtip({
            content: function() {
                var request = $(this).attr('id'); // "request1"
                var name_tipdiv = "tooltip"+request;
                var div_content = $("#"+name_tipdiv).html();
                return div_content;
            },
            style: 'light',
        });
    });
    </SCRIPT>
</head>
<body>

    <a href="#" class="editrequest_v1" id="request1">Show tooltip v1/content 1 - get slow and needs 2 times a mouseover before shows tooltip</a><br>
    <a href="#" class="editrequest_v1" id="request2">Show tooltip v1/content 2 -get slow and needs 2 times a mouseover before shows toolti</a>
    <div class="tooltip_request" id="tooltiprequest1">CONTENT Tooltip 1</div>
    <div class="tooltip_request" id="tooltiprequest2">CONTENT Tooltip 2</div><br><br>

    <a href="#" class="editrequest_v2" id="request3">Show tooltip v2/content 3 - does not show content in tip</a><br>
    <a href="#" class="editrequest_v2" id="request4">Show tooltip v2/content 4 - does not show content in tip</a>
    <div class="tooltip_request" id="tooltiprequest3">CONTENT Tooltip 3</div>
    <div class="tooltip_request" id="tooltiprequest4">CONTENT Tooltip 4</div><br><br>

</body>
</html>

!

P.S. jQuery - 4 : -)

+3
2

$(".editrequest_v2").each(
  function(){
    $(this).qtip({
      content: $("#tooltip"+$(this).attr('id')).html(),
      style: 'light',
    });
  });

, .

, , .

+4

bind live. live, , AJAX.

+1

Source: https://habr.com/ru/post/1729913/

More articles:


All Articles