jquery气球不显示与.showBalloon（）答案

【问题标题】：jquery balloon not showing with .showBalloon()jquery气球不显示与.showBalloon（）
【发布时间】：2015-05-05 18:20:51
【问题描述】：

我正在尝试让气球插件中的气球显示在准备好的文档中，但由于某种原因，.showballoon 方法没有做任何事情。我认为它会像这样简单：

$(document).ready(function() {
    var bordercolor;

    $(".editDisplay").balloon({
        contents: "Required",
        position: "right",
        offsetX: -20,
        css: {
            border: 'solid 1px red',
            fontWeight: 'bold',
            backgroundColor: 'rgb(239, 177, 177)',
            color: '#000',
            display: 'block'
        }
    });

    $('.editDisplay').showBalloon();
}

但它没有显示，它只显示在悬停时。有什么想法吗？

【问题讨论】：

标签： jquery popup tooltip balloon

【解决方案1】：

根据他们文档中的示例，他们这样做了。不过，您可能会失去悬停。

$(".editDisplay").showBalloon({
    contents: "Required",
    position: "right",
    offsetX: -20,
    css: {
        border: 'solid 1px red',
        fontWeight: 'bold',
        backgroundColor: 'rgb(239, 177, 177)',
        color: '#000',
        display: 'block'
    }
});

【讨论】：

是的，这并没有太大区别，恐怕我可能不得不使用其他东西来实现我想要的

【解决方案2】：

我厌倦了弄乱它的参数，所以我查看了标记，只是添加了可以显示或不显示的类，代码：

<div class='editDisplay'>
<div class='requiredBalloon'>
Required
<div class='requiredBalloonArrow1'></div><div class='requiredBalloonArrow2'></div>
</div>
</div>

CSS：

.editDisplay {
    position: relative;
}

.requiredBalloon {
    min-width: 20px;
    padding: 5px;
    border-radius: 6px;
    border: 1px solid red;
    box-shadow: rgb(85, 85, 85) 4px 4px 4px;
    color: rgb(0, 0, 0);
    opacity: 0.85;
    z-index: 32767;
    text-align: left;
    font-weight: bold;
    display: none;
    visibility: visible;
    position: absolute;
    background-color: rgb(239, 177, 177);
    right: -50px;
    top: -4px;
}

.requiredBalloonArrow1, .requiredBalloonArrow2 {
    position: absolute;
    height: 0;
    width: 0;
    border-style: solid;
}

.requiredBalloonArrow1 {
    border-width: 7px 12px 7px 0px;
    border-color: transparent rgb(255, 0, 0) transparent transparent;
    left: -12px;
    top: 6.5px;
}

.requiredBalloonArrow2 {
    border-width: 6px 10px 6px 0px;
    border-color: transparent rgb(239, 177, 177) transparent transparent;
    left: -10px;
    top: 7.5px;
}

然后使用 jquery 我选择显示或不显示，或者悬停如果这是你想要的：

$(this).parent().find(".requiredBalloon").css("display", "block");

希望这对任何人都有帮助，

干杯

【讨论】：

【解决方案3】：

我有同样的问题。就我而言， $("selector") 返回了多个元素（其中一些不可见）。当我优化选择器时，它开始工作。您可以通过从控制台运行来检查是否是这种情况：

$("selector").length

你应该期待 1。

【讨论】：