简体   繁体   English

qtip2设置属性,但在打开jquery时不显示。(鼠标悬停)

[英]qtip2 sets attributes but doesn't show with jquery on.(mouseover)

This is the code I use to show the qtips: 这是我用来显示qtips的代码:

$(document).on('mouseover', '.sktooltip', function(event) {
    // Bind the qTip within the event handler
    $(this).qtip({
        overwrite: false, // Make sure the tooltip won't be overridden once created
        content: 'ToolTip!',
        target: 'mouse',
        show: {
            event: event.type, // Use the same show event as the one that triggered the event handler
            ready: true // Show the tooltip as soon as it's bound, vital so it shows up the first time you hover!
        }
    }, event); // Pass through our original event to qTip
})

// Store our title attribute in 'oldtitle' attribute instead
.each(function(i) {
    $.attr(this, 'oldtitle', $.attr(this, 'title'));
    this.removeAttribute('title');
});

It's basically the same as the one in the docs. 它基本上与文档中的相同。

Now, the relevant HTML before I hover over it: 现在,在将鼠标悬停在其上之前,相关的HTML:

<div class="service-block msr">
    <a target="_blank" href="http://google.de">
    <div class="service-image msrc">
        <img rel="254" data-original="123.png" class="sktooltip" src="123.png" style="display: inline;">
    </div></a>
    <h4><a target="_blank" href="http://google.de">Google</a></h4>
    <p>Search Engine</p>
</div>

And after: 之后:

<div class="service-block msr">
    <a target="_blank" href="http://google.de">
    <div class="service-image msrc">
        <img rel="254" data-original="123.png" class="sktooltip" src="123.png" style="display: inline;" data-hasqtip="0" aria-describedby="qtip-0">
    </div></a>
    <h4><a target="_blank" href="http://google.de">Google</a></h4>
    <p>Search engine</p>
</div>

As you can see, qtip inserts its attributes in the element but I can't see the the tooltip. 如您所见,qtip将其属性插入到元素中,但我看不到工具提示。 What am I missing? 我想念什么?

Edit: It does work here but not on my website: http://jsfiddle.net/Dayjay/738nX/ 编辑:它确实在这里工作,但不在我的网站上: http : //jsfiddle.net/Dayjay/738nX/

It works now! 现在可以使用! I used jquery.isotope which implements an older version of the imagesLoaded plugin, which caused problems with qTip2 . 我使用的jquery.isotope实现了imagesLoaded插件的旧版本,这导致qTip2出现问题。 To solve this, simply include the latest imagesLoaded script after the isotope script. 要解决此问题,只需在同位素脚本之后添加最新的imagesLoaded脚本即可。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM