如何在输入类型文本的左侧创建气泡或信息框

<div class="container">
  <input type="text" class="input-text">
  <div class="bubble">这是气泡内容</div>
</div>

.container {
  position: relative;
  display: inline-block;
}

.input-text {
  padding-left: 20px; /* 为了给气泡留出空间 */
}

.bubble {
  position: absolute;
  left: 0;
  top: 0;
  background-color: #f1f1f1;
  color: #333;
  padding: 10px;
  border-radius: 5px;
  display: none; /* 初始时隐藏气泡 */
}

// 获取输入文本和气泡元素
var inputText = document.querySelector('.input-text');
var bubble = document.querySelector('.bubble');

// 监听输入文本的输入事件
inputText.addEventListener('input', function() {
  // 获取输入文本的位置和尺寸信息
  var inputRect = inputText.getBoundingClientRect();
  
  // 设置气泡的位置
  bubble.style.top = inputRect.top + 'px';
  bubble.style.left = inputRect.left - bubble.offsetWidth - 10 + 'px';
  
  // 显示气泡
  bubble.style.display = 'block';
});

// 监听输入文本的失去焦点事件
inputText.addEventListener('blur', function() {
  // 隐藏气泡
  bubble.style.display = 'none';
});