<div class="floating-component">
    <!-- 懸浮內(nèi)容 -->
    <el-tooltip placement="left" effect="light" popper-class="too">
      <div slot="content">
        <el-button icon="el-icon-s-comment" class="butto" @click="handleQuestion">問題反饋 </el-button>
        <br/>
        <el-button icon="el-icon-question" class="butto" @click="handleHelp">幫助手冊 </el-button>
      </div>
      <el-button icon="el-icon-menu" circle class="but"></el-button>
    </el-tooltip>
</div>

<style scoped>
.floating-component {
  position: fixed; /* 固定位置 */
  bottom: 5%; /* 下邊距 */
  right: 1%; /* 右邊距 */
  padding: 0;
  border-radius: 50%; /* 圓角 */
  z-index: 10000; /* 設(shè)置 z-index 確保懸浮在頂層 */
}
.but {
  font-size: larger;
  color: rgb(0,119,216);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2); /* 陰影 */
}
.butto {
  border: 0;
  padding: 10px;
  margin: 0;
}
</style>

<style>
.too.el-tooltip__popper.is-light {
  border: none !important;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
  padding: 5px
}
/* 修改箭頭邊框 這里方位是left，所以 x-placement^="left" 并且是設(shè)置 border-right-color 的顏色*/
.too.el-tooltip__popper.is-light[x-placement^="left"] .popper__arrow {
  border-left-color: #eaeaea !important;
}
.too.el-tooltip__popper[x-placement^="left"] .popper__arrow {
  border-left-color: #eaeaea !important;
}
</style>