{"id":2778,"date":"2024-04-25T14:10:42","date_gmt":"2024-04-25T05:10:42","guid":{"rendered":"https:\/\/uda2.com\/blog\/?p=2778"},"modified":"2024-04-25T14:27:38","modified_gmt":"2024-04-25T05:27:38","slug":"css_tooltip","status":"publish","type":"post","link":"https:\/\/uda2.com\/blog\/css_tooltip\/","title":{"rendered":"CSS\u3060\u3051\u3067\u30c8\u30b0\u30eb\u5f0fTooltip 2024"},"content":{"rendered":"\n<p>\u30ab\u30fc\u30bd\u30eb\u5408\u308f\u305b\u305f\u3089\u305d\u306e\u8aac\u660e\u304c\u5439\u304d\u51fa\u3057\u3067\u73fe\u308c\u308bToopTip\u3068\u3044\u3046\u3082\u306e\u304c\u3042\u308a\u307e\u3059\u304c\u3001\u305d\u306e\u6027\u8cea\u4e0a\u30b9\u30de\u30db\u3084\u30b9\u30af\u30ea\u30fc\u30f3\u30ea\u30fc\u30c0\u30fc\u3068\u76f8\u6027\u304c\u60aa\u304b\u3063\u305f\u306e\u3067\u3059\u304c\u30af\u30ea\u30c3\u30af\u5f0f\u306b\u3059\u308b\u4e8b\u3067\u89e3\u6c7a\u3057\u305f\u3082\u306e\u3092HTML\u3068CSS\u3060\u3051\u3067\u4f5c\u3063\u3066\u307f\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<p><a href=\"https:\/\/uda2.com\/testbox\/tooltip.html\" target=\"_blank\" rel=\"noopener nofollow\" title=\"\">https:\/\/uda2.com\/testbox\/tooltip.html<\/a><\/p>\n\n\n\n<p>\u4e00\u822c\u7684\u306a\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7\u3068\u540c\u3058\u304f\u30ea\u30f3\u30af\u6587\u5b57\u306b\u30db\u30d0\u30fc\u3057\u305f\u3089\u958b\u9589\u3057\u307e\u3059\u3002<br>\u30a2\u30a4\u30b3\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u30c8\u30b0\u30eb\u5f0f\u3067\u958b\u9589\u3057\u307e\u3059\u3002<br>\u203b\u4e0a\u306e\u30b5\u30f3\u30d7\u30eb\u306fHTML\u3084CSS\uff08\u30a2\u30a4\u30b3\u30f3\u3082\u542b\u3080\uff09\u3092\u3057\u3087\u3046\u3088\u3046\u500b\u4eba\u554f\u308f\u305a\u52dd\u624b\u306b\u4f7f\u3063\u3066OK\u3067\u3059\u3002<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>\u307e\u305a\u3001\u300c\u305d\u3046\u3044\u3048\u3070\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7\u3063\u3066\u30a2\u30af\u30bb\u30b7\u30d3\u30ea\u30c6\u30a3\u7684\u306b\u4f7f\u3048\u306a\u3044\u3088\u306a\u30fc\u300d\u3068\u601d\u3063\u3066\u691c\u7d22\u3057\u3066\u305f\u3089\u3002<br>\u30af\u30ea\u30c3\u30af\u3067\u8868\u793a\u3055\u305b\u308b\u65b9\u6cd5\u306e\u6bd4\u8f03\u306b\u3064\u3044\u3066\u66f8\u304b\u308c\u3066\u305f\u30c4\u30a4\u30fc\u30c8\u3092\u898b\u304b\u3051\u305f\u306e\u3067\u3059\u304c\u3001\u30db\u30d0\u30fc\u5f0f\u306e\u30e1\u30ea\u30c3\u30c8\u306b\u300ccss\u3060\u3051\u3067\u4f5c\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u300d\u3068\u66f8\u304b\u308c\u3066\u305f\u306e\u306b\u89e6\u767a\u3055\u308c\u300c\u4eca\u306a\u3089\u30af\u30ea\u30c3\u30af\u5f0f\u3082\u51fa\u6765\u305d\u3046\u3084\u306a\u300d\u3068\u3084\u3063\u3066\u307f\u305f\u3002<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-twitter wp-block-embed-twitter\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"twitter-tweet\" data-width=\"500\" data-dnt=\"true\"><p lang=\"ja\" dir=\"ltr\">\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7\u306eUI\u306b\u95a2\u3057\u3066\u3001\u30a2\u30f3\u30b1\u30fc\u30c8\u3067\u306f\u300c\u30db\u30d0\u30fc\u3067\u8868\u793a\u300d\u304c\u512a\u52e2\u3060\u3063\u305f\u3051\u308c\u3069\u3001\u6539\u3081\u3066\u305d\u308c\u305e\u308c\u306e\u30e1\u30ea\u30c3\u30c8\u3092\u8003\u3048\u305f\u306e\u3067\u3001\u5099\u5fd8\u9332\u3068\u3057\u3066\u307e\u3068\u3081\u3066\u304a\u3044\u305f\u3002<br><br>\u3046\u3061\u306f\u30db\u30d0\u30fc\u304b\u306a\u3001\u3068\u3044\u3046\u7d50\u8ad6\u306b\u3002<br>\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7\u306e\u4e2d\u8eab\u304c\u9577\u3081\u3060\u3063\u305f\u308a\u3001\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u30c7\u30b6\u30a4\u30f3\u3060\u3063\u305f\u308a\u3059\u308b\u3068\u30af\u30ea\u30c3\u30af\u306b\u8ecd\u914d\u304c\u4e0a\u304c\u308b\u304b\u3082\u3002 <a href=\"https:\/\/t.co\/azzpTzKuFA\">pic.twitter.com\/azzpTzKuFA<\/a><\/p>&mdash; fumi \/ Designer (@fmngok) <a href=\"https:\/\/twitter.com\/fmngok\/status\/1265171595649138688?ref_src=twsrc%5Etfw\">May 26, 2020<\/a><\/blockquote><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n<\/div><\/figure>\n\n\n\nCSS<pre><code>label.htooltip {\n    position: relative;\n    display: inline-block;\n    width: 1em;\n    height: 1em;\n    background: url(&quot;data:image\/svg+xml;charset=utf8,%3Csvg xmlns=%22http:\/\/www.w3.org\/2000\/svg%22 viewBox=%220 0 16 16%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23F00;stroke-width:0px;%7D%3C\/style%3E%3C\/defs%3E%3Cpolygon class=%22cls-1%22 points=%228.02 16 5.98 12.96 10.06 12.96 8.02 16%22\/%3E%3Cpath class=%22cls-1%22 d=%22M14.7,0H1.3C.58,0,0,.58,0,1.3v10.4c0,.72.58,1.3,1.3,1.3h13.4c.72,0,1.3-.58,1.3-1.3V1.3c0-.72-.58-1.3-1.3-1.3ZM13.1,5.76l-1.25,1.25-.03-.03c-.21.06-.65-.13-1.18-.52l-1.69,3.87h0s0,0,0,0c-.25.25-1.12-.22-2.1-1.06l-2.45,1.69s-.19-.06-.34-.21c-.15-.15-.24-.3-.21-.34l1.69-2.45c-.84-.98-1.31-1.85-1.06-2.1,0,0,0,0,.01,0h0s3.87-1.7,3.87-1.7c-.39-.53-.58-.97-.52-1.18l-.03-.03,1.25-1.25c.26-.26,1.38.43,2.5,1.55,1.12,1.12,1.81,2.24,1.55,2.5Z%22\/%3E%3C\/svg%3E&quot;) center center no-repeat;\n    background-size: contain;\n    filter: saturate(0%);\n}\nlabel.htooltip:has(input[type=&quot;checkbox&quot;]:checked) {\n    filter: saturate(100%);\n}\nlabel.htooltip p,\nlabel.htooltip p::before {\n    position: absolute;\n    left: 50%;\n    display: block;\n    background-color: #212121;\n}\nlabel.htooltip p {\n    margin: 0;\n    padding: 7px;\n    font-size: 12px;\n    line-height: 1.2em;\n    color: #fff;\n    border-radius: 3px;\n    width: 100px;\n    bottom: calc(100% + 10px);\n    box-sizing: border-box;\n    box-shadow: 0 0 7px rgba(0, 0, 0, 0.35);\n    opacity: 0;\n    transform: translate(-50%, 10px);\n    transition: transform .3s ease-in-out,opacity .3s ease-in-out;\n    pointer-events: none;\n}\nlabel.htooltip p::before {\n    content: &quot;&quot;;\n    bottom: -10px;\n    width: 14px;\n    height: 10px;\n    clip-path: polygon(50% 100%, 100% 0%, 0% 0%);\n    transform: translate(-50%, 0);\n}\nlabel.htooltip&gt;input[type=&quot;checkbox&quot;] {\n    display: none;\n}\nlabel.htooltip {\n    opacity: 1;\n}\nlabel.htooltip:has(input[type=&quot;checkbox&quot;]:checked) p {\n    transform: translate(-50%, 0);\n    opacity: 1;\n    pointer-events: auto;\n}\n@media (hover: hover) or (pointer: fine) {\n    label.htooltip:hover {\n        filter: saturate(100%);\n    }\n    label.htooltip:has(input[type=&quot;checkbox&quot;]:checked):hover {\n        opacity: 0.8;\n    }\n    a:hover+label.htooltip p,\n    label.htooltip:hover p {\n        transform: translate(-50%, 0);\n        opacity: 1;\n        pointer-events: auto;\n    }\n}<\/code><\/pre>\n\n\n\nHTML<pre><code>&lt;a href=&quot;https:\/\/uda2.com\/blog\/css_tooltip\/&quot;&gt;\u30ea\u30f3\u30af\u30c6\u30ad\u30b9\u30c8&lt;\/a&gt;\n&lt;label class=&quot;htooltip&quot; aria-label=&quot;\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7&quot;&gt;&lt;input type=&quot;checkbox&quot;&gt;&lt;p&gt;\u3053\u3053\u306b\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7\u306e\u5185\u5bb9\u3092\u66f8\u304f&lt;\/p&gt;&lt;\/label&gt;\n<\/code><\/pre>\n\n\n\n<p>\u8a2d\u7f6e\u306f\u30bd\u30fc\u30b9\u306eCSS\u3092\u30b3\u30d4\u30da\u3057\u305f\u4e0a\u3067\u3001ToolTip\u3092\u4ed8\u3051\u305f\u3044\u30ea\u30f3\u30af\u306e\u30bf\u30b0\u306e\u305d\u3070\u306b\u300c<strong>&lt;label class=&#8221;htooltip&#8221; aria-label=&#8221;\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7&#8221;&gt;&lt;input type=&#8221;checkbox&#8221;&gt;&lt;p&gt;\u3053\u3053\u306b\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7\u306e\u5185\u5bb9\u3092\u66f8\u304f&lt;\/p&gt;&lt;\/label&gt;<\/strong>\u300d\u3068\u66f8\u3044\u3066\u304f\u3060\u3055\u3044\u3002<br>\u8fd1\u304f\u306b\u8907\u6570\u306e\u30ea\u30f3\u30af\u304c\u3042\u308b\u5834\u5408\u306f\u5404\u30ea\u30f3\u30af\u3068label\u306e\u30bb\u30c3\u30c8\u3092\u4f55\u304b\u3057\u3089\u3067\u62ec\u3063\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<p>\u4e00\u822c\u7684\u306a\u30c4\u30fc\u30eb\u30c1\u30c3\u30d7\u3068\u540c\u3058\u304f\u30ea\u30f3\u30af\u6587\u5b57\u306b\u30db\u30d0\u30fc\u3057\u305f\u3089\u958b\u9589\u3057\u307e\u3059\u3002<br>\u30a2\u30a4\u30b3\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u30c8\u30b0\u30eb\u5f0f\u3067\u958b\u9589\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30db\u30d0\u30fc\u306e\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u5165\u308c\u308b\u3068\u30b9\u30de\u30db\u3067\u306e\u6319\u52d5\u304c\u304a\u304b\u3057\u304f\u306a\u308b\u306e\u3067\u30e1\u30c7\u30a3\u30a2\u30af\u30a8\u30ea\u300c<strong>@media (hover: hover) or (pointer: fine)<\/strong>\u300d\u3067\u30d1\u30bd\u30b3\u30f3\u3067\u306e\u307f\u30db\u30d0\u30fc\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u3059\u308b\u3088\u3046\u306b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<p>\u30a2\u30af\u30bb\u30b7\u30d3\u30ea\u30c6\u30a3\u306b\u3082\u914d\u616e\u3059\u308b\u70ba\u306b<strong>visibility:hidden;<\/strong>\u3092\u4f7f\u308f\u305a\u306b\u300c<strong>opacity: 0;<\/strong>\u300d\u3068\u300c<strong>pointer-events: none;<\/strong>\u300d\u3067\u96a0\u3057\u3066\u3044\u307e\u3059\u3002<br>\u3053\u308c\u3067\u30d6\u30e9\u30a6\u30b6\u4e0a\u304b\u3089\u306f\u6d88\u3048\u308b\u3051\u3069\u30b9\u30af\u30ea\u30fc\u30f3\u30ea\u30fc\u30c0\u30fc\u3067\u306f\u8aad\u3081\u308b\u3068\u3044\u3046\u72b6\u614b\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u30ab\u30fc\u30bd\u30eb\u5408\u308f\u305b\u305f\u3089\u305d\u306e\u8aac\u660e\u304c\u5439\u304d\u51fa\u3057\u3067\u73fe\u308c\u308bToopTip\u3068\u3044\u3046\u3082\u306e\u304c\u3042\u308a\u307e\u3059\u304c\u3001\u305d\u306e\u6027\u8cea\u4e0a\u30b9\u30de\u30db\u3084\u30b9\u30af\u30ea\u30fc\u30f3\u30ea\u30fc\u30c0\u30fc\u3068\u76f8\u6027\u304c\u60aa\u304b\u3063\u305f\u306e\u3067\u3059\u304c\u30af\u30ea\u30c3\u30af\u5f0f\u306b\u3059\u308b\u4e8b\u3067\u89e3\u6c7a\u3057\u305f\u3082\u306e\u3092HTML\u3068CSS\u3060\u3051\u3067\u4f5c\u3063\u3066\u307f\u307e\u3057\u305f\u3002 ht<\/p>\n","protected":false},"author":2,"featured_media":2787,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[205],"tags":[35,57,382,383,245],"class_list":["post-2778","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-creatorsdiary","tag-css","tag-html","tag-tooltip","tag-383","tag-245"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/posts\/2778","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/comments?post=2778"}],"version-history":[{"count":11,"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/posts\/2778\/revisions"}],"predecessor-version":[{"id":2790,"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/posts\/2778\/revisions\/2790"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/media\/2787"}],"wp:attachment":[{"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/media?parent=2778"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/categories?post=2778"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/uda2.com\/blog\/wp-json\/wp\/v2\/tags?post=2778"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}