Friday before a long weekend at work, figured I'd draw up something fun.
jsFiddle
Called via
jQuery.clippy('caption here');
(function($){
var bubble = {
bottom: 0,
left: 75,
position: 'absolute',
'border-width': '20px 0 0 20px',
'border-style': 'solid',
'border-color': 'black transparent'
};
var bubbleFill = {
bottom: 2,
left: 74,
position: 'absolute',
'border-width': '20px 0 0 20px',
'border-style': 'solid',
'border-color': '#FFFFCA transparent'
};
$.clippy = function(caption)
{
create(caption);
};
function create(text)
{
var clip = $('<div id="clippy" style="text-align: center"><div style="position: relative"><p>' + text + '</p><div class="bubble"></div><div class="bubbleFill"></div></div><img src="http://i.imgur.com/fwL6g.png"></div>');
clip.css({
position: 'fixed',
bottom: '10px',
left: '10px'
});
clip.find('p').css({
'border-radius': '4px',
background: '#FFFFCA',
border: 'solid 1px black',
display: 'inline-block',
padding: '8px',
'margin-bottom': '20px',
'font-family': 'Arial',
'font-size': '12px',
'text-align': 'left',
'max-width': '200px'
});
clip.find('.bubble').css(bubble);
clip.find('.bubbleFill').css(bubbleFill);
$('body').append(clip);
}
})(jQuery);
