使用 qTip2 确认工具提示对话框？答案

【问题标题】：Confirm tooltip dialog with qTip2?使用 qTip2 确认工具提示对话框？
【发布时间】：2011-05-23 09:38:03
【问题描述】：

所以，当用户单击删除按钮时，我正在尝试创建一个小的确认对话框（内联、topltip）。

我想它看起来有点像这样

（但带有小文本和确定和取消按钮）。 但我不是来问如何设置样式的。

我更喜欢使用 qTip2 作为该工作的插件，但如果你有更好的选择，我也会选择它。

那么，我将如何启动带有一些交互元素的工具提示，并且只有在失去焦点或单击关闭按钮时才关闭它。另外 - 删除按钮由 Ajax 加载。 p>

有什么想法吗？

谢谢你，和平！

【问题讨论】：

标签： jquery jquery-ui dialog tooltip qtip2

【解决方案1】：

qTip2 很容易做到。我会给你一个开始，看看我的 DEMO

结果

HTML

<button id="gear">Gear</button>
<div style="display:none;" id="menu">
    <div class="menuitem">Rename</div><br>
    <div class="menuitem">Duplicate</div><br>
    <div class="menuitem">Delete</div><br>
</div>

CSS

#gear {
    margin:100px;
}
.menuitem {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 9px;
    margin-bottom: 3px;
    width: 75px;
}

JavaScript

$(function() {
    $("#gear").button({
        icons: {
            primary: "ui-icon-gear",
            secondary: "ui-icon-triangle-1-s"
        },
        text: false
    }).qtip({
        content: {
            text: $('#menu')
        },
        show: {
            event: 'click',
            solo: true,
            modal: true
        },
        style: {
            classes: 'ui-tooltip-dark ui-tooltip-shadow'
        },
        position: {
            my: 'top center',
            at: 'bottom center',
        }
    });
    $(".menuitem").button().click(function(){
        alert($(this).text());
    });
});

为了更好地适应您的需求，请阅读qTip2 Documentation 和jQuery UI Documentation。

【讨论】：