如何从代码中添加带有工具提示、透明背景和字形的按钮？

<button class="tooltip-btn" data-tooltip="这是一个按钮工具提示">
  <i class="fas fa-info-circle"></i>
</button>

.tooltip-btn {
  position: relative;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.tooltip-btn i {
  color: #333;
}

.tooltip-btn::before {
  content: attr(data-tooltip);
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 14px;
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.tooltip-btn:hover::before {
  opacity: 1;
  visibility: visible;
}

// 如果需要使用字形图标，可以在HTML中引入相关的字体库，例如Font Awesome
// <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

// 如果需要动态设置工具提示内容，可以使用以下代码
const tooltipBtn = document.querySelector('.tooltip-btn');
const tooltipText = '这是一个动态设置的按钮工具提示';
tooltipBtn.setAttribute('data-tooltip', tooltipText);