Centering tooltip?

I'm trying to get my tooltip to be at the top & center of my page, regardless of window size and screensize. I have the following, but my tooltip appears on the top left corner:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>


<style>
area {
display: inline-block;
}



</style>

<script>
$(function() {
$( document ).tooltip({ position: {
my: "center bottom",
at: "center top",
}
});


});

</script>


1 Answer
1

Try to center in this way:

$(".tip_holder").hover(function(){
var currentTipHolder = $(this);
var $tipTxt = $(this).text();
var $tipTitle = $(this).attr('title');

$('#icis_dashboard').prepend('<div id="tooltip">' + $tipTxt + '</div>');

// jQueryUI position
$('#tooltip').position({
of: currentTipHolder,
at: 'center top',
my: 'center bottom'
});
},function() {
$('#tooltip').remove();
});


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.