<template>
	<div class="efly-tooltip"
		 @mouseenter.stop="hover"
		 @mouseleave.stop="leave"
		 @mousedown.stop="click"
	>
		<slot></slot>
		<div class="efly-tooltip-content"
			 :style="{
				 top: top,
				 left: location.left,
				 right: right,
				 position: position,
				 opacity: status.opacity
			 }"
			 v-show="status.show"
		>
			<div class="efly-tooltip-text" :class="{
		    	'arrow-left': placement === 'left',
		    	'arrow-top-left': placement === 'top-left',
		    	'arrow-top-right': placement === 'top-right',
		    	'arrow-top': placement === 'top',
		    	'arrow-bottom-left': placement === 'bottom-left',
		    	'arrow-bottom-right': placement === 'bottom-right',
		    	'arrow-bottom': placement === 'bottom',
		    	'arrow-right': placement === 'right',
		    	'efly-tooltip-primary': type === 'primary',
		    	'efly-tooltip-danger': type === 'danger',
		    	'efly-tooltip-success': type === 'success',
		    	'efly-tooltip-warning': type === 'warning',
		    	'efly-tooltip-info': type === 'info',
				'efly-tooltip-white': type === 'white'
			 }"
				 :style="{
			    	'line-height': lineHeight,
			    	'width': width,
			    	'white-space': width === 'auto' ? 'nowrap' : 'normal',
				 }"
			>
				<span v-if="content">{{content}}</span>
				<slot name="content"></slot>
			</div>
		</div>
	</div>
</template>

<script>
    import EflyTooltip from "./tooltip";

    export default EflyTooltip;
</script>

<style lang="scss" scoped>
</style>
