css でツールチップを使用しようとしていますが、機能していますが、ツールチップが表示されたときに問題が発生しました。これは、p タグのテキストがスパン コンテンツ「ツールチップ」に表示されているためです。すべてのコンテンツに表示したい. z-index を試してみて、すべてのタグの位置も定義しましたが、なぜ機能しないのか理解できません。どうすれば解決できるかについてのヒントをいただければ幸いです。
私は次のhtml構造を持っています
<div>
<a class="tooltip">
<p>Test1</p>
<span>saassa</span>
</a>
</div>
そしてCSS：
a.tooltip {
outline: none;
text-decoration: none;
border-bottom: dotted 1px blue;
display: inline;
position: relative;
padding: 0;
background: none repeat scroll 0 0 #bcd9db;
z-index: 20;
}
a.tooltip p {
margin-bottom: 0px;
display: inline;
color: #006565;
position: relative;
z-index: 20;
}
a.tooltip > span {
width: 25em;
padding: 10px 20px;
margin-top: 20px;
margin-left: -85px;
opacity: 0;
visibility: hidden;
z-index: 1000;
position: absolute;
font-family: Arial;
font-size: 12px;
font-style: normal;
color: #000000;
background: #FBF5E6;
border: 2px solid #CFB57C;
z-index: 1000;
}
a.tooltip:hover > span {
opacity: 1;
text-decoration: none;
visibility: visible;
overflow: visible;
margin-top: 50px;
display: inline;
margin-left: -260px;
background: #fbf5e6;
position: absolute;
z-index: 100000;
}
Fiddle にロードしたので、最初の 3 つのリンクのいずれかにカーソルを合わせると、div のすべてのコンテンツが表示されないことがわかります。 http://jsfiddle.net/mtzcq/3/
どうもありがとうございました