jqueryプラグインでDatatablesでtd部分にマウスオーバでPOPUPを表示させたいです。

Question

jqueryのプラグインdatatables で作成したtable の td要素が
1列だけ大量の文字数で、文字数制限をCSSにて指定しております。
そのtdに対してマウスオーバ時、ポップアップを表示させて
マウスオーバー時だけ全ての文字が表示されるようにしたいと考えております。

<td class="popup"><a>文字（表示される字数制限付） <span>ポップアップで表示させる文字(字数制限なしの文字列)</span> </a></td>

とし、
CSSでhoverとspanの属性指定で
表示させるようにしてみましたが
上手く行きませんでした。
デフォルトのマウスオーバ時のhoverは行全体の色が変わる仕様になっております。

JS、CSS動作可能であれば、どちらでもOKなので
方法などありましたら
ご教授頂ければと存じます。

よろしくお願いいたします。

Answer 1

上記回答ありがとうございました。

hover擬似クラスとafter擬似要素
を使って出来ました。
title属性の件についても、別な手段までご回答頂きありがとうございました。

Answer 2

.popup {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    width: 100px;
}

動作する環境に限りがありますが、こんな感じで省略できると思います。
hover擬似クラスとafter擬似要素でポップアップも出来そうですね。

Comments

[htsign]

今考えてみると、デザインに拘りがないのであれば、title属性に内容を書いておけばポップアップするのでは？
ブラウザ側の挙動に依存するので、ポップアップする保証は必ずしもないかもしれませんが。