MyBB Community Forums

So I'm following the guide outlined here: http://blog.ricodigo.com/blog/2012/02/17...jquery-ui/

You can see my WIP here: http://harajuju.net/?action=quickthemeoc&style=19
(copy and paste the URL into a new tab)

If you hover one of the icons under Brand Directory, you'll see my div tooltip pop up. However, the div doesn't go away once the mouse is removed. I don't know anything about jQuery or Javascript – can anyone help me identify the issue?

Included script

<script type="text/javascript">
  jQuery.noConflict();

jQuery(document).ready(function(){
  jQuery('.special').mouseenter(function(){
  jQuery(this).next('.tooltip').show();
   jQuery(this).next('.tooltip').position({at: 'center top', of: $(this), my: 'center center', offset: '0 -270'})

  });

  jQuery('.special').mouseleave(function(){;$('.tooltip').hide();});
});
</script>

HTML

<a href="{$thread['threadlink']}" class="imageframelink special"><img src="{$GLOBALS['threadfields']['brand_icon']['url']}" class="imageframe"></a>

<div class="tooltip">
<div class="brand_thread" style="background: url({$GLOBALS['threadfields']['mimg']['url']}); box-shadow: 0px -1px 8px black; margin: 0;">
<div class="brand_title">{$modbit} {$gotounread} <a href="{$thread['threadlink']}&action=lastpost&short=1" class="{$inline_edit_class} {$new_class} brandtitle" id="tid_{$inline_edit_tid}">{$thread['subject']}</a></div>
<a href="{$thread['threadlink']}&action=lastpost&short=1">

<span class="brand_link"></span>

</a>

<div class="brand_content">

<p>{$GLOBALS['threadfields']['brand_preview']}</p>

</div></div></div>

Maybe this:

<script type="text/javascript">
  jQuery.noConflict();

jQuery(document).ready(function(){
  jQuery('.special').mouseenter(function(){
  jQuery(this).next('.tooltip').show();
   jQuery(this).next('.tooltip').position({at: 'center top', of: $(this), my: 'center center', offset: '0 -270'})

  });

  jQuery('.special').mouseleave(function(){
    jQuery(this).next('.tooltip').hide()})
});
</script> 

jQuery.noConflict();
jQuery(document).ready(function($){
	$('.special').hover(function(){
		$(this).next('.tooltip').show();
		$(this).next('.tooltip').position({at: 'center top', of: $(this), my: 'center center', offset: '0 -270'})

	}, function() {
		$('.tooltip').hide();
	});
});

This one should work. Replaced mouseenter/mouseleave with hover (Using two functions).

(2012-12-31, 11:39 AM)Eric J. Wrote: [ -> ]

jQuery.noConflict();
jQuery(document).ready(function($){
	$('.special').hover(function(){
		$(this).next('.tooltip').show();
		$(this).next('.tooltip').position({at: 'center top', of: $(this), my: 'center center', offset: '0 -270'})

	}, function() {
		$('.tooltip').hide();
	});
});

This one should work. Replaced mouseenter/mouseleave with hover (Using two functions).

This is great! Thanks!

I can't believe I'm bumping this again, but ... suddenly, the offset doesn't seem to work anymore? No errors in console. Any ideas?

Well, after messing with it for a bit I found out that offset is now deprecated. D: You can have a look here:

http://jqueryui.com/upgrade-guide/1.9/#d...-my-and-at

I went ahead and tried it to make sure, worked like a charm.

That must be why. It suddenly stopped working, but I couldn't understand why – now it occurs to me that I included jQuery 1.9 instead of 1.8. Thank you!