タイトル通りです。デベロッパーツールにてURLを短縮するCSSは効いてるのですが、ツールチップのCSSが効いていません。何故でしょうか？

説明不足で申し訳ございません。以下追記です。

短縮するURLそのものにカーソルを合わせたときに吹き出しが出て、全てのURLが出てくるようにしたいのですが、効いていません。

Chromeのデベロッパーツールで見ました。

HTML
1<div class="tooltip">
2https://www.mitsubishi-shokuhin.com/confectionery/haribo/
3</div>

CSS
1/* 表示文字の装飾 */
2div.tooltip{
3  width: 200px;
4  white-space: nowrap;
5  overflow: hidden;
6  text-overflow: ellipsis;
7  display: inline-block;                        /* インライン要素化 */
8  border-bottom:dashed 1px #555;
9}
10 
11/* ツールチップ部分を隠す */
12div.tooltip span {
13    display: none;
14}
15 
16/* マウスオーバー */
17div.tooltip:hover {
18    position: relative;
19    color: #333;
20}
21 
22/* マウスオーバー時にツールチップを表示 */
23div.tooltip:hover span {
24    display: block;                  /* ボックス要素にする */
25    position: absolute;            /* relativeからの絶対位置 */
26    top: 25px;
27    font-size: 90%;
28    color: #fff;
29    background-color: #51A2C1;
30    width: 205px;
31    padding: 5px;
32    border-radius:3px;
33    z-index:100;
34}
35 
36/* フキダシ部分を作成 */
37div.tooltip span:before{
38    content:''; 
39    display:block; 
40    position:absolute;                         /* relativeからの絶対位置 */
41    height:0; 
42    width:0; 
43    top:-13px; 
44    left:15px;
45    border:13px transparent solid; 
46    border-right-width:0; 
47    border-left-color:#51A2C1; 
48    transform:rotate(270deg);            /* 傾きをつける */
49    -webkit-transform:rotate(270deg);
50    -o-transform:rotate(270deg);
51    z-index:100;
52}

以上で、情報不足はございませんか？

namda

2018/08/07 04:17

HTMLとCSSを載せてください。デベロッパーツールは何のデベロッパーツールですか？短縮するURLはCSSとどんな関係が有るんですか？

liveasnotes

2018/08/07 05:16

「URLを短縮するURL」...意味上のエラーがあります．正しい文章に直してください．また投稿前に文章の校正を行ってください／「ツールチップのCSSが効いていません。何故でしょうか」...どんなHTML,CSSを書いたのか示してください．コードの挿入方法はこちらを参照してください：https://twitter.com/wakame1367/status/983955540530282504

dit.

2018/08/08 02:36

HTML内にspanの記述がありませんが、JSか何かで生成しているのでしょうか？であればそちらの記述もお願いします。

lino

2018/08/09 07:34

ditさんご回答ありがとうございます。JSか何かで生成しているかもしれませんが把握していません。知識がないのでCSSだけで何とかやりたいです。

行動規範の内容に同意します

回答3件

ベストアンサー

