CSS中的Gmail喜欢文本框工具提示

Question

我想创建一个类似gmail使用的文本框工具提示。我尽力做到了这一点，并且可以在各种社区和独特的google上做到这一点，但是我没有得到任何答案，因为我想在下面尝试截屏。 截图图片为“ {{3}}”

错误或问题是输入字段为focus或active时不显示弹出窗口，我的意思是。 请帮我做这个。 我的代码如下-

$(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>

请帮助我。