bootstrap tips 外掛學習筆記
阿新 • • 發佈：2019-02-03
文章參考
http://v3.bootcss.com/javascript/#tooltips
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- Bootstrap v3.3.4 核心 CSS 檔案 --> <link rel="stylesheet" href="../css/bootstrap.min.css"> <script src="../js/jquery.min.js"></script> <!-- Bootstrap v3.3.4 核心 JavaScript 檔案 --> <script src="../js/bootstrap.min.js"></script> <link rel="stylesheet" href="../css/sqh_style_v2.0.css"> <script src="../js/sqh_js_v2.0.js"></script> <title>我的卡包</title> <style> .tooltip-inner { background-color: #ffffff; border-radius: 4px; color: #565656; max-width: none; padding: 3px 8px; text-align: center; text-decoration: none; } .tooltip.in { filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } .tooltip.bottom .tooltip-arrow { border-bottom-color: #d8d8d8; border-width: 0 5px 5px; left: 50%; margin-left: -5px; top: 0; } </style> </head> <body class="sqh_tmp_bj_f3"> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on left">Tooltip on left</button> <br> <br> <br> <br> <br> <br> <span data-toggle="tooltip" data-placement="right" title="黃彪測試內容">Tooltip on left</span> <br> <br> <br> <br> <br> <span id="huangbiao">Tooltip on left</span> </body> </html> <script> $(function () { //初始化tooltips $('[data-toggle="tooltip"]').tooltip(); showTips('#huangbiao'); }); function showTips(jquerySelector){ var target = '<div class="margin_top_20 border_bottom_eee_solid padding_bottom_10 sqh_overflow_hidden" style="width:470px;margin:0 auto;"><div class="float_left sqh_font_type font_color" style="width: 15%">天心區:</div><div class="" style="margin-left: 15%"><div class="sqh_pointer width_25 float_left" target="#" onclick="jumpTo(this)">上海城</div><div class="sqh_pointer width_25 float_left" target="#" onclick="jumpTo(this)">錦繡世紀</div><div class="sqh_pointer width_25 float_left" target="#" onclick="jumpTo(this)">上海城</div><div class="sqh_pointer width_25 float_left" target="#" onclick="jumpTo(this)">錦繡世紀</div><div class="sqh_pointer width_25 float_left" target="#" onclick="jumpTo(this)">上海城</div></div></div><div class="margin_top_20 border_bottom_eee_solid padding_bottom_10 sqh_overflow_hidden" style="width:470px;margin:0 auto;"><div class="float_left sqh_font_type font_color" style="width: 15%">天心區:</div><div class="" style="margin-left: 15%"><div class="sqh_pointer width_25 float_left" target="#" onclick="jumpTo(this)">上海城</div><div class="sqh_pointer width_25 float_left" target="#" onclick="jumpTo(this)">錦繡世紀</div><div class="sqh_pointer width_25 float_left" target="#" onclick="jumpTo(this)">上海城</div><div class="sqh_pointer width_25 float_left" target="#" onclick="jumpTo(this)">錦繡世紀</div><div class="sqh_pointer width_25 float_left" target="#" onclick="jumpTo(this)">上海城</div></div></div><div class="margin_top_20 border_bottom_eee_solid padding_bottom_10 sqh_overflow_hidden" style="width:470px;margin:0 auto;"><div class="float_left sqh_font_type font_color" style="width: 15%">天心區:</div><div class="" style="margin-left: 15%"><div class="sqh_pointer width_25 float_left" target="#" onclick="jumpTo(this)">上海城</div><div class="sqh_pointer width_25 float_left" target="#" onclick="jumpTo(this)">錦繡世紀</div><div class="sqh_pointer width_25 float_left" target="#" onclick="jumpTo(this)">上海城</div><div class="sqh_pointer width_25 float_left" target="#" onclick="jumpTo(this)">錦繡世紀</div><div class="sqh_pointer width_25 float_left" target="#" onclick="jumpTo(this)">上海城</div></div></div><div class="margin_top_20 padding_bottom_10 sqh_overflow_hidden" style="width:470px;margin:0 auto;"><div class="float_left sqh_font_type font_color" style="width: 15%">天心區:</div><div class="" style="margin-left: 15%"><div class="sqh_pointer width_25 float_left" target="#" onclick="jumpTo(this)">上海城</div><div class="sqh_pointer width_25 float_left" target="#" onclick="jumpTo(this)">錦繡世紀</div><div class="sqh_pointer width_25 float_left" target="#" onclick="jumpTo(this)">上海城</div><div class="sqh_pointer width_25 float_left" target="#" onclick="jumpTo(this)">錦繡世紀</div><div class="sqh_pointer width_25 float_left" target="#" onclick="jumpTo(this)">上海城</div></div></div>'; $(jquerySelector).tooltip({ //自定義彈出控制元件顯示的內容 template : '<div class="tooltip sqh_border_d8d8d8 sqh_tmp_bj_ff sqh_line_height_20" role="tooltip" style="width: 510px;"><div class="tooltip-arrow sqh_position_top_30" style="top:-5px;"></div><div class="tooltip-inner"></div></div>', //提示標籤在控制元件顯示的位置 —— top | bottom | left | right | auto placement : "bottom", //在template模板<div class="tooltip-inner"></div>控制元件內展示的內容 title:"<span>"+target+"</span>", //觸發事件click | hover | focus | manual. trigger:"click", //是否將html程式碼做轉換，false是不轉換，true表示轉換 html:true }).on('shown.bs.tooltip', function () { $(".tooltip.bottom .tooltip-arrow").css("top","-5px"); }); //繫結事件 // $(jquerySelector).on('shown.bs.tooltip', function () { // $(".tooltip.bottom .tooltip-arrow").css("top","-5px"); // }) } </script>