Docs

[maceo@bartonpublishing.com]

We have several thousand posts in our old theme.

The posts with tooltips use a template and we have hundreds of templates.

We generate the tooltip using javascript and css in the old site, however every attempt at adding CSS and javascript to the X theme results in borked formatting and no tooltip.

You can see an example of the old site here: http://goo.gl/uiipeQ

And the new site/sandbox here: http://goo.gl/N3F13D

The code works as expected on my local machine, so I know there are no errors. I’m suspecting a conflict with CSS at some level.

I’m not interested in modifying hundreds of templated tooltips or dumping thousands of posts, so I’m hopeful we can find a work-around.

[Rupok]

Hi there,

Thanks for writing in! I can’t see any tooltip on your sandbox site, not even in broke format. So not sure how to check what’s causing this issue.

Kindly let us know a bit details. Also could you share your custom CSS and JS you are using for your tooltip?

Cheers!

[maceo@bartonpublishing.com]

This reply has been marked as private.

[Rad]

Hi there,

It’s due to jQuery proper usage. WordPress uses jQuery() instead of $(), but your code uses it. If you wish to prevent conflict, you can simply wrap your code with this,

jQuery( function($) {

//Your code here

} );

The complete example is this,

jQuery( function($) {

$(document).ready(function(){
	
	$('.tooltips').mouseover(function(e){
		
		if( $(this).attr('data-tip-type') == 'text'){
			$('#tooltip-container').html( $(this).attr('data-tip-source') );
			
		}
		
		if( $(this).attr('data-tip-type') == 'html'){
			var elementToGet = '#'+ $(this).attr('data-tip-source'); //find and create ID reference
			var newHTML = $(elementToGet).html(); //gets stuff in the HTML ID
			$('#tooltip-container').html( newHTML );
			
		}	
		
		$('#tooltip-container').css('display','block');
			
	}).mousemove(function(e){
		
		var toolTipWidth = $('#tooltip-container').outerWidth();
		var toolTipHeight = $('#tooltip-container').outerHeight();

		var pageWidth = $('body').width();
		if( e.pageX > pageWidth/2 ){
			$('#tooltip-container').css('left',(e.pageX-toolTipWidth+20)+'px');
			
		}else{
			$('#tooltip-container').css('left',(e.pageX-20)+'px');
			
		}
		
		if( e.pageY > 100 ){
			$('#tooltip-container').css('top',(e.pageY-(toolTipHeight+20))+'px');
			
		}else{
			$('#tooltip-container').css('top',(e.pageY+20)+'px');
			
		}
		
		
		
		
		
	}).mouseout(function(e){
		$('#tooltip-container').css('display','none').html('');
	}); //attach different mouse states to the tooltip
	
	
});

} );

Hope this helps.

[maceo@bartonpublishing.com]

I love you!

Thank you for your help!

[maceo@bartonpublishing.com]

Fixed. Disregard.

[maceo@bartonpublishing.com]

The tooltip is now displaying properly but is not positioned correctly.

Since the theme is a fixed width and the tooltip will always be in the center div, I’m not worried about the X position as much as they Y position.

If the tooltip is near the top of the viewport, I want the tooltip to display under the pointer.

If it is less than the height of the tooltip from the bottom of the viewport, I want the tooltip to display above the pointer.

This code is giving me unexpected results:

jQuery( function($) {

$(document).ready(function(){

$(‘.tooltips’).mouseover(function(e){

if( $(this).attr(‘data-tip-type’) == ‘text’){
$(‘#tooltip-container’).html( $(this).attr(‘data-tip-source’) );

}

if( $(this).attr(‘data-tip-type’) == ‘html’){
var elementToGet = ‘#’+ $(this).attr(‘data-tip-source’); //find and create ID reference
var newHTML = $(elementToGet).html(); //gets stuff in the HTML ID
$(‘#tooltip-container’).html( newHTML );

}

$(‘#tooltip-container’).css(‘display’,’block’);

}).mousemove(function(e){

var toolTipWidth = $(‘#tooltip-container’).outerWidth();
var toolTipHeight = $(‘#tooltip-container’).outerHeight();

var distanceFromBottom = Math.floor($(document).height() – $(document).scrollTop() – $(window).height());

var pageWidth = $(‘body’).width();
if( e.pageX > pageWidth/2 ){
$(‘#tooltip-container’).css(‘left’,(e.pageX+’px’));

}else{
$(‘#tooltip-container’).css(‘left’,(e.pageX+’px’));

}

if( distanceFromBottom < toolTipHeight ){
$(‘#tooltip-container’).css(‘top’,(e.pageY-(toolTipHeight*2))+’px’);

}else{
$(‘#tooltip-container’).css(‘top’,(e.pageY+20)+’px’);

}

}).mouseout(function(e){
$(‘#tooltip-container’).css(‘display’,’none’).html(”);
}); //attach different mouse states to the tooltip

});

} );

[Rad]

Hi there,

You shouldn’t use the position of the pointer (x,y), instead, calculate it from the offset position of .tooltips element.

For example,

$('.tooltips').mouseover(function(e){

var tooltip_offset = $( this ).offset();

var pageY = tooltip_offset.top;
var pageX = tooltip_offset.left;

Hope this helps.

[Author]

Posts