[英]jquery balloon not showing with .showBalloon()
我试图将气球插件中的气球显示在文档中,但由于某种原因,.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();
}
但它没有显示,仅在悬停时显示。 有任何想法吗?
根据他们文档中的示例,他们执行此操作。 但是,您可能会失去悬停。
$(".editDisplay").showBalloon({
contents: "Required",
position: "right",
offsetX: -20,
css: {
border: 'solid 1px red',
fontWeight: 'bold',
backgroundColor: 'rgb(239, 177, 177)',
color: '#000',
display: 'block'
}
});
我已经厌倦了弄乱它的参数,所以我看了看标记,只是向它添加了可以显示或不显示的类,代码:
<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");
希望这对任何人有帮助,
干杯
我遇到过同样的问题。 就我而言,$(“ selector”)返回多个元素(其中一些不可见)。 当我优化选择器时,它开始起作用。 您可以通过从控制台运行来检查是否是这种情况:
$("selector").length
您应该预期为1。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.