Question

我有一个包含许多工具提示的页面。我想在单击按钮时单独显示/隐藏每个人。它对我不起作用，任何人都可以帮忙吗？

<span><input type="button" value="b1" onClick="showMyTT('div1');"></span><span><div id="div1"></div></span>
<span><input type="button" value="b2" onClick="showMyTT('div2');"></span><span><div id="div2"></div></span>
<span><input type="button" value="b3" onClick="showMyTT('div3');"></span><span><div id="div3"></div></span>

function showMyTT(id) { 
    $('#'+id).qtip({
        content: {
            text: 'Show the content', 
            title: false
        },
        position: {
            my: 'left center', 
            at: 'left center' 
        },
        show: {
            event: false, 
            ready: true 
        },
        hide: false, 
        style: {
            classes: 'ui-tooltip-shadow ui-tooltip-jtools'
        }
    }); 
}

谢谢

Answer 1

此showMyTT函数初始化您的工具提示。在为所有id（初始化）运行此函数后，您应该执行以下操作：

HTML 的

<input type="button" value="b1" onClick="toggleQtip('div1');" />

的JavaScript

function toggleQtip(id) {
    var div = $('#'+id);
    if (div.data('visible')) {
        div.qtip('hide');
        div.data('visible', false);
    } else {       
        div.qtip('show');
        div.data('visible', true);
    }
}

修改

以下是如何初始化qtip（至少一种可能性）。将自定义类添加到您想拥有qtip的所有div，例如qtiped：

HTML 的

<div id="div1" class="qtiped">TEST</div> <input type="button" value="b1" onClick="toggleQtip('div1');" />

然后运行以下代码：

的JavaScript

$(document).ready(function() { $('.qtiped').each(function() { showMyTT( $(this).attr('id') ); }); });

此外，在showMyTT内进行以下更改：show: false以避免自动加载（我们希望初始化工具提示，而不是显示它们）。

q点击显示/隐藏工具提示

1 个答案: