tipso 基本用法

480 阅读1分钟

链接:tipso-github

<!--head-->
<script src="//cdn.jsdelivr.net/npm/tipso/src/tipso.min.js"></script>
<link
	rel="stylesheet"
	href="//cdn.jsdelivr.net/npm/tipso/src/tipso.min.css"
>

<!--body-->
<a
	href="__MODULE__/Ent/map"
	class="layui-btn layui-btn-sm tip-warning"
	style="background-color:#f13c3c;"
	title="地图"
	target="_blank"
	data-tipso="让人才更精准的找到您"
>
	<i class="layui-icon layui-icon-location"></i>立即标注
</a>
<!--body底部-->
<script>
	$('.tip-success').tipso({
		position: 'bottom'
		, background: '#19BE6B'
		, width: '50%'
	})
	$('.tip-primary').tipso({
		position: 'bottom'
		, background: '#2979FF'
		, width: '50%'
	})
	$('.tip-warning').tipso({
		position: 'bottom'
		, background: '#FFB800'
		, width: 'auto'
	})
	$('.tip-error').tipso({
		position: 'bottom'
		, background: '#FA3534'
		, width: '50%'
	})
</script>
<style>
	.tipso_content {
		text-align: left;
	}

	.tip-success,
	.tip-tip-primary,
	.tip-warning,
	.tip-error {
		cursor: pointer;
	}
</style>