I am trying to add tooltips and mousemoves to the tool tips so when you hover over a div the tooltip displays and is 20 pxs down and to the left 20 px of where the mouse is. It is not working and I've double checked my code and I can only assume it is because it is inside other divs inside a grid system. Any help you can give is much appreciated! Here is an example of my HTML with a piece of a 14 column grid. Please let me know if you need to see my full 14 grid HTML or not.
<div class="grid_6 alpha omega">
<div class="grid_6 alpha">
<article class="grid_4 alpha">
<div id="bulletin" data-tip-type="text" data-tip-source="This is text" class="tooltip">
<h2>Bulletin Board</h2>
<p></p>
</div>
</article> <!-- end Bulletin Board -->
<article class="grid_2 omega">
<div id="take5" data-tip-type="html" data-tip-source="tooltip-sidebar" class="tooltip">
<ul>
<li><h3>Take 5</h3></li>
<li><a href="#"><img src="http://placehold.it/75x75" alt="Learning Break icon" /></a></li>
<li><h3>Learning Break</h3></li>
</ul>
</div>
</article> <!-- end Take 5 -->
<article class="grid_2 omega">
<div id="longTerm" class="hover" data-distance="1" data-delay="100">
<ul>
<li><h3>Long Term</h3></li>
<li><a href="#"><img src="http://placehold.it/75x75" alt="Long Term Learning icon" /></a></li>
<li><h3>Learning</h3></li>
</ul>
</div>
</article> <!-- end Long Term -->
<div class="clear"></div>
<article class="grid_6 alpha omega">
<div id="career" class="hover" data-distance="1" data-delay="100">
<h2>Career Insight: Highlight your work!</h2>
<p>Create a Sharepoint blog where you can link to, upload, and discuss your work. It all becomes part of your Anthem professional portfolio.</p>
</div>
</article> <!-- end Career Insight -->
</div>
</div>
Normally the div for the tip would go outside the main content but within the page container. Well since all I have on my page is a 14 div grid, I created an additional div to use to contain my 14 div container called page. This is where I put my div tooltip container. Here is the code for that.
<div id="tooltip_container">This is my tooltip.</div>
<div class="tooltip-html-source">
<div id="tooltip-sidebar">
<p style="float:left;">This is a tip that has <strong><em style="color: #ffe19a;">HTML-formatted</em></strong> content, including an image</p>
</div>
<div class="clear-all"></div>
</div>
Here is my CSS for the tooltip
#tooltip_container {
color: black;
position: absolute;
padding: 20px;
max-width: 200px;
background-color: rgba(255,255,255,.85);
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
}
.tooltip-html-source {
display: none;
}
Here is my JS
$(document).ready(function(){
$('.tooltip').mouseover(function(e){
if( $(this).attr('data-tip-type') == 'text' ){
$('#tooltip_container').html( $(this).attr('data-tip-source') );
} // this section grabs and shows the plain text tool-tip typles
if( $(this).attr('data-tip-type') == 'html' ){
var elementToGet = '#'+ $(this).attr('data-tip-source');
var newHTML = $(elementToGet).html();
$('#tooltip_container').html(newHTML);
} // this section grabs and shows the tool-tips that are HTML and can be formatted and are in divs at bottom on index page
}).mousemove(function(e){
var toolTipWidth = $('#tooltip_container').outWidth();
var toolTipHeight = $('#tooltip_container').outerHeight();
$('#tooltip_container').css('left',(e.pageX-20)+'px'); // Determines where courser is and subtracts 20pxs from it
$('#tooltip_container').css('top',(e.pageY+20)+'px'); // Determines where courser is and subtracts 20pxs from it
}).mouseout(function(e){
});
}); // end ready