如何使 bootstrap 3 Popover 悬停和可点击链接答案

【问题标题】：How to make bootstrap 3 Popover to be On Hover and Clickable Link如何使 bootstrap 3 Popover 悬停和可点击链接
【发布时间】：2020-11-08 19:25:48
【问题描述】：

我一整天都在尝试制作此工具提示，在悬停时卡住，以便用户可以单击 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>

Jquery 代码

$("[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;}

【问题讨论】：

标签： javascript html jquery css twitter-bootstrap

【解决方案1】：

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

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

然后，调用 Popover

$(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>

【讨论】：