Changing jQuery Hover Link to Onload When Enter Site


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…


/* tinyTips Plugin /
Version: 1.0 /
Mike Merritt /
Updated: Feb 4th, 2010 */

$.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.
		tinyTip = $('div.tinyTip');
		// 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 = - 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');
	}, 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() {



	<link rel="stylesheet" type="text/css" media="screen" href="tinyTips.css" />
	<script type="text/javascript" src=""></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.');



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 :slight_smile:

Not sure but cannot get this to work. Anyways trying another script now… Thank you Anthony

The jQuery .hover() function that this plugin uses is described as shorthand for the mouseenter and mouseleave events. What you might be able to do (untested), is to manually trigger the mouseenter event on the element when the dom is ready. Something like: