116

JavaScript を使用せずに表のセルにツールチップを表示することは可能ですか? 使えません。

4

6 に答える 6

191

やってみました？

<td title="This is Title">

Firefox v 18（Aurora）、Internet Explorer 8、Google Chromev23xで正常に動作します

于 2012-12-13T12:56:45.773 に答える
19

はい。使い勝手の悪いセル要素で属性を使用するtitleか、CSS ツールチップ (いくつかの既存の質問、おそらくこの質問の複製) を使用できます。

于 2012-12-12T17:18:23.337 に答える
6

css と :hover 疑似プロパティを使用できます。これは簡単なデモです。次の css を使用します。

a span.tooltip {display:none;}
a:hover span.tooltip {position:absolute;top:30px;left:20px;display:inline;border:2px solid green;}

古いブラウザーでは、:hover のサポートが制限されていることに注意してください。

于 2012-12-12T18:01:50.603 に答える
2

BioData41 が追加したものの進化...

以下をCSSスタイルで配置

     <style>

        .CellWithComment{position:relative;}

        .CellComment
        {
            visibility: hidden;
            width: auto;
            position:absolute; 
            z-index:100;
            text-align: Left;
            opacity: 0.4;
            transition: opacity 2s;
            border-radius: 6px;
            background-color: #555;
            padding:3px;
            top:-30px; 
            left:0px;
        }   
        .CellWithComment:hover span.CellComment {visibility: visible;opacity: 1;}
</style>

次に、次のように使用します。

        <table>
            <tr>
                <th class="CellWithComment">Category<span class="CellComment">"Ciaooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo"</span></th>
                <th class="CellWithComment">Code<span class="CellComment">"Ciaooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo"</span></th>
                <th>Opened</th>
                <th>Event</th>
                <th>Severity</th>           
                <th>Id</th>
                <th>Component Name</th>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
            <tr>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
                <td>Table cell</td>
            </tr>
        </table>
于 2017-02-20T16:52:22.407 に答える