Блог

Главная - Вопросы по программированию - Как сделать всплывающее окно bootstrap 3 при наведении курсора мыши и кликабельной ссылке

Как сделать всплывающее окно bootstrap 3 при наведении курсора мыши и кликабельной ссылке

#javascript #html #jquery #css #twitter-bootstrap

#javascript #HTML #jquery #css #twitter-bootstrap

Вопрос:

Я целый день пытался сделать так, чтобы эта всплывающая подсказка при наведении зависала, чтобы пользователь мог щелкнуть по 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;}

Ответ №1:

Я нашел решение для решения этой проблемы

Первый
Если вы использовали Boostrap
, вам нужно Popper.js в вашем коде.
https://getbootstrap.com/docs/4.0/components/popovers/

Затем вызовите всплывающее окно с помощью

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

И используйте a <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>