以下のサイトのような横並びの要素に関してツールチップを適用したいのですが、高速で要素にmouseon,mouseleaveを繰り返すとツールチップが期待していない位置に表示されます。
このサイトでは期待通りの位置に表示されていますが、ローカルで試したところ位置ずれが起きます。
http://alphasis.info/2013/04/jquery-ui-tooltip-anchortext-balloon-position-under/
なぜでしょうか?
わかる方回答宜しくお願いします。
lang
1<html lang="en"> 2<head> 3<meta charset="utf-8"> 4<title>jQuery UI tooltip test</title> 5<script type="text/javascript" src="../js/jquery-2.0.3.min.js"></script> 6<script type="text/javascript" src="../js/jquery-ui.js"></script> 7<script type="text/javascript" src="../css/jquery-ui.css"></script> 8 9<style> 10<!-- 11#sample { 12 padding: 2em 5em; 13} 14.ui-tooltip, 15.arrow:after { 16 background: black; 17 border: 2px solid white; 18} 19.ui-tooltip { 20 width:300px; 21 padding: 10px 20px; 22 color: white; 23 border-radius: 20px; 24 font: bold 14px "Helvetica Neue", Sans-Serif; 25 text-transform: uppercase; 26 box-shadow: 0 0 7px black; 27} 28.arrow { 29 width: 70px; 30 height: 16px; 31 overflow: hidden; 32 position: absolute; 33 left: 50%; 34 margin-left: -35px; 35 bottom: -16px; 36} 37.arrow.top { 38 top: -16px; 39 bottom: auto; 40} 41.arrow.left { 42 left: 20%; 43} 44.arrow:after { 45 content: ""; 46 position: absolute; 47 left: 20px; 48 top: -20px; 49 width: 25px; 50 height: 25px; 51 box-shadow: 6px 5px 9px -9px black; 52 -webkit-transform: rotate(45deg); 53 -moz-transform: rotate(45deg); 54 -ms-transform: rotate(45deg); 55 -o-transform: rotate(45deg); 56 tranform: rotate(45deg); 57} 58.arrow.top:after { 59 bottom: -20px; 60 top: auto; 61} 62--> 63</style> 64 65</head> 66<body> 67 68<div id="sample"> 69 <a href="#" title="アンカーテキスト1のツールチップ">アンカーテキスト1</a>、 70 <a href="#" title="アンカーテキスト2のツールチップ">アンカーテキスト2</a>、 71 <a href="#" title="アンカーテキスト3のツールチップ">アンカーテキスト3</a> 72</div> 73 74 75<script> 76jQuery( function() { 77 jQuery( "#sample" ).tooltip( { 78 position: { 79 my: "center top", 80 at: "center bottom+10", 81 using: function( position, feedback ) { 82 jQuery( this ).css( position ); 83 jQuery( "<div>" ) 84 .addClass( "arrow" ) 85 .addClass( feedback.vertical ) 86 .addClass( feedback.horizontal ) 87 .appendTo( this ); 88 } 89 } 90 } ); 91} ); 92</script> 93 94</body> 95</html>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/04/19 15:56