泛微代码块实现鼠标移入显示气泡框

以下是一个简单的泛微代码块实现，当鼠标移入代码块区域时，会显示一个气泡框，其中包含代码块的说明。

<template>
  <div class="code-block" @mouseover="showTooltip" @mouseleave="hideTooltip">
    <pre><code>{{ code }}</code></pre>
    <div class="tooltip" v-show="show">
      {{ tooltip }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    code: String, // 代码块内容
    tooltip: String // 代码块说明
  },
  data() {
    return {
      show: false // 是否显示气泡框
    }
  },
  methods: {
    showTooltip() {
      this.show = true;
    },
    hideTooltip() {
      this.show = false;
    }
  }
}
</script>

<style scoped>
.code-block {
  position: relative;
}
.tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px;
  background-color: #333;
  color: #fff;
  border-radius: 5px;
  font-size: 14px;
  transition: opacity 0.2s ease-in-out;
  opacity: 0;
}
.tooltip:before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #333 transparent;
}
.tooltip:after {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 4px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
}
.tooltip.show {
  opacity: 1;
}
</style>

使用时，可以通过以下方式传递代码块内容和说明：

<template>
  <div>
    <code-block code="console.log('Hello, world!');" tooltip="输出Hello, world!" />
  </div>
</template>

<script>
import CodeBlock from "@/components/CodeBlock.vue";

export default {
  components: {
    CodeBlock
  }
}
</script>
``