JavaScriptなしでダイアログやツールチップを表示する【popuptoggletarget/popuphovertarget】

[chrome://flags](chrome://flags/#enable-experimental-web-platform-features) を開き`Experimental Web Platform features`を`Enabled`にして再起動(Chrome110から普通に使えるようになります)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/ca3f3579-984f-bb2a-7635-eff7cc4cfee8.png)

https://chromestatus.com/feature/5463833265045504

# ダイアログを表示する

![ezgif-4-92cad4d461.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/a10aab99-51c8-2f6f-8eb0-29cd43583ac3.gif)

```html
<div id="ダイアログ1" popup>ダイアログの内容</div>
<button popuptoggletarget="ダイアログ1">ダイアログを開閉する</button>
```

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="xxjpNaG" data-user="04" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/04/pen/xxjpNaG">
  Untitled</a> by John Doe (<a href="https://codepen.io/04">@04</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# ツールチップを表示する

![ezgif-4-f015f14a87.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/b339c71d-8bae-2966-f75e-17d031a874dd.gif)


```html
<div id="ツールチップ1" popup>ツールチップの内容</div>
<button popuphovertarget="ツールチップ1">ツールチップを表示する</button>
```

<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="JjvMqzX" data-user="04" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/04/pen/JjvMqzX">
  ツールチップ</a> by John Doe (<a href="https://codepen.io/04">@04</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

# その他

通知やトーストも表示できます。

https://developer.chrome.com/blog/pop-ups-theyre-making-a-resurgence/

## アンカー

![ezgif-4-1b9ec9099c.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/0740dbca-5428-6b2e-b4b4-bcc283534a83.gif)

https://developer.chrome.com/blog/pop-ups-theyre-making-a-resurgence/#anchoring-under-development

## 通知

![ezgif-4-eea17216be.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/c8b39e13-3929-325c-8f0b-fba298b3807d.gif)

https://developer.chrome.com/blog/pop-ups-theyre-making-a-resurgence/#notifications

## トースト

![ezgif-4-f9a2d51b82.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/ca769adb-d803-03eb-c888-a0d6efaa8f94.gif)

https://developer.chrome.com/blog/pop-ups-theyre-making-a-resurgence/#toasts

## 入れ子のメニュー

![ezgif-4-b3a80bf006.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/9718770c-dce1-c8fc-6f22-6b8fb5a96124.gif)

https://developer.chrome.com/blog/pop-ups-theyre-making-a-resurgence/#nested-menu

## メディア

![ezgif-4-94ee63f63c.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/9917b040-44c9-a64e-25ad-b640e31f81ce.gif)

https://developer.chrome.com/blog/pop-ups-theyre-making-a-resurgence/#media-pop-up

## Wikiのポップアップ

![ezgif-4-5c0d0bf731.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/86c1e2ec-c254-f836-82f9-6d4eebc20327.gif)

https://developer.chrome.com/blog/pop-ups-theyre-making-a-resurgence/#wiki-style-pop-ups

## ナビゲーションドロワー

![ezgif-4-5747157d27.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/35979431-ed5d-db73-d563-de2216bc04bd.gif)

https://developer.chrome.com/blog/pop-ups-theyre-making-a-resurgence/#navigation-drawer

## バックドロップ

![ezgif-4-d7eba949ed.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/161940f6-2e67-6d8f-c721-9cb003245755.gif)

https://developer.chrome.com/blog/pop-ups-theyre-making-a-resurgence/#managing-backdrops

## カスタムカーソル

![ezgif-4-1b3ef77dfe.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/643b51c2-2139-9ac2-4b7d-fa71c74cbdd5.gif)

https://developer.chrome.com/blog/pop-ups-theyre-making-a-resurgence/#custom-cursor-pop-up

## アクションシート

![ezgif-4-6802d7ed31.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/ab43048e-0423-5590-75e4-46c44169f51c.gif)

https://developer.chrome.com/blog/pop-ups-theyre-making-a-resurgence/#actionsheet-pop-up

## キーボードポップアップ

![ezgif-4-6c36ff90a5.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/64eaef29-9474-72ca-e81d-dfea18b6a735.gif)

https://developer.chrome.com/blog/pop-ups-theyre-making-a-resurgence/#keyboard-activated-pop-up

## 時間指定ポップアップ

![ezgif-4-162ea579dc.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/739cd983-47e0-cb5a-fc6a-7742465505d0.gif)

https://developer.chrome.com/blog/pop-ups-theyre-making-a-resurgence/#timed-pop-up

## スクリーンセーバー

![ezgif-4-1abc38b7c2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/9b4cc427-0ed2-1b14-b61b-b46eea39cf68.gif)

https://developer.chrome.com/blog/pop-ups-theyre-making-a-resurgence/#screensaver

## キャレット

![ezgif-4-c8d506fde5.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/6315505f-eb55-b18a-9f11-1141e309f508.gif)

https://developer.chrome.com/blog/pop-ups-theyre-making-a-resurgence/#caret-follow

## ファブ

![ezgif-4-1e4db405f8.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/208363/fb4b793a-856a-3999-d6c3-1296770f377a.gif)

https://developer.chrome.com/blog/pop-ups-theyre-making-a-resurgence/#floating-action-button-menu

# 参考

https://www.youtube.com/watch?v=35mN6UKGEbA