@58fe/p5/src/doc/tooltip.md

pc端vue组件

<script>
	module.exports = {
		data() {
			return{
				isShow: false
			}
		}
	}
</script>
<style lang="scss">
.p5-tooltip-demo-box{
	width: 460px;
	margin: 0 auto;
	text-align: center;
	.btn{
		padding: 10px 20px;
		box-sizing: border-box;
		border: 1px solid #eee;
		display:inline-block;
		margin-left: 10px;
		p{
			white-space: nowrap;
		}
	}
	
	.top, .bottom{
		ul{
			li{
				display:inline-block;
			}
		}
	}
	.center{
		padding: 10px 0;
		&:after{
			content: "";
			clear:both;
			display: block;
		}
		.center-l{
			float: left;
		}
		.center-r{
			float: right;
		}
		.btn{
			margin-bottom: 10px;
			display: block;
		}
	}
	
}
</style>
## Tooltip

### 引入

```javascript
import { tooltip } from '@58fe/p5';
```

### 基本用法
使用`position`参数来控制浮窗的位置，支持上下左右各种角度。<br/>
可选值为：`top` `top-left` `top-right` `right` `right-top` `right-bottom` `bottom` `bottom-left` `bottom-right` `left` `left-top` `left-bottom` 。<br/>
slot的name设置为`content`，为围绕的主题内容，例如：`<template v-slot:content>上左</template>`
剩余html部分为默认浮窗的内容。
:::demo 

```html
<div class="p5-tooltip-demo-box">
	<div class="top">
		<ul class="">
			<li>
				<tooltip position="top-left" class="btn">
					<template v-slot:content>上左</template>
					<p>bottom-left 文字提示</p>
				</tooltip>
			</li>
			<li>
				<tooltip position="top" class="btn">
					<template v-slot:content>上边</template>
					<p>top 文字提示</p>
				</tooltip>
			</li>
			<li>
				<tooltip position="top-right" class="btn">
					<template v-slot:content>上右</template>
					<p>top-right 文字提示</p>
				</tooltip>
			</li>
		</ul>
	</div>
	<div class="center">
		<div class="center-l">
			<ul>
				<li>
					<tooltip position="left-top" class="btn">
						<template v-slot:content>左上</template>
						<p>left-top 文字提示</p>
					</tooltip>
				</li>
				<li>
					<tooltip position="left" class="btn">
						<template v-slot:content>左边</template>
						<p>left 文字提示</p>
					</tooltip>
				</li>
				<li>
					<tooltip position="left-bottom" class="btn">
						<template v-slot:content>左下</template>
						<p>left-bottom 文字提示</p>
					</tooltip>
				</li>
			</ul>
		</div>
		<div class="center-r">
			<ul>
				<li>
					<tooltip position="right-top" class="btn">
						<template v-slot:content>右上</template>
						<p>right-top 文字提示</p>
					</tooltip>
				</li>
				<li>
					<tooltip position="right" class="btn">
						<template v-slot:content>右边</template>
						<p>right 文字提示</p>
					</tooltip>
				</li>
				<li>
					<tooltip position="right-bottom" class="btn">
						<template v-slot:content>右下</template>
						<p>right-bottom 文字提示</p>
					</tooltip>
				</li>
			</ul>
		</div>
	</div>
	<div class="bottom">
		<ul>
			<li>
				<tooltip position="bottom-left" class="btn">
					<template v-slot:content>下左</template>
					<p>bottom-left 文字提示<br/>换行咯</p>
				</tooltip>
			</li>
			<li>
				<tooltip position="bottom" class="btn">
					<template v-slot:content>下边</template>
					<p>bottom 文字提示</p>
				</tooltip>
			</li>
			<li>
				<tooltip position="bottom-right" class="btn">
					<template v-slot:content>下右</template>
					<p>bottom-right 文字提示</p>
				</tooltip>
			</li>
		</ul>
	</div>
</div>
```

:::



### 参数

| 参数         | 说明           | 类型                | 可选值       | 默认值  |
| ------------ | -------------- | ------------------- | ------------ | ------- |
| position         | 位置说明       | String |  选填项              | 'bottom-left'|