<span>が無いと非表示/表示切り替えの意味がなくなるのでdiv内に同じ文字列を<span>で囲って追記。
おそらくdiv.tooltip:hoverのposition: relative;を消すだけでも表示はされるような気がします。
せっかく「長い文字列をすべて表示」したいのにdiv.tooltip:hover spanのwidth: 205px;で幅を狭くしているのももったいないです。
div.tooltip:hover spanのtop: 25px;があると元の文字にかぶってしまうのでそれも削除。
以上を踏まえてこれでどうなりますか？

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width">
6<style>
7/* 表示文字の装飾 */
8div.tooltip{
9  width: 200px;
10  white-space: nowrap;
11  overflow: hidden;
12  text-overflow: ellipsis;
13  display: inline-block;                        /* インライン要素化 */
14  border-bottom:dashed 1px #555;
15}
16
17/* ツールチップ部分を隠す */
18div.tooltip span {
19    display: none;
20}
21
22/* マウスオーバー */
23div.tooltip:hover {
24    color: #333;
25}
26
27/* マウスオーバー時にツールチップを表示 */
28div.tooltip:hover span {
29    display: block;                  /* ボックス要素にする */
30    position: absolute;            /* relativeからの絶対位置 */
31    font-size: 90%;
32    color: #fff;
33    background-color: #51A2C1;
34    padding: 5px;
35    border-radius:3px;
36    z-index:100;
37}
38
39/* フキダシ部分を作成 */
40div.tooltip span:before{
41    content:''; 
42    display:block; 
43    position:absolute;                         /* relativeからの絶対位置 */
44    height:0; 
45    width:0; 
46    top:-13px; 
47    left:15px;
48    border:13px transparent solid; 
49    border-right-width:0; 
50    border-left-color:#51A2C1; 
51    transform:rotate(270deg);            /* 傾きをつける */
52    -webkit-transform:rotate(270deg);
53    -o-transform:rotate(270deg);
54    z-index:100;
55}
56</style>
57</head>
58<body>
59<div class="tooltip">
60  https://www.mitsubishi-shokuhin.com/confectionery/haribo/
61  <span>https://www.mitsubishi-shokuhin.com/confectionery/haribo/</span>
62</div>
63</body>
64</html>

投稿2018/08/08 03:51

dit.

総合スコア3235

lino

2018/08/09 07:38

ありがとうございます！本当に助かりました。

行動規範の内容に同意します

リンクは張りたくなく、ツールチップを表示するだけで良いのですが、その場合どう書けばいいのでしょうか？

URLなのにハイパーリンクを設定しない理由がいまいち分かりませんが，一応書いておくと，

html
1<div class="has_tooltip" data-desc="ツールチップとは？Wikipediaにはこう書かれている">
2  ツールチップとは？アンサイクロペディアにはこう書かれている：
3</div>

css
1.has_tooltip{
2  position: relative;
3  display: inline-block;
4  font-size: 0;
5  vertical-align: top;
6  /*以下，装飾*/
7  max-width: 12rem;
8  color: currentColor;
9  border: 1px solid red;
10  padding: .5rem;
11}
12.has_tooltip::before{
13  content: attr(data-desc);
14  display: block;
15  overflow-x: hidden;
16  font-size: 1rem;
17  white-space: nowrap;
18  text-overflow: ellipsis;
19}
20.has_tooltip:hover::after{
21  content: '"The tooltip or infotip or a hint is a common graphical user interface element. It is used in conjunction with a cursor, usually a pointer. The user hovers the pointer over an item, without clicking it, and a tooltip may appear—a small "hover box" with information about the item being hovered over.[1][2] Tooltips do not usually appear on mobile operating systems, because there is no cursor (though tooltips may be displayed when using a mouse)." via Wikipedia';
22  font-size: 1rem;
23  /*以下，装飾*/
24  position: absolute;
25  display: block;
26  top: 2rem;
27  left: 2rem;
28  width: 20rem;
29  padding: .5rem;
30  background: #fff;
31  border: 1px solid gray;
32  border-radius: 10px;
33}

という感じですかね

擬似要素を使うと

html
1<div>
2  ::before
3  あいうえお
4  ::after
5</div>

という感じに配置されるので，

・要素内の文字サイズを0にすることで，擬似的に元のテキストを削除
・spanで囲う代わりに，text-overflow関連のプロパティを::before擬似要素のみにかけ，::before擬似要素内にdata-desc属性（※今作ったオリジナルの属性）の値を放り込む
・::after擬似クラスでツールチップを作成
の3つを押さえれば，要素1つでツールチップまでできます

余談

そういえば，これ（↓）を説明し忘れていましたね
もしデフォルトのものでよければ，

html
1<div title="これがツールチップの中身だよ！">ここにマウスを乗せて！</div>

でできます

投稿2018/08/09 09:29

編集2018/08/09 09:34

liveasnotes

総合スコア1284

liveasnotes

