Gmail, как текстовые подсказки в CSS - PullRequest
Новая
       37

Gmail, как текстовые подсказки в CSS

0 голосов
/ 30 апреля 2019

Я хочу создать всплывающую подсказку для текстового поля, например, использование gmail. Я попытался сделать свой конец, и это сделано в различных сообществах и уникальных Google, но я не получил никакого ответа, так как я хотел, чтобы скриншот, который я пытаюсь сделать, был ниже. Снимок экрана: "https://ibb.co/xCcgMs6"

Ошибка или проблема в том, что всплывающее окно не отображается, когда поле ввода находится в фокусе или активно, я имею в виду. Пожалуйста, помогите мне, как я делаю это .. Мой код ниже- 

$(function(){
  var jfk = $(".jfk-bubble"); 
  $("#name").focus(function(){
    jfk.addClass("active");
   
  }).blur(function(){
    jfk.removeClass("active");
  });
});
form {
  padding: 25px;
  background: #fff;
  border: 1px solid #c5edf9;
  div {
    position: relative;
    margin: 0 0 1.5em;
  }
}
 
/* BUBBLE */
.jfk-bubble {
  box-shadow: 0 1px 3px rgba(black,.2);
  background-color: #fff;
  border: 1px solid;
  position: absolute;
  z-index: 1201 !important;
  border-color: #bbb #bbb #a8a8a8;
  padding: 16px;
  width: 255px;
  line-height: 17px;
  visibility: hidden; 
  opacity: 0;
  left: 16px; 
  top: 48px; 
  @include transition(all 0.218s);
  &.active {
    visibility: visible; 
    opacity: 1;
  }
}

/* bubble arrow */
.jfk-bubble-arrow {
  position: absolute;
  top: 20px;
  &:before, &:after {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
  }
  &:before {
    border: 9px solid;
    border-color: transparent #bbb;
    top: -9px;
  }
  &:after {
    border: 8px solid;
    border-color: transparent #fff;
    top: -8px;
  }
}

.jfk-bubble-arrowright {
  right: 0;
  &:before, &:after {
    border-right-width: 0;
  }
} 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Login for Form 2</h3>
      <div class="login-temp">
      <form class="form-horizontal">
      <div class="form-group">
            <input type="text" name="name" id="name" />
      </div>
        <div class="form-group">
            <input type="password" class="form-control" placeholder="Your Password *" value="" />
        </div>
        <div class="form-group">
            <input type="submit" class="btnSubmit" value="Login" />
        </div>
        <div class="form-group">

            <a href="#" class="ForgetPwd" value="Login">Forget Password?</a>
        </div>
    </form>
    </div>
    <div class="jfk-bubble active">
    <p>
        People you connect with on Google may see the month and day of your birthday.
        <a target="_blank" href="#">Learn more</a>
    </p>
    <div class="jfk-bubble-arrow jfk-bubble-arrowright"></div>
    </div>

пожалуйста, помогите мне.

...