文字气泡 Tooltip

鼠标悬停、聚焦或点击在某个组件时，弹出的文字提示。

基本用法

鼠标移入，气泡出现，鼠标移出，气泡消失。

---

代码事例

<template>
  <fk-space>
    <fk-tooltip content="This is tooltip content">
      <fk-button>Mouse over to display tooltip</fk-button>
    </fk-tooltip>
    <fk-tooltip content="This is a two-line tooltip content.This is a two-line tooltip content.">
      <fk-button>Mouse over to display tooltip</fk-button>
    </fk-tooltip>
  </fk-space>
</template>

迷你尺寸

适用于小场景或数字气泡样式。

---

代码事例

<template>
  <fk-tooltip content="1234" position="top" mini>
    <fk-button>Mouse over to display tooltip</fk-button>
  </fk-tooltip>
</template>

位置

文字气泡支持 12 个不同的方位。分别为：上左、上、上右、下左、下、下右、左上、左、左下、右上、右、右下。

---

代码事例

<template>
  <div :style="{position: 'relative', width: '440px', height: '280px'}">
    <fk-tooltip content="This is a Tooltip" position="tl">
      <fk-button class="button" :style="{position: 'absolute',top:'0',left:'70px'}">TL</fk-button>
    </fk-tooltip>
    <fk-tooltip content="This is a Tooltip" position="top">
      <fk-button class="button" :style="{position: 'absolute',top:'0',left:'180px'}">TOP</fk-button>
    </fk-tooltip>
    <fk-tooltip content="This is a Tooltip" position="tr">
      <fk-button class="button" :style="{position: 'absolute',top:'0',left:'290px'}">TR</fk-button>
    </fk-tooltip>
    <fk-tooltip content="This is a Tooltip" position="bl">
      <fk-button class="button" :style="{position: 'absolute',top:'240px',left:'70px'}">BL</fk-button>
    </fk-tooltip>
    <fk-tooltip content="This is a Tooltip" position="bottom">
      <fk-button class="button" :style="{position: 'absolute',top:'240px',left:'180px'}">BOTTOM</fk-button>
    </fk-tooltip>
    <fk-tooltip content="This is a Tooltip" position="br">
      <fk-button class="button" :style="{position: 'absolute',top:'240px',left:'290px'}">BR</fk-button>
    </fk-tooltip>
    <fk-tooltip content="This is a Tooltip" position="lt">
      <fk-button class="button" :style="{position: 'absolute',top:'60px',left:'10px'}">LT</fk-button>
    </fk-tooltip>
    <fk-tooltip content="This is a Tooltip" position="left">
      <fk-button class="button" :style="{position: 'absolute',top:'120px',left:'10px'}">LEFT</fk-button>
    </fk-tooltip>
    <fk-tooltip content="This is a Tooltip" position="lb">
      <fk-button class="button" :style="{position: 'absolute',top:'180px',left:'10px'}">LB</fk-button>
    </fk-tooltip>
    <fk-tooltip content="This is a Tooltip" position="rt">
      <fk-button class="button" :style="{position: 'absolute',top:'60px',left:'350px'}">RT</fk-button>
    </fk-tooltip>
    <fk-tooltip content="This is a Tooltip" position="right">
      <fk-button class="button" :style="{position: 'absolute',top:'120px',left:'350px'}">RIGHT</fk-button>
    </fk-tooltip>
    <fk-tooltip content="This is a Tooltip" position="rb">
      <fk-button class="button" :style="{position: 'absolute',top:'180px',left:'350px'}">RB</fk-button>
    </fk-tooltip>
  </div>
</template>

<style scoped>
.button {
  width: 100px;
}
</style>

自定义背景颜色

通过 background-color 属性自定义背景颜色。

---

代码事例

<template>
	<fk-space>
		<fk-tooltip content="This is tooltip content" background-color="#3491FA">
			<fk-button>#3491FA</fk-button>
		</fk-tooltip>
		<fk-tooltip content="This is tooltip content" background-color="#165DFF">
			<fk-button>#165DFF</fk-button>
		</fk-tooltip>
		<fk-tooltip content="This is tooltip content" background-color="#722ED1">
			<fk-button>#722ED1</fk-button>
		</fk-tooltip>
		<fk-tooltip
			content="This is tooltip content"
			background-color="#FFFFFF"
			:content-style="{ color: '#000', border: '1px solid var(--color-border-2)' }"
			:arrow-style="{ borderRight: '1px solid var(--color-border-2)', borderBottom: '1px solid var(--color-border-2)' }"
		>
			<fk-button>#FFFFFF</fk-button>
		</fk-tooltip>
	</fk-space>
</template>

<tooltip> 组件继承 <trigger> 组件的全部属性

API

<tooltip> Props

参数名	描述	类型	默认值
popup-visible (v-model)	文字气泡是否可见	boolean	-
default-popup-visible	文字气泡默认是否可见（非受控模式）	boolean	false
content	文字气泡内容	string	-
position	弹出位置	'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'left' | 'lt' | 'lb' | 'right' | 'rt' | 'rb'	'top'
mini	是否展示为迷你尺寸	boolean	false
background-color	弹出框的背景颜色	string	-
content-class	弹出框内容的类名	ClassName	-
content-style	弹出框内容的样式	CSSProperties	-
arrow-class	弹出框箭头的类名	ClassName	-
arrow-style	弹出框箭头的样式	CSSProperties	-
popup-container	弹出框的挂载容器	string | HTMLElement	-
overflow-show	是否是内部内容超出才展示 Tooltip	boolean	false

<tooltip> Events

事件名	描述	参数
popup-visible-change	文字气泡显示状态改变时触发	visible: boolean

<tooltip> Slots

插槽名	描述	参数
content	内容	-