Hi,
I have a jQuery script that when you hover over a link a text bubble on mouseover will pop up… but I am trying to make the text bubble load when the webpage does instead of having to hover over the link. ( instantly load the text bubble when the page does )
here is the code…
jQuery
//
/* tinyTips Plugin /
/ Version: 1.0 /
/ Mike Merritt /
/ Updated: Feb 4th, 2010 */
//
(function($){
$.fn.tinyTips = function (supCont) {
/* User settings
**********************************/
// Enter the markup for your tooltips here. The wrapping div must have a class of tinyTip and
// it must have a div with the class "content" somewhere inside of it.
var tipFrame = '<div class="tinyTip"><div class="content"></div><div class="bottom"> </div></div>';
// Speed of the animations in milliseconds - 1000 = 1 second.
var animSpeed = 200;
/***************************************************************************************************/
/* End of user settings - Do not edit below this line unless you are trying to edit functionality. */
/***************************************************************************************************/
// Global tinyTip variable;
var tinyTip;
var tText;
// When we hover over the element that we want the tooltip applied to
$(this).hover(function() {
// Inject the markup for the tooltip into the page and
// set the tooltip global to the current markup and then hide it.
$('body').append(tipFrame);
tinyTip = $('div.tinyTip');
tinyTip.hide();
// Grab the content for the tooltip from the title attribute (or the supplied content) and
// inject it into the markup for the current tooltip. NOTE: title attribute is used unless
// other content is supplied instead.
if (supCont === 'title') {
var tipCont = $(this).attr('title');
} else if (supCont !== 'title') {
var tipCont = supCont;
}
$('.tinyTip .content').html(tipCont);
tText = $(this).attr('title');
$(this).attr('title', '');
// Offsets so that the tooltip is centered over the element it is being applied to but
// raise it up above the element so it isn't covering it.
var yOffset = tinyTip.height() - 35;
var xOffset = (((tinyTip.width() - -112) / 2)) - ($(this).width() / 2);
// Grab the coordinates for the element with the tooltip and make a new copy
// so that we can keep the original un-touched.
var pos = $(this).offset();
var nPos = pos;
// Add the offsets to the tooltip position
nPos.top = pos.top - yOffset;
nPos.left = pos.left - xOffset;
// Make sure that the tooltip has absolute positioning and a high z-index,
// then place it at the correct spot and fade it in.
tinyTip.css('position', 'absolute').css('z-index', '1000');
tinyTip.css(nPos).fadeIn(animSpeed);
}, function() {
$(this).attr('title', tText);
// Fade the tooltip out once the mouse moves away and then remove it from the DOM.
$('div.tinyTip').fadeOut(animSpeed, function() {
$(this).remove();
});
});
}
})(jQuery);
HTML
<link rel="stylesheet" type="text/css" media="screen" href="tinyTips.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tinyTips.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a.imgTip').tinyTips('<img src="demo-image.jpg" /><br />You can even put images or any other markup in the tooltips.');
});
</script>
CSS
img.tTip { margin: 8px 15px 8px 0px; float: left; }
.tinyTip { width: 325px; height: 29px; padding: 17px 0px 0px 0px; display: block; background: url(tinyTip-top.png) 0px 0px no-repeat; }
.tinyTip .content { padding: 0px 15px 0px 15px; font-size: 14px; font-family: “Lucida Sans Unicode”; color: #010101; background: url(tinyTip-content.png) 0px 0px repeat-y; }
.tinyTip .bottom { height: 17px; background: url(tinyTip-bottom.png) 0px 0px no-repeat; font: 0px/0px sans-serif; }
Any help would be awesome 