[ { "id": 2546, "title": "ホバーツールチップ_P-17", "icon": "", "keywords": [ "ホバーツールチップ", "チップス", "レイアウト・デザイン" ], "slug": "lazyblock/hover-tooltip", "description": "", "category": "Lazyblocks Pro", "category_label": "Lazyblocks Pro", "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": "", "placeholder": "", "characters_limit": "", "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>" }, "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": "", "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": "", "placeholder": "", "characters_limit": "", "choices": [ { "label": "上", "value": "top" }, { "label": "下", "value": "bottom" } ] }, "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": "", "placeholder": "", "characters_limit": "", "checked": "true" }, "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": "【注釈付き段落】ここにテキストを入力してください。

';\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('詳細を読む >', $link_url);\n }\n\n $tooltip_html = sprintf(\n '%s%s%s',\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 . '

';\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": "" } ]