Control.Bubble
Bubble demo
A bubble will appear where is appropiate and remain there until the window
changes it size or the element changes its position.
Click on the inputs and have fun using the tab key.
Bubble 1
Opened at start, featuring a red line
Bubble 2
Show when focus, hide when blur
HTML source
<div class="twocolumns">
<div class="column">
<h4>Bubble 1</h4>
Opened at start, featuring a red line
<input type="text" id="bubble-1" value="Click me, then unfocus me" />
</div>
<div class="column">
<h4>Bubble 2</h4>
Show when focus, hide when blur
<input type="text" id="bubble-2" value="Click me, then unfocus me" />
</div>
</div>
<div class="column">
<h4>Bubble 1</h4>
Opened at start, featuring a red line
<input type="text" id="bubble-1" value="Click me, then unfocus me" />
</div>
<div class="column">
<h4>Bubble 2</h4>
Show when focus, hide when blur
<input type="text" id="bubble-2" value="Click me, then unfocus me" />
</div>
</div>
Javascript source
Meteora.uses('Control.Bubble');
Meteora.onStart(
function () {
var bubble = new Bubble(
'bubble-1',
'<b>Look</b> at this input',
{
'showEvent': 'focus',
'hideEvent': 'blur',
'width': 200,
'height': 60
}
);
bubble.show();
bubble.red();
var bubble = new Bubble(
'bubble-2',
'You have focused this input, when you loose the focus, the bubble will hide itself.',
{
'showEvent': 'focus',
'hideEvent': 'blur',
'width': 300,
'height': 40
}
);
}
);