MiniScm/uni_modules/uni-tooltip/components/uni-tooltip/uni-tooltip.vue

<template>
	<view class="uni-tooltip">
		<slot></slot>
		<view v-if="content || $slots.content" class="uni-tooltip-popup">
			<slot name="content">
				{{content}}
			</slot>
		</view>
	</view>
</template>


<script>
	/**
	 * Tooltip 提示文字
	 * @description 常用于展示鼠标 hover 时的提示信息。
	 * @tutorial https://uniapp.dcloud.io/component/uniui/uni-tooltip
	 * @property {String} content   弹出层显示的内容
	 * @property {String}  placement出现位置, 目前只支持 left
	 */


	export default {
		name: "uni-tooltip",
		data() {
			return {

			};
		},
		props: {
			content: {
				type: String,
				default: ''
			},

			placement: {
				type: String,
				default: 'bottom'
			},
		}
	}
</script>

<style>
	.uni-tooltip {
		position: relative;
		cursor: pointer;
	}

	.uni-tooltip-popup {
		z-index: 1;
		display: none;
		position: absolute;
		left: 0;
		background-color: #333;
		border-radius: 8px;
		color: #fff;
		font-size: 12px;
		text-align: left;
		line-height: 16px;
		padding: 12px;
	}


	.uni-tooltip:hover .uni-tooltip-popup {
		display: block;
	}
</style>