点击提示显示/隐藏工具提示 [英] qTip show/hide tooltip on click

问题描述

我的页面上有很多工具提示.我想分别显示/隐藏每个按钮.它对我不起作用，任何人都可以帮忙吗?

I have a page with many tooltips. I want to show/hide every one seperatly on clicking a button. It does not work for me, can anyone help?

<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'
        }
    }); 
}

谢谢

推荐答案

此showMyTT函数初始化您的工具提示.对所有ID运行此函数(初始化)后，您应该执行以下操作:

This showMyTT function initializes your tooltips. After running this function for all ids (initialization) you should do something like this:

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:

Here's how you can initialize qtip (at least one possibility). Add custom class to all divs you'd like to have a qtip, for example 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为了避免自动加载(我们要初始化工具提示，而不是显示它们).

Also, inside showMyTT do the following change: show: false in order to avoid autoloading (we want to initialize tooltips, not show them).

这篇关于点击提示显示/隐藏工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！