javascript - 詳細情報を表示 (onmouseover)

Question

英語でどのように呼ばれているのかわかりませんが、ユーザーがテーブルの要素にカーソルを合わせたときに、次のような詳細情報を表示してもらいたいです:

ここに画像の説明を入力

テーブルが次のように見える唯一の違いは次のとおりです。

また、コンテンツを複数の行で説明する必要があります。次に例を示します。

Molten Coin:
+17 Defenses
+11 Attacks

score 0 · Accepted Answer

jqueryツールチップを使用すると正常に動作します。URLの下を見てください

http://jqueryui.com/tooltip/ または以下のコードを参照してください

 <html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tooltip - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( document ).tooltip();
});
</script>
<style>
label {
display: inline-block;
width: 5em;
}
</style>
</head>
<body>
<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
<p>But as it's not a native tooltip, it can be styled. Any themes built with
<a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a>
will also style tooltips accordingly.</p>
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." /></p>
<p>Hover the field to see the tooltip.</p>
</body>
</html>

score 0 · Accepted Answer

CSS ツールチップを使用できるはずです。

    body {
        background-color:black;
        color:white;
    }

    .tooltipDiv {
        position:relative;
    }

    .tooltipDiv span {
        display:none;
        position:absolute;
        top:25px;
        left:60px;
        background-color:white;
        font-size:1.2em;
        color:black;
        padding:5px;
    }

    .tooltipDiv:hover span {
        display:inline;
}

<div class="tooltipDiv">
    My Area Div
    <span>Molten Coin:<br />+17 Defenses<br />+11 Attacks</span>
</div>

JSFiddle をチェックして、実際の動作を確認してください。

http://jsfiddle.net/ZMuvm/

ただし、アンカー要素以外で :hover peudo クラスを使用すると、IE6 との互換性が失われることに注意してください。MSDN サイトの次の段落は使用しないでください。

Windows Internet Explorer 7 以降では、ブラウザーが標準準拠モード (厳格な !DOCTYPE) の場合、:hover 疑似クラスをリンクだけでなく任意の要素に適用できます。疑似クラスが a タグなどのセレクター内の要素に特に適用されない場合、ユニバーサル (*) セレクターが想定されます。:hover 疑似クラスをむやみに使用すると、ページのパフォーマンスに悪影響を及ぼす可能性があります。

ここでコンテキストで表示できます: http://msdn.microsoft.com/en-gb/library/ie/cc848866(v=vs.85).aspx

これを解決する方法は、DIV 内にブロックアンカー要素を配置することです。例として、このフィドルを確認してください。

http://jsfiddle.net/uBF8J/

<div class="tooltipDiv">
    <a>My Area Div
        <span>Molten Coin:<br />+17 Defenses<br />+11 Attacks</span>
    </a>
</div>


body {
    background-color:black;
    color:white;
}

.tooltipDiv a {
    position:relative;
    display:block;
}

.tooltipDiv a span {
    display:none;
    position:absolute;
    top:25px;
    left:60px;
    background-color:white;
    font-size:1.2em;
    color:black;
    padding:5px;
}

.tooltipDiv a:hover span {
    display:inline;
}

javascript - 詳細情報を表示 (onmouseover)

2 に答える 2

Related

Reference