0
http://www.frequency-decoder.com/demo/css-tooltips/に示されている純粋なCSSツールチップ（データツールチップ）を使用したいと思います。私はそれをイメージマップの矩形領域の形に使用したいと思います。私は、 "純粋なCSSのツールチップ（データツールチップ）"とイメージマップエリアの形状を接続するための簡単なスクリプトが必要です。私はすでに以下のJavaScriptを見つけましたが、動作しますが、純粋なCSSツールチップ（データツールチップ）に接続できません。イメージマップ（jquery？）の純粋なCSSデータツールチップ
<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スクリプトにヘルパーの情報を入れたいと思っています。
エラーが発生しましたか、それとも単に機能しませんか？ –
それはすべて正常に動作しますが、欠けているのは、純粋なCSSツールチップ（データツールチップ）に接続されているCSS（レイアウト）が、見つかったJavaスクリプトで表示されないことだけです。私が見つけたJavascriptは、ラベルタグ間のテキストのみを表示します。 –
なぜあなたは '[data-tooltip]'と '* [data-tooltip]'のルールを持っていますか？ – BoltClock