2026-css-anchor-positioning/anchor-size-calc.html at main · codegrid/2026-css-anchor-positioning · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>アイコンの3倍の高さのツールチップ</title>
  <style>
    *, *::before, *::after {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: sans-serif;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f5f5f5;
    }

    .anchor {
      anchor-name: --my-anchor;
      width: 40px;
      height: 40px;
      padding: 0;
      background: none;
      border: none;
      cursor: pointer;
      color: #1a73e8;
    }

    .anchor svg {
      width: 100%;
      height: 100%;
      fill: currentColor;
    }

    .tooltip {
      position: absolute;
      position-anchor: --my-anchor;
      position-area: center right;
      height: calc(anchor-size(height) * 3); /* アンカーの高さの3倍 */
      width: 200px;
      margin: 12px;
      padding: 8px 16px;
      background-color: #333;
      color: #fff;
      border-radius: 4px;
    }

    .tooltip p {
      height: 100%;
      margin: 0;
      overflow: auto;
    }

    /* 吹き出しの三角（左向き） */
    .tooltip::before {
      content: "";
      position: absolute;
      left: -6px;
      top: 50%;
      translate: 0 -50%;
      border: 6px solid transparent;
      border-left: none;
      border-right-color: #333;
    }
  </style>
</head>
<body>
  <button class="anchor" type="button">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" aria-label="ヘルプ">
      <!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.-->
      <path d="M320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM320 240C302.3 240 288 254.3 288 272C288 285.3 277.3 296 264 296C250.7 296 240 285.3 240 272C240 227.8 275.8 192 320 192C364.2 192 400 227.8 400 272C400 319.2 364 339.2 344 346.5L344 350.3C344 363.6 333.3 374.3 320 374.3C306.7 374.3 296 363.6 296 350.3L296 342.2C296 321.7 310.8 307 326.1 302C332.5 299.9 339.3 296.5 344.3 291.7C348.6 287.5 352 281.7 352 272.1C352 254.4 337.7 240.1 320 240.1zM288 432C288 414.3 302.3 400 320 400C337.7 400 352 414.3 352 432C352 449.7 337.7 464 320 464C302.3 464 288 449.7 288 432z"/>
    </svg>
  </button>
  <div class="tooltip">
    <p>ここにツールチップの説明テキストが入ります。ある程度長いテキストを入れて、アイコンの高さの3倍という制約でスクロールが発生することを示します。テキストをさらに続けて、スクロールバーが表示されるくらいの長さにします。</p>
  </div>
</body>
</html>