diff --git a/components/Tooltip.vue b/components/Tooltip.vue
new file mode 100644
index 0000000..e4db521
--- /dev/null
+++ b/components/Tooltip.vue
@@ -0,0 +1,299 @@
+<template>
+	<view
+		class="zb-tooltip"
+		:style="{
+			'--theme-bg-color': color,
+		}"
+	>
+		<view class="zb_tooltip_content" @longpress.stop="handleClick">
+			<slot></slot>
+			<view class="zb_tooltip__mask" @longpress.stop v-show="isShow" @click="close"></view>
+			<view
+				class="zb_tooltip__popper"
+				@tap.stop="() => {}"
+				:style="[
+					style,
+					{
+						visibility: isShow ? 'visible' : 'hidden',
+						color: color === 'white' ? '#333' : '#fff',
+						boxShadow: color === 'white' ? '0 3px 6px -4px #0000001f, 0 6px 16px #00000014, 0 9px 28px 8px #0000000d' : '',
+					},
+				]"
+			>
+				<slot name="content">{{ content }}</slot>
+				<!-- <view
+            class="zb_popper__icon"
+            :style="[arrowStyle]"
+            :class="[
+              {
+                zb_popper__up: placement.indexOf('bottom') === 0,
+                zb_popper__arrow: placement.indexOf('top') === 0,
+                zb_popper__right: placement.indexOf('right') === 0,
+                zb_popper__left: placement.indexOf('left') === 0,
+              },
+            ]"
+          >
+          </view> -->
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: "Tooltip",
+	props: {
+		visible: Boolean,
+		rowPosition: {
+			type: String,
+			default: "",
+		},
+		message: {
+			type: Object,
+			default: {},
+		},
+		color: {
+			type: String,
+			default: "#303133",
+		},
+		// placement: {
+		//   type: String,
+		//   default: 'top',
+		// },
+		content: {
+			type: String,
+			default: "",
+		},
+		show: {
+			type: Boolean,
+			default: false,
+		},
+		// 弹窗顶部距离顶部多少时，自动调整位置
+		top: {
+			type: Number,
+			default: 150,
+		},
+	},
+
+	data() {
+		return {
+			isShow: this.visible,
+			title: "Hello",
+			arrowLeft: 0,
+			query: null,
+			style: {},
+			arrowStyle: {},
+			placement: "top",
+		};
+	},
+	onLoad() {},
+	watch: {
+		isShow: {
+			handler(val) {
+				this.$emit("update:visible", val);
+			},
+			immediate: true,
+		},
+		visible: {
+			handler(val) {
+				if (val) {
+					this.$nextTick(() => {
+						this.getPosition();
+					});
+				}
+				this.isShow = val;
+			},
+			immediate: true,
+		},
+	},
+	mounted() {
+		// #ifdef H5
+		window.addEventListener("click", () => {
+			this.isShow = false;
+		});
+		// #endif
+		this.getPosition();
+	},
+	methods: {
+		close() {
+      // console.log('this.isShow',this.isShow);
+			this.isShow = false;
+		},
+		fixedWrap() {
+			this.isShow = false;
+		},
+		async handleClick() {
+			if (this.message && this.message.type == "tip") {
+				return false;
+			}
+			if (this.isShow) {
+				return (this.isShow = false);
+			}
+			await this.getPosition();
+			this.isShow = true;
+		},
+		getPosition() {
+			let that = this;
+			return new Promise((resolve) => {
+				uni
+					.createSelectorQuery()
+					.in(this)
+					.selectAll(".zb_tooltip_content,.zb_tooltip__popper")
+					.boundingClientRect(async (data) => {
+						let { left, bottom, right, top, width, height } = data[0] || {};
+						// let windowInfo = uni.getWindowInfo();
+						// console.log("windowInfo", windowInfo);
+						// console.log("data[0]", data[0]);
+						let obj1 = data[1] || {};
+						let objStyle = {};
+						let objStyle1 = {};
+						if (top <= that.top) {
+							this.placement = "bottom";
+						} else {
+							this.placement = "top";
+						}
+						if (this.rowPosition == "left") {
+							objStyle.left = "0%";
+							// objStyle.transform = "translateX(-50%)";
+						} else if (this.rowPosition == "right") {
+							objStyle.right = "0%";
+							// objStyle.transform = "translateX(50%)";
+						} else {
+							objStyle.left = "50%";
+						}
+						switch (this.placement) {
+							case "top":
+								// if (obj1.width > width) {
+								//   objStyle.left = `-${(obj1.width - width + 120) / 2}px`
+								// } else {
+								//   objStyle.left = `${Math.abs(obj1.width - width) / 2}px`
+								// }
+
+								objStyle.bottom = `${height + 4}px`;
+								// objStyle.left = '30%'
+								// objStyle1.left = obj1.width - 6 + 'px'
+								break;
+							case "bottom":
+								// if (obj1.width > width) {
+								//   objStyle.left = `-${(obj1.width - width) / 2}px`
+								// } else {
+								//   objStyle.left = `${Math.abs(obj1.width - width) / 2}px`
+								// }
+								// if (!this.isSelf) {
+								// 	objStyle.transform = "translateX(-50%)";
+								// } else {
+								// 	objStyle.transform = "translateX(-50%)";
+								// }
+								// objStyle.left = "50%";
+								// objStyle.left = `-${obj1.width - width - 100}px`
+								objStyle.top = `${height + 4}px`;
+								// objStyle1.left = obj1.width / 2 - 6 + 'px'
+								break;
+						}
+						this.style = objStyle;
+						// 三角形箭头
+						this.arrowStyle = objStyle1;
+						resolve();
+					})
+					.exec();
+			});
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+$theme-bg-color: var(--theme-bg-color);
+
+.zb-tooltip {
+	position: relative;
+}
+
+.zb_tooltip_content {
+	height: 100%;
+	/* float: left; */
+	position: relative;
+	// display: inline-block;
+
+	// display: flex;
+	// flex-direction: row;
+	// align-items: center;
+	/* overflow: hidden; */
+}
+
+.zb_tooltip__popper {
+	/* transform-origin: center top; */
+	background: $theme-bg-color;
+
+	visibility: hidden;
+	// color:'#fff';
+	position: absolute;
+	border-radius: 10px;
+	font-size: 12px;
+	padding: 10px 16px;
+	min-width: 10px;
+	word-wrap: break-word;
+	display: inline-block;
+	white-space: nowrap;
+	z-index: 99;
+}
+
+.zb_tooltip__mask {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	overflow: hidden;
+	background-color: rgba(256, 256, 256, 0);
+	z-index: 98;
+}
+
+.zb_popper__icon {
+	width: 0;
+	height: 0;
+	z-index: 9;
+	position: absolute;
+}
+
+.zb_popper__arrow {
+	bottom: -5px;
+	/* transform-origin: center top; */
+	border-left: 6px solid transparent;
+	border-right: 6px solid transparent;
+	border-top: 6px solid $theme-bg-color;
+}
+
+.zb_popper__right {
+	border-top: 6px solid transparent;
+	border-bottom: 6px solid transparent;
+	border-right: 6px solid $theme-bg-color;
+	left: -5px;
+}
+
+.zb_popper__left {
+	border-top: 6px solid transparent;
+	border-bottom: 6px solid transparent;
+	border-left: 6px solid $theme-bg-color;
+	right: -5px;
+}
+
+.zb_popper__up {
+	border-left: 6px solid transparent;
+	border-right: 6px solid transparent;
+	border-bottom: 6px solid $theme-bg-color;
+	top: -5px;
+}
+
+.fixed {
+	position: absolute;
+	width: 100vw;
+	height: 100vh;
+	position: fixed;
+	left: 0;
+	top: 0;
+	pointer-events: auto;
+	background: red;
+	z-index: -1;
+}
+</style>