0
<div class="input-group">
    <input type="text" class="form-control" placeholder="Сгенерированный пароль" id="password" onclick="this.select();" readonly aria-describedby="basic-addon2" >
     <div class="input-group-append">
            <button class="btn btn-outline-secondary" id="btn_refresh" type="button"  title="Сгенерировать новый пароль">refresh</button>
            <button class="btn btn-outline-secondary copy" id="btn_copy" data-clipboard-action="copy" data-clipboard-target="#password" type="button" title="Скопировать пароль в буфер обмена">copy</button>
    </div>
</div>

Нужно чтобы плдсказка всплывала слева от input'а при нажатии на кнопку "copy"

1 ответ 1

1

Для bootstrap можно воспользоваться компонентом popover. В инпуте укажите направление и текст и скриптом отображайте этот текст.

$(function () {
  // Нажатие на кнопку, переключаем popover
  $('#btn_copy').click(function(){
    $('.popover-control').popover('toggle');
  });
  
  // Исчезновение фокуса с кнопки, убираем popover
  $('#btn_copy').blur(function(){
      $('.popover-control').popover('hide');
  })
})
<!-- Подключение Bootstrap -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- -->

<div class="row">
  <div class="input-group col-7 offset-3">
      <input type="text" class="form-control popover-control" placeholder="Сгенерированный пароль" id="password" onclick="this.select();" readonly aria-describedby="basic-addon2" data-container="body" data-toggle="popover" data-placement="left" data-content="Здесь текст подсказки">
       <div class="input-group-append">
              <button class="btn btn-outline-secondary" id="btn_refresh" type="button"  title="Сгенерировать новый пароль">refresh</button>
              <button class="btn btn-outline-secondary copy" id="btn_copy" data-clipboard-action="copy" data-clipboard-target="#password" type="button" title="Скопировать пароль в буфер обмена">copy</button>
      </div>
  </div>
</div>

2
  • Спасибо, а как можно сделать чтобы при следующем клике в любое другое место подсказка изчезала 12 дек 2018 в 5:34
  • 1
    Например, можно обрабатывать событие исчезновения фокуса с кнопки. Добавил пример в ответ. 12 дек 2018 в 7:52

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.