jquery balloon not showing with .showBalloon()

Question

I'm trying to have the balloon from the balloon plugin show up on document ready but for some reason the .showballoon method isn't doing anything. I would think it would be as easy as this:

$(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();
}

but it's not showing up, it only shows up on hover. Any ideas?

score 0 · Answer 1 · answered May 05 '15 at 18:28

0

Based on the example in their docs they do this. You might lose the hover though.

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

answered May 05 '15 at 18:28

Jack

8,851
3
21
26

yea this doesn't do much difference, i'm afraid i might have to use something else in order to achieve what i want – WtFudgE May 06 '15 at 02:40

score 0 · Answer 2 · answered May 06 '15 at 04:12

I got tired of messing around with it's parameters, so instead i looked at the markup and just added classes to it that I can display or not display, the code:

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

the 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;
}

and then using jquery i chose to display or not display, or hover if this is what u want:

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

hope this helps anyone,

cheers

score 0 · Answer 3 · answered Nov 05 '15 at 19:55

I had the same issue. In my case, the $("selector") returned multiple elements (some of them are not visible). When I refine the selector, it started to work. You can check if this is the case by running from the console:

$("selector").length

You should expected for 1.

jquery balloon not showing with .showBalloon()

3 Answers3