我想使用http://www.frequency-decoder.com/demo/css-tooltips/上显示的Pure CSS工具提示（data-tooltip）。我想在图像映射矩形区域形状上使用它。我需要一个简单的脚本来连接“Pure CSS Tooltips（data-tooltip）”和图像映射区域形状。我已经在下面找到了JavaScript，它可以工作，但是我无法将它连接到Pure CSS工具提示（data-tooltip）。
<style type="text/css">
body
{
background-image: url(background.gif);
text-align:center;
font-size:14px;
line-height:1.4;
font-weight:normal;
font-family:cambria,georgia,times,serif
}
/* Make tooltip "links" have a different pointer (as the tooltip uses the "help" cursor by default) */
[data-tooltip]
{
cursor:pointer !important;
}
/* Styles for elements having a data-tooltip attribute - using the star selector is processor intensive
so you may wish to change this to list a known, limited set of tags instead */
*[data-tooltip]
{
/* Relativly position the tooltip to enable us to position:absolute
the generated content */
position:relative;
/* Links inherit the !important cursor rule from above */
cursor:help;
/* Moz requires the text-decoration here (as it won't allow the use of
text-decoration:none on generated content) which is why I use the bottom
border to display a more accessible underline */
text-decoration:none;
border-bottom:1px dotted #aaa;
/* Remove the styles for IE7 and below - could be passed using conditional comments */
*text-decoration:inherit;
*border-bottom-width:inherit;
*border-bottom-style:inherit;
*cursor:inherit;
*position:inherit;
}
/* Default :before & :after values */
*[data-tooltip]:after,
*[data-tooltip]:before
{
content:"";
/* Don't show tooltip by default */
opacity:0;
/* Set a high z-index */
z-index:999;
/* Animations won't (yet) work on pseudo elements - shame really as this should fade the tooltip in
after one second - but I'll leave the rules for posterity */
-moz-transition-property: opacity;
-moz-transition-duration: 2s;
-moz-transition-delay: 1s;
-webkit-transition-property: opacity;
-webkit-transition-duration: 2s;
-webkit-transition-delay: 1s;
-o-transition-property: opacity;
-o-transition-duration: 2s;
-o-transition-delay: 1s;
transition-property: opacity;
transition-duration: 2s;
transition-delay: 1s;
/* -moz won't understand the text-decoration here but inherits the parent value of "none" successfully */
text-decoration:none !important;
outline:none;
}
/* Tooltip arrow - shown on hover or focus */
*[data-tooltip]:hover:before,
*[data-tooltip]:focus:before
{
/* Slightly opaque arrow */
opacity:0.94;
outline:none;
content:"";
display:block;
position:absolute;
top:20px;
left:50%;
margin:0 0 0 -5px;
width:0;
height:0;
line-height:0px;
font-size:0px;
/* This sets the tooptip pointer color */
border-bottom:5px solid #33acfc;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:transparent;
/* Border gradient */
-webkit-border-image:-webkit-gradient(linear, left top, left bottom, from(#33ccff), to(#33acfc));
}
/* Tooltip body - shown on hover or focus */
*[data-tooltip]:hover:after,
*[data-tooltip]:focus:after
{
/* Slightly opaque tooltip */
opacity:0.94;
/* Set display to block (or inline-block) */
display:block;
/* Use the data-tooltip attribute to set the content*/
content:attr(data-tooltip);
/* Position the tooltip body under the arrow and in the middle of the text */
position:absolute;
top:25px;
left:50%;
margin:0 0 0 -150px;
/* Set the width */
width:290px;
/* Pad */
padding:5px;
/* Style the tooltip */
line-height:18px;
/* min-height */
min-height:18px;
/* Set font styles */
color:#fcfcfc;
font-size:16px;
font-weight:normal;
font-family:helvetica neue, calibri, verdana, arial, sans-serif;
/* Fallback background color */
background:#3198dd;
text-align:center;
outline:none;
/* Moz doesn't recognise the following... */
text-decoration:none !important;
/* Background gradient */
background:-webkit-gradient(linear, left top, left bottom, from(#33acfc), to(#3198dd));
background:-moz-linear-gradient(top,#33acfc,#3198dd);
/* Round the corners */
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
/* Add a drop shadow */
-moz-box-shadow:2px 2px 4px #ccc;
-webkit-box-shadow:2px 2px 4px #ccc;
box-shadow:2px 2px 4px #ccc;
/* Add a Text shadow */
text-shadow:#2187c8 0 1px 0px;
}
</style>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.2.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('.1,.2,.3').css({
position: 'absolute'
}).hide()
$('area').each(function(i) {
$('area').eq(i).bind('mouseover mousemove', function(e) {
$('.1,.2,.3').eq(i).css({
top: e.pageY+10,
left: e.pageX+10
}).show()
})
$('area').eq(i).bind('mouseout', function() {
$('.1,.2,.3').hide()
})
})
});//]]></script>
<body>
<div align="center"><img src="http://www.hoteljijona.com/cover/cover_NL.jpg" width="794" height="1075" border="0" usemap="#Map" />
<map name="Map" id="Map">
<!-- Fixed language parts -->
<area shape="rect" coords="571,165,603,185" href="index-ca.html" target="_parent" title="this is the text that has to be shown by the Pure CSS data-tooltip"/>
<div class="1">
<label>Here it should show the Pure CSS Tooltip</label>
</div>
我希望在5分钟左右的一些天才能解决我的问题。我愿意将我帮助者的信息放在我试图构建的页面的html脚本中。
答案 0 :(得分：0)
为什么不创建应用于所有工具提示标记的CSS类？
<div class="1 myTooltipClass">
<label>Here it should show the Pure CSS Tooltip</label>
</div>
在样式表中创建一个新的css类？
.myTooltipClass { ... }
这样你就必须处理javascript来应用你的风格。