Question

我想在qTip工具提示上设置一个关闭按钮 - 我有以下内容：

 <script type="text/javascript">
        $(document).ready(function () {

            //****** tooltips **********
            $('img.help').hover(function () {

          // Destroy currrent tooltip if present
          if ($(this).data("qtip")) $(this).qtip("destroy");

          $(this) // Set the links HTML to the current opposite corner
            .qtip({
                content: 
                {
                    text: 'this is the tooltip, better to use the alt attribute of the image or use html div content somewhere on the page', 
                        title: {
                        text: 'This toolip title',
                        button: true
                        }
                },
                position: {
                    corner: {
                        tooltip: 'bottomLeft', // Use the corner...
                        target: 'topRight' // ...and opposite corner
                    }
                },
                show: {
                    solo: true,
                    when: false, // Don't specify a show event
                    ready: true // Show the tooltip when ready
                },
                hide: false, // Don't specify a hide event
                style: {
                    border: {
                        width: 5,
                        radius: 10
                    },
                    padding: 10,
                    textAlign: 'left',
                    tip: true, // Give it a speech bubble tip with automatic corner detection
                    name: 'blue' // Style it according to the preset 'cream' style
                    // name: 'light' // Style it according to the preset 'cream' style
                }
            });


      });

然而，我没有关闭按钮。是否应该在我的图像文件夹中创建一个图像或创建一个样式来执行此操作？ All I see in the documentation here表示按钮：true。我尝试过按钮：'关闭'并创建一个“关闭”超链接，因为它应该 - 只是无法获得近距离图像变化。关于我在这里可能缺少的任何想法？

Answer 1

这是我的解决方案，当我点击按钮

时，我想要一个java动作来关闭qtip

    <input type="button" name="calendar_main_delete" class="calendar_main_delete"  id="calendar_main_delete" value="Delete Event" />
              <input type="button" onClick="parent.location='#edit'" value="Edit Event" />



       <script type="text/javascript">

//click button call from button above
$('.calendar_main_delete').click(function() {

//.qtip is my qtip element from the parent page and then I hide it.
$('.qtip', window.parent.document).qtip("hide");
});
</script>

Answer 2

qTip 2有一个关闭按钮选项。添加选项按钮靠近内容，这将添加关闭按钮。可以使用css完成定位。以下代码段将帮助您入门。

$item.qtip({
    overwrite: true,
    content: {
        text: content,
        button: 'Close'
    }
});

如果您需要更多相关信息，请参阅： http://qtip2.com/options。在页面上查找“content.button”。

Answer 3

我不确定这是不是您要找的，但是我可以看到演示页面上的关闭按钮不是图像，而是通过这样的css设置样式：

.ui-tooltip-icon .ui-icon {
    background: none no-repeat scroll -100em -100em transparent;
    color: inherit;
    font: bold 10px/13px Tahoma,sans-serif;
    height: 14px;
    text-align: center;
    text-indent: 0;
    width: 18px;
    border-radius: 3px 3px 3px 3px;
}

html是：

<span class="ui-icon ui-icon-close">×</span>

我希望这有用！

关闭jquery qtip工具提示插件的按钮

3 个答案: