Q&A
（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
また、プラグイン／ライブラリは公式配布サイトのURLを質問文に追記ください。（URLにはリンクを張ることができます）
前提・実現したいこと
tippy.jsを使ってツールチップを実装しています。
・1番目のボタンのツールチップは右
・2番目のボタンのツールチップは左
・3番目のボタンのツールチップは右
というように
個別に左右に表示するようにしたいです。
ちなみに4番目はツールチップなしです。
発生している問題・エラーメッセージ
以下のソースで設定すると全部右だしになったり、
idごとにスクリプトを書くと動作しなくなったり、
1つのボタンに左右表示されてしまったりで
うまくいきません。
どなたかご教授いただければ幸いです。
該当のソースコード
HTML
1<!doctype html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>無題ドキュメント</title> 6 7<style type="text/css"> 8 .tippy-popper { 9 max-width: 10000px !important; 10 }/*--ツールチップの幅を大きく*/ 11 12 .wrapper .identity-title { 13 position: absolute; 14 top: 60px; 15 text-align: center; 16 width: 100%; 17 } 18 .wrapper .identity-title ul { 19 font-size: 1em; 20 font-weight: bold; 21 margin: 0; 22 padding: 0; 23 width: 960px; } 24 .wrapper .identity-title ul li:nth-of-type(1) { 25 padding-bottom: 90px; } 26 .wrapper .identity-title ul li:nth-of-type(2) { 27 padding-bottom: 130px; } 28 .wrapper .identity-title ul li:nth-of-type(3) { 29 padding-bottom: 120px; } 30 31</style> 32 33</head> 34 35<body> 36 37<h1>demo-on-click</h1> 38 39<div class="wrapper"> 40 41<div style="display: none;"> 42 <div id="title1"> 43 <table class="philosophy"> 44 <caption>社訓・理念・VISION</caption> 45 <tbody> 46 <tr> 47 <td>社訓</td> 48 <td>理念・行動指針</td> 49 <td>＠＠＠＠＠＠＠</td> 50 </tr> 51 <tr> 52 <td>・誠実<br /> 53 ・技術<br /> 54 ・確実</td> 55 <td>安心で快適な<br />生活環境の創造</td> 56 <td>グループ総合力で<br />進化を遂げ<br />最強企業集団になる</td> 57 </tr> 58 <tr> 59 <td colspan="2">イノベーションとは「新結合」・「新機軸」そして<br />「自分が変わること」（in+novare＝innovate）</td> 60 <td>グループ各所の<br />アクションプラン</td> 61 </tr> 62 <tr> 63 <td>（創業の精神）会社の存続基盤</td> 64 <td>（ミッション）会社の持続性の基盤</td> 65 <td>（方向性）Vision for the Future</td> 66 </tr> 67 <tr class="text-left"> 68 <td colspan="3">＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠</td> 69 </tr> 70 </tbody> 71 </table> 72 </div> 73 <div id="title2"> 74 <div class="TextBox-left"> 75 <p>＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠</p> 76 <h2>「グループ行動指針」</h2> 77 <p>●独創自立<br /> 78 ●高い品質と顧客満足<br /> 79 ●マーケット志向とグローバリゼーション<br /> 80 ●コンプライアンス<br /> 81 ●環境保全</p> 82 </div> 83 </div> 84 <div id="title3"> 85 <div class="TextBox-right"> 86 <p>＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠</p> 87 <h2>「＠＠＠＠＠＠＠＠＠＠＠」</h2> 88 <p>●既存事業における収益力No.1<br /> 89 ●成長事業へのチャレンジ<br /> 90 ●社員のモチベーション向上</p> 91 </div> 92 </div> 93</div> 94 95 96<div class="identity-title"> 97 <ul> 98 <li><button data-template="title1">社訓<br />・<br />グループ理念</button></li> 99 <li><button data-template="title2">グループ行動指針</button></li> 100 <li><button data-template="title3">＠＠＠＠＠＠＠</button></li> 101 <li><button>中期経営計画</button></li> 102 </ul> 103</div><!--identity-title--> 104 105</div><!--wrapper--> 106 107<script src="https://unpkg.com/@popperjs/core@2"></script> 108<script src="https://unpkg.com/tippy.js@6"></script> 109 110<script> 111 tippy('button', { 112 content(reference) { 113 const id = reference.getAttribute('data-template'); 114 const template = document.getElementById(id); 115 return template.innerHTML; 116 }, 117 allowHTML: true, 118 placement: 'right-end', 119 }); 120</script> 121</body> 122</html>
試したこと
JavaScript
1<script> 2 tippy('button', { 3 content(reference) { 4 const id = reference.getAttribute('data-template'); 5 const template = document.getElementById('title1'); 6 return template.innerHTML; 7 }, 8 allowHTML: true, 9 placement: 'right-end', 10 }); 11 tippy('button', { 12 content(reference) { 13 const id = reference.getAttribute('data-template'); 14 const template = document.getElementById('title2'); 15 return template.innerHTML; 16 }, 17 allowHTML: true, 18 placement: 'left-end', 19 }); 20</script>
これだと1つのボタンに左右にツールチップが表示されてしまいます。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
解答欄に、一応各ボタンへの方向付けまでは正常動作し、一旦は正常終了するスクリプトにしたものを投稿してみました。ただ、マウスホバーでツールチップを出そうとするとエラーになるので、よかったら添削していただけると幸いです。
kei344様
始めてteratailに質問する＆プログラムちょーぜつ初心者なのでコードブロックもなんなのかわかりませんでした。すいません。修正してみましたがまちがっていましたら再度ご示唆いただければ幸いです。
nekora様
ご回答ありがとうございます。
コードブロックをつかったらインデントがそのまま貼り付けられました。
ご指摘ありがとうございます。
こちらのコードをもとにJavaScriptの有識者の諸先輩方からご示唆いただければ幸いです。
回答2件
0
ベストアンサー
data-tippy-placement 属性で指定してみては。
HTML
1<li><button data-template="title1" data-tippy-placement="left-end">社訓<br />・<br />グループ理念</button></li> 2<li><button data-template="title2" data-tippy-placement="bottom-end">グループ行動指針</button></li> 3<li><button data-template="title3" data-tippy-placement="top-end">＠＠＠＠＠＠＠</button></li>
js
1 tippy('button', { 2 content(reference) { 3 const id = reference.getAttribute('data-template'); 4 const template = document.getElementById(id); 5 return template.innerHTML; 6 }, 7 allowHTML: true, 8 // placement: 'right-end', 9 }); 10```**動くサンプル：**[https://jsfiddle.net/h7eq8ct5/](https://jsfiddle.net/h7eq8ct5/) 11 12--- 13 14【Customization | Tippy.js】 15[https://atomiks.github.io/tippyjs/v6/customization/](https://atomiks.github.io/tippyjs/v6/customization/)
投稿2020/06/25 15:47
総合スコア69458
kei344様
ご回答ありがとうございます。
JavaScriptに書くのではなくHTMLのコード内で指定してしまうんですね！
これなら簡単ですね。
ありがとうございました。
0
あらかじめ、お詫びしておきます。以下のコードでは完全な解決には至っていません。
とりあえずの方向性を示せたらと思い、あえて公開します。
JavaScriptの有識者の諸先輩方、このコードをたたき台にして、完全動作するコードへ編集して行っていただけるとありがたいです。
HTML
1<!doctype html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>無題ドキュメント</title> 6 7 <style type="text/css"> 8 .tippy-popper { 9 max-width: 10000px !important; 10 }/*--ツールチップの幅を大きく*/ 11 12 .wrapper .identity-title { 13 position: absolute; 14 top: 60px; 15 text-align: center; 16 width: 100%; 17 } 18 .wrapper .identity-title ul { 19 font-size: 1em; 20 font-weight: bold; 21 margin: 0; 22 padding: 0; 23 width: 960px; 24 } 25 .wrapper .identity-title ul li:nth-of-type(1) { 26 padding-bottom: 90px; 27 } 28 .wrapper .identity-title ul li:nth-of-type(2) { 29 padding-bottom: 130px; 30 } 31 .wrapper .identity-title ul li:nth-of-type(3) { 32 padding-bottom: 120px; 33 } 34 </style> 35</head> 36 37<body> 38 39<h1>demo-on-click</h1> 40 41 <div class="wrapper"> 42 43 <div style="display: none;"> 44 <div id="title1" direction="right-end"> 45 <table class="philosophy"> 46 <caption>社訓・理念・VISION</caption> 47 <tbody> 48 <tr> 49 <td>社訓</td> 50 <td>理念・行動指針</td> 51 <td>＠＠＠＠＠＠＠</td> 52 </tr> 53 <tr> 54 <td>・誠実<br /> 55 ・技術<br /> 56 ・確実</td> 57 <td>安心で快適な<br />生活環境の創造</td> 58 <td>グループ総合力で<br />進化を遂げ<br />最強企業集団になる</td> 59 </tr> 60 <tr> 61 <td colspan="2">イノベーションとは「新結合」・「新機軸」そして<br />「自分が変わること」（in+novare＝innovate）</td> 62 <td>グループ各所の<br />アクションプラン</td> 63 </tr> 64 <tr> 65 <td>（創業の精神）会社の存続基盤</td> 66 <td>（ミッション）会社の持続性の基盤</td> 67 <td>（方向性）Vision for the Future</td> 68 </tr> 69 <tr class="text-left"> 70 <td colspan="3">＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠</td> 71 </tr> 72 </tbody> 73 </table> 74 </div> 75 <div id="title2" direction="left-end"> 76 <div class="TextBox-left"> 77 <p>＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠</p> 78 <h2>「グループ行動指針」</h2> 79 <p>●独創自立<br /> 80 ●高い品質と顧客満足<br /> 81 ●マーケット志向とグローバリゼーション<br /> 82 ●コンプライアンス<br /> 83 ●環境保全</p> 84 </div> 85 </div> 86 <div id="title3" direction="right-end"> 87 <div class="TextBox-right"> 88 <p>＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠＠</p> 89 <h2>「＠＠＠＠＠＠＠＠＠＠＠」</h2> 90 <p>●既存事業における収益力No.1<br /> 91 ●成長事業へのチャレンジ<br /> 92 ●社員のモチベーション向上</p> 93 </div> 94 </div> 95 </div> 96 97 <div class="identity-title"> 98 <ul> 99 <li><button data-template="title1">社訓<br />・<br />グループ理念</button></li> 100 <li><button data-template="title2">グループ行動指針</button></li> 101 <li><button data-template="title3">＠＠＠＠＠＠＠</button></li> 102 <li><button>中期経営計画</button></li> 103 </ul> 104 </div><!--identity-title--> 105 106 </div><!--wrapper--> 107 108 <script src="https://unpkg.com/@popperjs/core@2"></script> 109 <script src="https://unpkg.com/tippy.js@6"></script> 110 111 <script> 112 var direction; 113 tippy('button', { 114 content(reference) { 115 const id = reference.getAttribute('data-template'); 116 if (id != null) { 117 const template = document.getElementById(id); 118 direction = template.getAttribute("direction"); 119 return template.innerHTML; 120 } 121 }, 122 allowHTML: true, 123 placement: `${direction}`, 124 }); 125 </script> 126</body> 127</html>
上記のようなコードで各ツールチップの方向は変数に取得できてスクリプトは一旦正常終了しています。
しかし、実際に表示しようとしたところで、マウスホバーしたら
Uncaught
1```というエラーが出て（Chrome最新版）後一歩のところでうまく動きませんでした。 2 3JavaScriptマスターの方々これをたたき台にして完成版を質問者さんに提示していただけたら幸いです。 4 5P.S. 質問者さんへ、コードはインデントを付けて書きましょう格段に読みやすくなります。
投稿2020/06/24 15:32
編集2020/06/24 22:18総合スコア501
あなたの回答
tips
プレビュー
