こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

マウスオーバー時の吹き出し表示の設定について

以下のHTMLにおいて、「OA機器の問合せ対応」にマウスオーバーすると、文字が入力された吹き出しを表示するためのCSS、HTMLの記載方法についてご教示頂けますようお願いいたします。

<html>
<head>
<style type="text/css">
<!--
table {white-space: nowrap;
border: 2px #808080 solid;
border-collapse: collapse}
th {color:#000;
background-color:#008080;
padding: 2px}
td {padding: 2px}
-->
</style>
<title>求人募集</title>
</head>
<body>
<table border="1">
<tr><th>職種</th>
<th>業務内容</th>
<th>勤務地</th>
<th>最寄駅</th>
<th>雇用形態</th>
<th>給与</th>
<th>勤務時間</th>
<th>期間</th>
</tr>
  <tr>
<td>オフィスワーク</td>
<td>OA機器の問合せ対応</td>
<td>東京都千代田区</td>
<td>丸ノ内線・日比谷線・千代田線「○○」駅<br>
銀座線「○○」駅</td>
<td>契約社員</td>
<td>時給1400円~</td>
<td>8:30~18:15(休憩1時間)</td>
<td>3ヶ月毎更新あり</td>
</tr>
<tr>
<td>オフィスワーク</td>
<td>店内機器(POSレジ等)を納品に関するスケジュール調整</td>
<td>神奈川県川崎市高津区</td>
<td>田園都市線「○○」駅<br>
JR南武線「○○」駅</td>
<td>契約社員</td>
<td>時給1350円~</td>
<td>8:30~17:15(休憩1時間)</td>
<td>3ヶ月毎更新あり</td>
</tr>
</table>
</body>
</html>

投稿日時 - 2017-12-31 00:07:03

QNo.9413419

困ってます

質問者が選んだベストアンサー

一番簡単なのは、

<td><span title="説明文">OA機器の問合せ対応</span></td>

~みたいにする事ですかね。

ポップアップされるフキダシ部分を色々と凝りたいのならjQuery(javascript)を使うしかないです。

投稿日時 - 2017-12-31 03:50:30

お礼

ありがとうございます。

サイトを見るとCSS、jQuery(javascript)を使用する方法はありましたがすぐに理解できず、困っておりましたが、ご教示いただいたspanタグのtitle属性を使用してポップアップする方法は知らなかったので助かりました。

客先では、SharePoint Server2010を使用しており、ユーザーからセルに入力した文字にマウスカーソールを合わせた際に説明文書を表示したいという要望をいただいており、ユーザー自身が作成するにあたり今回の方法は
最も適していそうです。

特定の領域に共通属性を設定する
http://www.newcredge.com/IT/www/html/tag/text/span.html

投稿日時 - 2017-12-31 22:16:15

ANo.1

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.2

1,「文字が入力された吹き出し」が表示されるHTMLをposition:absoluteなど使用して所定の位置に表示されるように作成し、display:noneにして非表示にしておく。

2,マウスが乗ったら先の吹き出しをdisplay:blockに変更するようにjavascriptを組む

具体的なソースを書けということでしたら、どちらかにお仕事依頼を・・・・

投稿日時 - 2017-12-31 06:54:11

お礼

ありがとうございます。

javascriptを使用する方法になるということですね。

質問する前に以下のサイトなどを見てみたのですが、今一 理解できなかったので質問させて頂きました。
javascriptについて勉強してご教示頂いた方法を試してみようと思います。

CSSで実装する、マウスオーバーで表示される吹き出し
https://www.tam-tam.co.jp/tipsnote/html_css/post9815.html

CSSやJavaScriptでツールチップを表示させる方法まとめ
http://unguis.cre8or.jp/web/1934

投稿日時 - 2017-12-31 22:33:17