Javascript 如何使Bootstrap3Popover处于悬停和可点击链接

我一整天都在尝试制作这个工具提示，悬停到卡住，这样用户可以点击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();
        }
});

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

CSS代码

<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();
        }
});

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

---

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

首先
如果您使用Boostrap
您的代码中需要一个Popper.js。


然后用

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

并使用

进行操作。

您的示例代码：

$（函数（）{
$（'[data toggle=“popover”]'）。popover（）
})
Bootstrap3PopoverHTML示例

上面的爆米花

顶部的府绸右侧的府绸底部的府绸左侧的府绸