Q&A
#やりたいこと
イベント発生時に、functionまたは別の方法でポップアップウィンドウにパラメータを渡し、イベント発生時のたびにポップアップウィンドウを表示させる（非表示にする）
パラメータを渡す先は、
/sample/list/detail
また、セルにマウスポインタが乗ったときには、何度でもポップアップを表示したい
（マウスポインタが離れたときには、ポップアップは消したい）
#やってみたこと
マウスがセルに乗った時にポップアップが表示されるところまで、ここで助けていただいて、なんとか実現しました。
が、セルからマウスが離れた時にポップアップが消されるということは一見して実現できたかのように見えたのですが、
２度目以降にセルにマウスを乗せたときは、ポップアップは表示されません。
この点を解決をするにはどうしたらいいでしょうか？
HTML
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>page</title> 7 <link href="/css/balloon.css" rel="stylesheet" type="text/css"></link> 8 <script src="js/jquery-2.1.4.min.js"></script> 9<script src="/js/jquery.fs.tipper.min.js"></script> 10<script src="/js/jquery.tile.js"></script> 11<script src="/js/jquery.balloon.js"></script> 12 13 <script> 14 $(function() { 15 $.balloon.defaults.classname = "balloon"; 16 $('.sample-outer').tile(2); 17 $('h1 > a').balloon({ position: "bottom" }); 18 // default options 19 (function() { 20 var $defaultOptions = $('#default-options > div'); 21 var p = []; 22 for(var k in $.balloon.defaults) { 23 if(k == "css") continue; 24 var q = ($.type($.balloon.defaults[k]) == "string") ? """ : ""; 25 p.push(k + ": " + q + $.balloon.defaults[k] + q); 26 } 27 $defaultOptions.eq(0).html(p.join(",<br>")); 28 p = []; 29 for(var k in $.balloon.defaults.css) { 30 p.push(" " + k + ": "" + $.balloon.defaults.css[k] + """); 31 } 32 $defaultOptions.eq(1).html("css: {<br>" + p.join(",<br>") + "<br>}"); 33 })(); 34 // showBalloon sample 35 (function() { 36 var shown = true; 37 $("#advanced-methods > img").on("click", function() { 38 shown ? $(this).hideBalloon() : $(this).showBalloon(); 39 shown = !shown; 40 }).showBalloon({ 41 html: true, 42 position: "left", 43 offsetX: 50, 44 offsetY: 50, 45 tipSize: 20, 46 css: { 47 maxWidth: "17em", 48 border: "solid 5px #463974", 49 color: "#463974", 50 fontWeight: "bold", 51 fontSize: "130%", 52 backgroundColor: "#efefef" 53 } 54 }); 55 })(); 56 }); 57 </script> 58 </head> 59 60 <body> 61 <div> 62 <a href="list">集計<a/><br> 63 <div class="eContainer"> 64 <div class="eLive"></div> 65 <table cellpadding="0" cellspacing="0" class="styleT"> 66 <tr> 67 <th class="date"> </th> 68 <th colspan="2"> 69 <div class="content"> 70 <div class="tri_icon"></div> 71 <div class="Tipper-box"> 72 <p> A社</p> 73 </div> 74 </div> 75 </th> 76 <th colspan="2"> 77 <div class="content"> 78 <div class="tri_icon"></div> 79 <div class="Tipper-box"> 80 <p>B社</p> 81 </div> 82 </div> 83 </th> 84 <th colspan="2"> 85 <div class="content"> 86 <div class="tri_icon"></div> 87 <div class="Tipper-box"> 88 <p>C社</p> 89 </div> 90 </div> 91 </th> 92 <th colspan="2"> 93 <div class="content"> 94 <div class="tri_icon"></div> 95 <div class="Tipper-box"> 96 <p>D社</p> 97 </div> 98 </div> 99 </th> 100 </tr> 101 <tr> 102 <th style="width: 10%;">2018年10月</th> 103 <th class="num">件数</th><th class="price">金額</th> 104 <th class="num">件数</th><th class="price">金額</th> 105 <th class="num">件数</th><th class="price">金額</th> 106 <th class="num">件数</th><th class="price">金額</th> 107 </tr> 108 <tr data-date="2018-10-01"> 109 <td style="width: 140px;">10月1日</td> 110 <td>0</td><td><div class="bl" data-cc="90" title="loading..">100</div></td> 111 <td>0</td><td><div class="bl" data-cc="91" title="loading..">200</div></td> 112 <td>0</td><td><div class="bl" data-cc="92" title="loading..">300</div></td> 113 <td>0</td><td><div class="bl" data-cc="93" title="loading..">400</div></td> 114 </tr> 115 <tr data-date="2018-10-02"> 116 <td style="width: 140px;">10月2日</td> 117 <td>0</td><td><div class="bl" data-cc="90" title="loading..">100</div></td> 118 <td>0</td><td><div class="bl" data-cc="91" title="loading..">200</div></td> 119 <td>0</td><td><div class="bl" data-cc="92" title="loading..">300</div></td> 120 <td>0</td><td><div class="bl" data-cc="93" title="loading..">400</div></td> 121 </tr> 122 <tr data-date="2018-10-03"> 123 <td style="width: 140px;">10月3日</td> 124 <td>0</td><td><div class="bl" data-cc="90" title="loading..">100</div></td> 125 <td>0</td><td><div class="bl" data-cc="91" title="loading..">200</div></td> 126 <td>0</td><td><div class="bl" data-cc="92" title="loading..">300</div></td> 127 <td>0</td><td><div class="bl" data-cc="93" title="loading..">400</div></td> 128 </tr> 129 <tr data-date="2018-10-04"> 130 <td style="width: 140px;">10月4日</td> 131 <td>0</td><td><div class="bl" data-cc="90" title="loading..">100</div></td> 132 <td>0</td><td><div class="bl" data-cc="91" title="loading..">200</div></td> 133 <td>0</td><td><div class="bl" data-cc="92" title="loading..">300</div></td> 134 <td>0</td><td><div class="bl" data-cc="93" title="loading..">400</div></td> 135 </tr> 136 </table> 137 </div> 138 </div> 139 140 </div> 141 142<script> 143$(function(){ 144 $(".bl").hover(function(){ 145 $(this).showBalloon({ 146 html:true, 147 position: 'right', 148 url: '/sample/list/detail?cc=' + $(this).attr('data-cc') + '&date=' + $(this).parent().attr('data-date') 149 }); 150 }); 151 $(".bl").mouseout(function(){ 152 $(this).hideBalloon({}); 153 }); 154}); 155 156 $(window).scroll(function(){ 157 getActivePage(); 158 }); 159 getActivePage(); 160 161 function getActivePage() { 162 var nav = $('.page'); 163 for (var i = 0; i < nav.length; i++) { 164 if ($(nav[i]).outerHeight() + $(nav[i])[0].getBoundingClientRect().top > $(window).height()*0.7) { 165 $('.tab').removeClass('active'); 166 $('.tab[data-tab="' + $(nav[i]).attr('data-page') + '"]').addClass('active'); 167 break; 168 } 169 } 170 } 171</script> 172 173 </div> 174 </body> 175</html>
jquery.balloon.js
については
http://urin.github.io/jquery.balloon.js/
を参照
あなたの回答
tips
プレビュー
