我正在尝试将工具提示和鼠标移动添加到工具提示中，因此当您将鼠标悬停在div上时，工具提示会显示，并且向下20像素，鼠标所在的左侧20像素。它不起作用，我已经仔细检查了我的代码，我只能假设它是因为它在网格系统内的其他div内。非常感谢您提供的任何帮助！这是我的HTML的一个示例，其中包含一个14列网格。如果您需要查看我的完整14格HTML，请告诉我。
<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>
通常，提示的div将超出主要内容但在页面容器内。好吧，因为我在页面上的所有内容都是一个14 div网格，我创建了一个额外的div用于包含我的14 div容器，称为page。这是我放置div工具提示容器的地方。这是代码。
<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>
这是我的工具提示CSS
#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;
}
这是我的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