Youtubeの認証バッジ

Youtubeで有名な人に付くバッジですが、上にマウスをホバーするとポップアップが表示すると思います。
ソースを見てみるとaria-label="確認済み" data-tooltip-text="確認済み" aria-labelledby="yt-uix-tooltip389-arialabel"という値がセットされているんですが、これをセットしただけでは表示されません。

あれはどうやって表示させているのでしょう？
また、動画のタイトルの上でも、タイトルが全て表示されると思います。
あれもどうやっているのですか？

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

回答1件

ベストアンサー

HTMLだけでは装飾はされないでしょうから、CSSやjavascriptを使っているのではないかと。質問者さんの実現したいことはこのような動作でしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        body {
13            padding: 20px;
14        }
15
16        .popup {
17            display: inline;
18            position: relative;
19        }
20
21        .popup::after {
22            content: attr(data-tooltip-text);
23            position: absolute;
24            left: 0;
25            top: -15px;
26            opacity: 0;
27            transition: opacity 1s ease-out;
28            word-break: keep-all;
29        }
30
31        .popup:hover::after {
32            opacity: 1;
33        }
34    </style>
35</head>
36<body>
37<span data-tooltip-text="確認済み" class="popup">
38    テキスト
39</span>
40</body>
41</html>

投稿2017/03/11 19:01

編集2017/03/13 13:20

s8_chu

総合スコア14731

ryo-dev

2017/03/12 10:59

そうですね。 hovarを付けて実装している感じですね。ありがとうございます。あとは背景色をつければいいですよね？自分は　::after　の使い方がよくわからないんですが、要素の後に追加するんですよね？

s8_chu

2017/03/12 19:22

返信が遅れてしまいすみません。そう考えて構わないと思います。

ryo-dev

2017/03/13 08:21

:after要素を使う意味ってなんですかね？また、::afterと:afterｎ違いはなんですか？

s8_chu

2017/03/13 13:20

使う意味は沢山あると思いますが、after擬似要素は指定した要素の最後に装飾を行えるので、無駄なHTMLの記述を省略することができるということが1つの意味としてあると思います。 :afterという記法はCSS2で導入されたもので、::afterはCSS3で導入された記法です。after疑似要素を使用するときは::afterと記述することをお勧めします。私の回答ではその2つが混在していたようですので、修正させていただきました。失礼しました。

ryo-dev

2017/03/13 13:55

修正ありがとうございます。after擬似要素は指定した要素の最後　といいますと、position: relative;に加えているということでしょうか？他サイトの説明読んでもいまいち理解できないんですよね・・・・

s8_chu

2017/03/13 14:32

position: relative;に加えている、という意味がわかりませんが、after擬似要素のpositionプロパティも初期値はstaticなのではないかと。

ryo-dev

2017/03/13 15:05

上書きってことですか？

s8_chu

2017/03/13 15:19

上書きとは？

ryo-dev

2017/03/13 16:08

positionは上書きされるんですか？

s8_chu

2017/03/13 16:13

私の回答文にあるコードでpositionは上書きされているのか、という質問でしょうか？

ryo-dev

2017/03/13 16:31

はい。そういうことです。

s8_chu

2017/03/13 16:49 編集

positionプロパティの上書きはしていないと思います。

ryo-dev

2017/03/13 17:13

それじゃあ２つ存在するということですか？

s8_chu

2017/03/13 17:18

何が2つ存在すると言いたいのですか？

ryo-dev

2017/03/13 17:21

position: relative;　と　position: absolute;です。

s8_chu

2017/03/13 17:31

指定した要素の最後に、という言い方が誤解を与えてしまったかもしれません。失礼しました。after疑似要素は指定した要素に仮想的な最後の子要素を作り出してスタイルシートの設定を適用するので、popupクラスのafter疑似要素はpopupクラスの子要素という扱いになります。なので、positionプロパティは上書きされず、それぞれがちゃんと適用されます。

ryo-dev

2017/03/14 06:11

なるほどわかりました。ありがとうございました。非常に勉強になりました。

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