jquery balloon, не показывающий с .showBalloon()

Question

Я пытаюсь показать, что воздушный шар с плагином всплывает на документе, но по какой-то причине метод .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(); 
} 

, но это не отображается, это показывает только при наведении курсора мыши. Есть идеи?

Answer 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' 
    } 
}); 

Answer 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"); 

надеюсь, что это помогает кто-нибудь,

веселит

Answer 3

Я была такая же проблема. В моем случае $ ("selector") возвратил несколько элементов (некоторые из них не видны). Когда я уточняю селектор, он начал работать. Вы можете проверить, если это так, запустив из консоли:

$("selector").length 

Вы должны ожидать на 1.