Quasar是否有Semantic UI的pointing label等效组件？求替代方案

方案1：自定义CSS实现指向效果 #

直接用CSS伪元素模拟指向箭头，完全可控，不受框架组件限制：

示例代码（针对label类元素） #

.label.pointing-up {
  position: relative;
  padding: 8px 12px;
  border-radius: 4px;
}
.label.pointing-up::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--q-color-primary);
}

使用时保留原有HTML结构：

<span class="label pointing-up bg-primary text-white">up</span>

方案2：基于QChip自定义修改 #

如果坚持使用QChip组件，通过添加自定义类并覆盖样式实现箭头：

示例代码 #

.q-chip.custom-pointing-up {
  position: relative;
}
.q-chip.custom-pointing-up::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid inherit;
}

使用时：

<q-chip class="custom-pointing-up bg-primary text-white">up</q-chip>

方案3：使用QTooltip替代（场景适配） #

如果你的指向需求属于提示类场景，直接用Quasar内置的QTooltip组件，原生支持方向控制：

<q-btn label="Hover me">
  <q-tooltip anchor="bottom middle" self="top middle" bg-color="primary" text-color="white">
    up
  </q-tooltip>
</q-btn>

内容的提问来源于stack exchange，提问作者Tamy