[ { "id": 2546, "title": "ホバーツールチップ", "icon": "<\/svg>", "keywords": [ "ホバーツールチップ", "チップス" ], "slug": "lazyblock\/hover-tooltip", "description": "", "category": "lazyblocks", "category_label": "lazyblocks", "supports": { "customClassName": true, "anchor": false, "html": false, "multiple": true, "inserter": true, "reusable": true, "color": false, "layout": false, "shadow": false, "spacing": false, "dimensions": false, "typography": false, "lock": true, "align": [ "wide", "full" ], "ghostkit": { "effects": false, "position": false, "spacings": false, "frame": false, "transform": false, "customCSS": false, "display": false, "attributes": false } }, "controls": { "control_86bb7543eb": { "type": "panel", "name": "tooltips-setting", "default": "", "label": "編集", "help": "", "child_of": "", "placement": "content", "group": "settings", "width": "100", "hide_if_not_selected": "false", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "icon": "<svg xmlns="http:\/\/www.w3.org\/2000\/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"\/><\/svg>", "initial_open": "true", "endpoint": "false", "placeholder": "", "characters_limit": "" }, "control_8efa3a41d8": { "type": "rich_text", "name": "paragraph_text", "default": "ツールチップ対象", "label": "段落テキスト", "help": "", "child_of": "", "placement": "content", "group": "settings", "width": "100", "hide_if_not_selected": "false", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "placeholder": "", "characters_limit": "" }, "control_4e6bcc409f": { "type": "repeater", "name": "tooltips", "default": "ここに補足説明文を入力します。", "label": "ツールチップ設定", "help": "ツールチップ内に表示されるテキストです。", "child_of": "", "placement": "content", "group": "settings", "width": "100", "hide_if_not_selected": "false", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "rows_min": "", "rows_max": "", "rows_label": "", "rows_add_button_label": "", "rows_collapsible": "true", "rows_collapsed": "true", "placeholder": "", "characters_limit": "" }, "control_9b4bff4889": { "type": "text", "name": "keyword", "default": "", "label": "対象キーワード", "help": "", "child_of": "control_4e6bcc409f", "placement": "content", "group": "settings", "width": "100", "hide_if_not_selected": "false", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "placeholder": "", "characters_limit": "" }, "control_45ea564dfd": { "type": "textarea", "name": "description", "default": "", "label": "補足説明", "help": "", "child_of": "control_4e6bcc409f", "placement": "content", "group": "settings", "width": "100", "hide_if_not_selected": "false", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "placeholder": "", "characters_limit": "" }, "control_d62b3649ab": { "type": "select", "name": "position", "default": "", "label": "表示位置", "help": "", "child_of": "control_4e6bcc409f", "placement": "content", "group": "settings", "width": "100", "hide_if_not_selected": "false", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "choices": [ { "label": "上", "value": "top" }, { "label": "下", "value": "bottom" } ], "allow_null": "false", "multiple": "false", "output_format": "", "placeholder": "", "characters_limit": "" }, "control_257a304827": { "type": "toggle", "name": "first_only", "default": "", "label": "最初の1回のみ適用", "help": "", "child_of": "control_4e6bcc409f", "placement": "content", "group": "settings", "width": "100", "hide_if_not_selected": "false", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "checked": "true", "alongside_text": "", "placeholder": "", "characters_limit": "" }, "control_21ca004e6a": { "type": "text", "name": "link_url", "default": "", "label": "詳細リンクURL", "help": "", "child_of": "control_4e6bcc409f", "placement": "content", "group": "settings", "width": "100", "hide_if_not_selected": "false", "required": "false", "translate": "false", "save_in_meta": "false", "save_in_meta_name": "", "placeholder": "", "characters_limit": "" } }, "code": { "output_method": "php", "editor_html": "", "editor_callback": "", "frontend_html": "【注釈付き段落】ここにテキストを入力してください。<\/p>';\n }\n return;\n}\n\n\/\/ 標準の文字装飾のHTMLを許可する\n$text = wp_kses_post($text);\n\n\/\/ ツールチップの置換処理\nif ( !empty($tooltips) && is_array($tooltips) ) {\n foreach ( $tooltips as $tooltip ) {\n $keyword = isset($tooltip['keyword']) ? esc_html($tooltip['keyword']) : '';\n $desc = isset($tooltip['description']) ? nl2br(esc_html($tooltip['description'])) : '';\n $first_only = isset($tooltip['first_only']) ? $tooltip['first_only'] : true; \n $link_url = isset($tooltip['link_url']) ? esc_url($tooltip['link_url']) : '';\n\n if ( $keyword !== '' && $desc !== '' ) {\n $link_html = '';\n if ( $link_url !== '' ) {\n $link_html = sprintf('詳細を読む ><\/a>', $link_url);\n }\n\n $tooltip_html = sprintf(\n '%s<\/span><\/svg>%s%s<\/span><\/span><\/span>',\n $keyword,\n $desc,\n $link_html\n );\n \n $pattern = '\/' . preg_quote($keyword, '\/') . '\/u';\n $limit = $first_only ? 1 : -1;\n \n $replaced_text = preg_replace($pattern, $tooltip_html, $text, $limit);\n if ( $replaced_text !== null ) {\n $text = $replaced_text;\n }\n }\n }\n}\n\n\/\/ 最終出力\necho '

' . $text . '<\/p>';\n?>\n", "frontend_callback": "", "show_preview": "always", "single_output": true }, "style": { "block": "\/* 段落全体の基本設定 *\/\n.lzb-annotated-paragraph {\n line-height: 1.8;\n margin-bottom: 1.5em;\n position: relative; \n z-index: 1; \n}\n\n\/* ホバー時のみ段落を最前面へ（SWELL文字被り防止） *\/\n.lzb-annotated-paragraph:hover,\n.lzb-annotated-paragraph:focus-within {\n z-index: 99999 !important;\n}\n\n\/* ツールチップの親コンテナ *\/\n.lzb-annotated-keyword {\n display: inline;\n}\n\n\/* キーワードの点線 *\/\n.lzb-tooltip-mark {\n border-bottom: 2px dotted #007cba;\n padding-bottom: 1px;\n}\n\n\/* アイコンのラッパー *\/\n.lzb-tooltip-icon-wrap {\n display: inline-block;\n position: relative;\n vertical-align: 0.55em; \n margin-left: -0.1em;\n margin-right: -0.25em; \n cursor: help;\n line-height: 1;\n}\n\n\/* フォーカス時の青枠を消す *\/\n.lzb-tooltip-icon-wrap:focus {\n outline: none;\n}\n\n\/* タップ領域（バリア） *\/\n.lzb-tooltip-icon-wrap::before {\n content: \"\";\n position: absolute;\n top: -15px; right: -15px; bottom: -15px; left: -15px;\n z-index: 1;\n}\n\n\/* SVGアイコン *\/\n.lzb-tooltip-icon {\n width: 14px;\n height: 14px;\n fill: #007cba !important; \n opacity: 0.9;\n display: block;\n transition: opacity 0.2s ease, transform 0.2s ease;\n position: relative;\n z-index: 2;\n}\n\n.lzb-tooltip-icon-wrap:hover .lzb-tooltip-icon,\n.lzb-tooltip-icon-wrap:focus .lzb-tooltip-icon {\n opacity: 1;\n transform: scale(1.1);\n}\n\n\/* -----------------------------------\n ツールチップ本体の基本設定\n------------------------------------ *\/\n.lzb-tooltip-box {\n position: absolute;\n z-index: 99999 !important;\n width: max-content;\n max-width: 260px;\n padding: 12px 14px;\n background-color: #2c3e50 !important;\n color: #ffffff !important;\n font-size: 0.85rem;\n font-weight: normal;\n line-height: 1.6;\n border-radius: 6px;\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);\n bottom: 100%;\n margin-bottom: 4px;\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;\n pointer-events: none;\n text-align: left;\n white-space: normal;\n}\n\n\/* 表示アクション *\/\n.lzb-tooltip-icon-wrap:hover .lzb-tooltip-box,\n.lzb-tooltip-icon-wrap:focus .lzb-tooltip-box {\n opacity: 1;\n visibility: visible;\n pointer-events: auto; \n}\n\n\/* 吹き出しのしっぽ（共通設定） *\/\n.lzb-tooltip-box::after {\n content: '';\n position: absolute;\n top: 100%;\n border-width: 6px;\n border-style: solid;\n border-color: #2c3e50 transparent transparent transparent !important;\n}\n\n\/* -----------------------------------\n 【JS連動】動的な位置計算デザイン\n------------------------------------ *\/\n\/* JSが「左半分にある」と判定した場合（右へ展開） *\/\n.lzb-tooltip-box.open-right {\n left: -10px;\n right: auto;\n transform: translate(0, -5px);\n}\n.lzb-tooltip-icon-wrap:hover .lzb-tooltip-box.open-right,\n.lzb-tooltip-icon-wrap:focus .lzb-tooltip-box.open-right {\n transform: translate(0, 0);\n}\n.lzb-tooltip-box.open-right::after {\n left: 14px; \/* アイコンの真下にくるようにしっぽを配置 *\/\n right: auto;\n}\n\n\/* JSが「右半分にある」と判定した場合（左へ展開） *\/\n.lzb-tooltip-box.open-left {\n left: auto;\n right: -10px;\n transform: translate(0, -5px);\n}\n.lzb-tooltip-icon-wrap:hover .lzb-tooltip-box.open-left,\n.lzb-tooltip-icon-wrap:focus .lzb-tooltip-box.open-left {\n transform: translate(0, 0);\n}\n.lzb-tooltip-box.open-left::after {\n left: auto;\n right: 14px; \/* アイコンの真下にくるようにしっぽを配置 *\/\n}\n\n\/* -----------------------------------\n 詳細リンクのデザイン\n------------------------------------ *\/\n.lzb-tooltip-link {\n display: block;\n margin-top: 8px;\n padding-top: 8px;\n border-top: 1px dashed rgba(255, 255, 255, 0.2);\n color: #66c0f4 !important;\n text-align: right;\n font-size: 0.8rem;\n font-weight: bold;\n text-decoration: none;\n transition: color 0.2s ease;\n}\n\n.lzb-tooltip-link:hover {\n color: #ffffff !important;\n text-decoration: underline;\n}\n\n\/* スマホ表示時の微調整 *\/\n@media screen and (max-width: 600px) {\n .lzb-tooltip-box {\n max-width: 240px; \/* 画面をはみ出さない安全幅 *\/\n }\n}\n", "editor": "" }, "script": { "view": "if (typeof window.lzbTooltipInit === 'undefined') {\n window.lzbTooltipInit = true;\n \n \/\/ マウスホバー、またはスマホのタッチ時に位置を計算\n ['mouseover', 'touchstart', 'focusin'].forEach(function(evt) {\n document.addEventListener(evt, function(e) {\n const wrap = e.target.closest('.lzb-tooltip-icon-wrap');\n if (!wrap) return;\n \n const box = wrap.querySelector('.lzb-tooltip-box');\n if (!box) return;\n\n \/\/ アイコンの画面上の座標と、スマホ画面の横幅を取得\n const rect = wrap.getBoundingClientRect();\n const viewportWidth = window.innerWidth;\n \n \/\/ 画面の「右半分」にあるか「左半分」にあるかを判定\n if (rect.left > (viewportWidth \/ 2)) {\n \/\/ 右側にある場合 → 左に展開（見切れ防止）\n box.classList.add('open-left');\n box.classList.remove('open-right');\n } else {\n \/\/ 左側にある場合 → 右に展開（見切れ防止）\n box.classList.add('open-right');\n box.classList.remove('open-left');\n }\n });\n });\n}\n" }, "styles": [ { "name": "", "label": "" } ], "condition": [], "edit_url": null, "provide_context_to_blocks": "", "custom_context_slug": "", "allowed_blocks": "", "ancestor": "" } ]