如何使 bootstrap 3 Popover 处于悬停状态和可点击链接

Question

我一整天都在尝试制作此工具提示，在悬停时卡住，以便用户可以单击 4 个选项并重定向到特定页面/链接，但我仍然无法做到。 我不想被点击，但我希望它在悬停时显示工具提示和可点击。

它已经处于悬停状态，但现在它不会卡住/暂停，以便用户单击选项。

html代码

<div class="container">
  <h3>Bootstrap 3 Popover HTML Example</h3>
  <ul class="list-unstyled">
    <li><a data-placement="bottom" data-trigger="click" data-toggle="popover" data-container="body" data-placement="left" type="button" data-html="true" href="#" id="login"><span class="glyphicon glyphicon-search" style="margin:3px 0 0 0"></span></a></li>
    <div id="popover-content" class="hide">
      <form class="form-inline" role="form">
        <div class="form-group"> 
          
          <input class="btn btn-primary btn-xs far fa-copy" id="phSearchButton" type="submit" value="Search" /> 
          <input class="btn btn-primary btn-xs far fa-eye-slash" id="searchButton" type="submit" value="Dictionary" />
          
          <input class="btn btn-primary btn-xs far fa-copy" id="phSearchButton" type="submit" value="Search 2" /> 
          <input class="btn btn-primary btn-xs far fa-eye-slash" id="searchButton" type="submit" value="Dictionary 2" />
        </div>
      </form>
    </div>
  </ul>
</div>

查询代码

$("[data-toggle=popover]").popover({ trigger: "click hover",
    html: true, 
    content: function() 
  {
          /*return $('#popover-content').html();*/
          return $('#popover-content').html();
        }
});

CSS 代码

.container {padding:20px;}
.form-control {width:120px;}
.popover {max-width:400px;}

Answer 1

我找到了解决这个问题的解决方案

第一的
如果您使用 Boostrap
您的代码中需要一个 Popper.js。
https://getbootstrap.com/docs/4.0/components/popovers/

然后，调用 Popover With

$(function () {
  $('[data-toggle="popover"]').popover()
})

并使用<button class="...."></button>进行操作。

您的示例代码：

 <html> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="ie=edge"/> <script src="https://code.jquery.com/jquery-3.5.1.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <script> $(function () { $('[data-toggle="popover"]').popover() }) </script> <body> <div class="container"> <h3>Bootstrap 3 Popover HTML Example</h3> <ul class="list-unstyled"> <li><button class="btn btn-primary mr-2" data-container="body" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-placement="top" data-toggle="popover" title="Popover on top" type="button">Popover on top</button></li> <div id="popover-content" class="hide"> <form class="form-inline" role="form"> <div class="form-group"> <input class="btn btn-primary btn-xs far fa-copy" id="phSearchButton" type="submit" value="Search" /> <input class="btn btn-primary btn-xs far fa-eye-slash" id="searchButton" type="submit" value="Dictionary" /> <input class="btn btn-primary btn-xs far fa-copy" id="phSearchButton" type="submit" value="Search 2" /> <input class="btn btn-primary btn-xs far fa-eye-slash" id="searchButton" type="submit" value="Dictionary 2" /> </div> </form> </div> </ul> </div> <button class="btn btn-primary mr-2" data-container="body" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-placement="top" data-toggle="popover" title="Popover on top" type="button">Popover on top</button><button class="btn btn-primary mr-2" data-container="body" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-placement="right" data-toggle="popover" title="Popover on right" type="button">Popover on right</button><button class="btn btn-primary mr-2" data-container="body" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-placement="bottom" data-toggle="popover" title="Popover on bottom" type="button">Popover on bottom</button><button class="btn btn-primary mr-2" data-container="body" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-placement="left" data-toggle="popover" title="Popover on left" type="button">Popover on left</button> </body> </html>