Сообщение кнопки всплывает без щелчка - PullRequest
Новая
       14

Сообщение кнопки всплывает без щелчка

0 голосов
/ 30 января 2020

Это скриншот обычного поиска Google

Я пытаюсь получить крошечное окно сообщения, когда вы go на иконке mi c в поисковой системе Google , Я хочу включить это в мои bootstrap кнопки. Ниже приведен код, где я хочу добавить аналогичное окно сообщения на кнопку «Подключить и отключить». 

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-6 col-md-6">
        <br>
          <img style="width:30%" src="icon1.jpg">
        <br>
        <br>


          <button type="button" class="btn btn-success" >
            <a style="color:white;" href= "options.html" >
              Connect
            </a>
          </button>

        </div>

        <div class = "col-12 col-sm-6 col-md-6 ">
          <br>
            <img style="width:30%" class="float-right" src="icon1.jpg" >
          <br>
          <br>
          <br>
          <br>
          <br>
          <div class ="text-right">
          <button type="button" class="btn btn-danger ">
            <a style="color:white;" href= "options.html" >
              Disconnect
            </a>
          </button>
        </div>
        </div>
  </div>
</div>

Ответы [ 2 ]

0 голосов
/ 30 января 2020

Вы можете следовать за этим кодом с bootstrap. используйте data-toggle = "tooltip" для своей кнопки, откуда вы хотите навести курсор, title - это всплывающая подсказка / всплывающее окно и добавьте скрипт ниже в нижний колонтитул Для более подробной информации перейдите по ссылке https://www.w3schools.com/bootstrap/bootstrap_tooltip.asp

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
<script>
$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip();
});
</script>
0 голосов
/ 30 января 2020

То, что вы ищете, это всплывающие подсказки. Ознакомьтесь с документацией bootstrap о них здесь .

...