2026-css-anchor-positioning/position-try-flip.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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!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>flip-inlineでツールチップを反転させる</title>
  <style>
    *, *::before, *::after {
      box-sizing: border-box;
    }

    html {
      height: 350px;
    }

    body {
      margin: 0;
      height: 350px;
      overflow: hidden;
      font-family: sans-serif;
      background-color: #f5f5f5;
      display: grid;
      grid-template-rows: 1fr 1fr;
    }

    .col {
      position: relative;
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 16px;
      gap: 12px;
    }

    /* 上行：アンカーを左端に配置 */
    .col-left {
      justify-content: flex-start;
    }

    /* 下行：アンカーを右端に配置 */
    .col-right {
      justify-content: flex-end;
    }

    /* 行の区切り線 */
    .col + .col {
      border-top: 1px solid #c4d4e8;
    }

    .col-label {
      position: absolute;
      top: 8px;
      left: 12px;
      font-size: 12px;
      color: #555;
      margin: 0;
    }

    .anchor {
      padding: 8px 14px;
      background-color: #1a73e8;
      color: #fff;
      border: none;
      border-radius: 4px;
      font-size: 13px;
      cursor: pointer;
      white-space: nowrap;
    }

    .anchor-a { anchor-name: --anchor-a; }
    .anchor-b { anchor-name: --anchor-b; }

    /* position: fixed でIMCB = iframeのビューポート */
    .tooltip {
      position: fixed;
      position-area: center right;
      position-try-fallbacks: flip-inline;
      margin: 0 0 0 8px;
      padding: 8px 12px;
      background-color: #333;
      color: #fff;
      border-radius: 4px;
      font-size: 12px;
      white-space: nowrap;
    }

    .tooltip-a { position-anchor: --anchor-a; }
    .tooltip-b { position-anchor: --anchor-b; }
  </style>
</head>
<body>
  <!-- 上行：アンカーが左端 → 右にスペースあり → 右に表示 -->
  <div class="col col-left">
    <button class="anchor anchor-a">アンカー要素</button>
    <p class="col-label">アンカーが左端 → 右に表示</p>
  </div>

  <!-- 下行：アンカーが右端 → 右にスペースなし → flip-inlineで左に反転 -->
  <div class="col col-right">
    <p class="col-label">アンカーが右端 → flip-inlineで左に反転</p>
    <button class="anchor anchor-b">アンカー要素</button>
  </div>

  <!-- position: fixed のツールチップ（body直下に配置） -->
  <div class="tooltip tooltip-a">ツールチップ</div>
  <div class="tooltip tooltip-b">ツールチップ</div>
</body>
</html>