problem with jQuery image tooltip scripts

  • Hi,
    I’m trying to implement an image tooltip effect onto a menu.
    I’m trying with this:
    https://demos.blufusion.net/jquery-tooltips

    I really don’t understand why on a stand-alone demo file on my pc everything goes well and when I try to move the same code into my WP website nothing works.

    It seems that the script is not executed because – when I hover the link a want to tooltip – in Firebug I only see:
    <span class=”tooltip-style2″>
    instead of:
    <span class=”tooltip-style2″ style=”display: none; top: 13px; left: 160px;”>

    I checked again and again and I think everything is all right:

    1) I embedded in to the head the jquery script (the same version of the demo) and I excluded other versions to avoid conflicts.
    <script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script&gt;

    2) I embedded into the head the tooltip script:
    <script type=”text/javascript”>
    $(document).ready(function() {
    $(“.tooltips”).hover(
    function() { $(this).contents(“span:last-child”).css({ display: “block” }); },
    function() { $(this).contents(“span:last-child”).css({ display: “none” }); }
    );
    $(“.tooltips”).mousemove(function(e) {
    var mousex = e.pageX + 10;
    var mousey = e.pageY + 5;
    $(this).contents(“span:last-child”).css({ top: mousey, left: mousex });
    });
    });
    </script>

    3) I included into the .css file the code required.

    I’m working on a thematic child theme I’m building, so I did all the embedding through functions into functions.php and everything seems ok looking at the resulting code.

    Can anyone help me? I’m going crazy.
    I tryed with other scripts but many of them aren’t suitable with my needs and with another one which could be ok (https://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery) I’m facing the same problem.

    Thanks,
    andrea

Viewing 4 replies - 1 through 4 (of 4 total)

  • https://codex.www.ads-software.com/Using_Javascript

    Thread Starter jjcorradi

    (@jjcorradi)

    thks, I’ll check carefully.
    anyway my situation is pretty simple: the script is embedded in the head section, that’s all.
    I worked this way many other times without problems.
    I’m afraid there’s somethjing to change in the script code, but I’m not so skilled.

    Thread Starter jjcorradi

    (@jjcorradi)

    Got it!
    The loading of jquery Superfish plugin, automatically included in thematic, for some reason conflicts with my tooltip scripts.
    Excluding it with the
    childtheme_override_head_scripts()
    function it works!

    Happyness :)))

    Thread Starter jjcorradi

    (@jjcorradi)

    correction, now I understood completely.
    the problem is not the superfish javascript, the keypoint is:

    In “no-confict” mode, the $ shortcut is not available and the longer jQuery is used.

    Since the jquery automatically loaded by WP is in “no-confict” mode I must swap the “$” with “jQuery” in my script.

    This way works perfectly with the last autoloaded versione of jquery even with the superfish enabled.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘problem with jQuery image tooltip scripts’ is closed to new replies.