2018/08/09 09:36

擬似クラスや属性値を使うCSSは，最初は難しく感じるかもしれませんが，慣れると結構使い勝手が良いので，ぜひ色々試してほしいです

lino

2018/08/11 02:32

ありがとうございます。URLにハイパーリンクを張ると、外に人が流れやすくなるのとリンクジュースを流したくないので、通常はただのテキスト表示にしています。

行動規範の内容に同意します

正攻法は既にdit.さんの回答で示されていると思うので，
私はHTMLを書かずにCSSだけで解決しちゃう方法を紹介したいと思います！
↓

https://thimbleprojects.org/liveasnotes/530805/
（右上のリミックスボタンでソースの閲覧・編集等ができます）

ポイント

aタグの中の文字サイズをゼロにする（テキストノードの非表示）
aタグのvertical-alignを設定する（今回はtop）
aタグのhrefを::before擬似要素で表示する（content: attr(href)）

・その際，文字サイズをpタグの文字サイズに合わせる
・また，予め:root擬似クラスで文字サイズを設定しておく

残りの::after擬似要素だけでツールチップを作る

・文字サイズをpタグの文字サイズに合わせる
・吹き出し部分を付けたい「辺」に，余白を多めにつける（その分が吹きだしのサイズ）
・背景画像をlinear-graient()やradial-gradient()で作成し，配置する
・背景画像の複数指定の際，background-sizeやbackground-positionは，できるだけ固定値ではなく，%やcalc()を使い，汎用性を高める

実装方法（デモ）

これ（↓）に

html
1<p>
2  This page's url (
3  <a href="https://teratail.com/questions/139983" class="lnk">https://teratail.com/questions/139983</a>
4  ) is targeting on this page.
5</p>

これ（↓）をかけるだけです

css
1:root{
2  font-size: 18px;
3}
4p{
5  font-size: 1rem;
6}
7
8.lnk:link,
9.lnk:visited,
10.lnk:hover,
11.lnk:active{
12  position: relative;
13  display: inline-block;
14  max-width: 10rem;
15  color: currentColor;
16  font-size: 0;
17  text-decoration: none;
18  border-bottom: dashed 1px gray;
19  vertical-align: top;
20}
21.lnk::before{/*show target location*/
22  content: attr(href);
23  display: block;
24  overflow-x: hidden;
25  font-size: 1rem;
26  white-space: nowrap;
27  text-overflow: ellipsis;
28}
29.lnk:hover::after,
30.lnk:active::after{/*show tooltip*/
31  content: attr(href);
32  display: block;
33  position: absolute;
34  z-index: 1;
35  top: calc(100% - 3px);
36  padding: 10px 5px 5px;
37  color: #fff;
38  font-size: 1rem;
39  background-image:
40    linear-gradient(-45deg, #51A2C1 0%, #51A2C1 50%, rgba(255,255,255,0) 51%),
41    linear-gradient(45deg, #51A2C1 0%, #51A2C1 50%, rgba(255,255,255,0) 51%),
42    linear-gradient(#51A2C1 0%, #51A2C1 100%),
43    linear-gradient(#51A2C1 0%, #51A2C1 100%),
44    radial-gradient(closest-side, #51A2C1 100%, rgba(255,255,255,0)),
45    radial-gradient(closest-side, #51A2C1 100%, rgba(255,255,255,0)),
46    radial-gradient(closest-side, #51A2C1 100%, rgba(255,255,255,0)),
47    radial-gradient(closest-side, #51A2C1 100%, rgba(255,255,255,0));
48  background-position:
49    10px 0,
50    18px 0,
51    5px 8px,
52    0 13px,
53    0 8px,
54    100% 8px,
55    100% 100%,
56    0 100%;
57  background-size:
58    8px 8px,
59    8px 8px,
60    calc(100% - 10px) 100%,
61    100% calc(100% - 18px),
62    10px 10px,
63    10px 10px,
64    10px 10px,
65    10px 10px;
66  background-repeat: no-repeat;
67}