隱藏外部提示的工具提示不起作用

Question

我無法通過在按鈕外部單擊來打開工具提示，並關閉工具提示。 感謝幫助。

下面是重現該問題的方法

點擊按鈕
單擊按鈕外部以關閉工具提示
再次單擊按鈕以打開工具提示

注意：按鈕需要單擊兩次才能通過在div外部單擊來打開關閉后的工具提示。

下面是源代碼。

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Example of Setting Container for Bootstrap 3 Popover</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ // Append popover HTML to wrapper element $("#myPopovers a").popover({ container: '.wrapper' }); }); </script> <script> $(document).mouseup(function (e){ var container = $(".popover"); if (!container.is(e.target) && container.has(e.target).length === 0){ container.fadeOut(); } }); </script> <style type="text/css"> .bs-example { margin: 150px 50px; } .bs-example a { margin: 5px; } </style> </head> <body> <div class="bs-example"> <div class="wrapper"> <div id="myPopovers"> <a href="#" class="btn btn-primary" data-toggle="popover" title="Popover title" data-content="Default popover">Popover</a> </div> </div> </div> </body> </html>

Answer 1

要使您的彈出窗口在下次單擊時不可用，只需使用以下trigger:'focus'初始化彈出窗口trigger:'focus' 。

 $(document).ready(function(){ $('[data-toggle="popover"]').popover({ trigger: 'focus', container: '.wrapper', delay: { "show": 500, "hide": 100 }, }); });

 .bs-example { margin: 150px 50px; } .bs-example a { margin: 5px; }

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <div class="bs-example"> <div class="wrapper"> <div id="myPopovers"> <a href="#" class="btn btn-primary" data-toggle="popover" title="Popover title" data-content="Default popover">Popover</a> </div> </div> </div>

隱藏外部提示的工具提示不起作用

問題描述

1 個解決方案

解決方案1
0 已采納 2018-10-29 13:28:16

隱藏外部提示的工具提示不起作用

問題描述

1 個解決方案

解決方案1 0 已采納 2018-10-29 13:28:16

解決方案1
0 已采納 2018-10-29 13:28:16