import { DirectiveBinding } from 'vue' ; import { createPopper } from '@popperjs/core' ; const getUID = ( prefix ) => { do { prefix += Math . floor ( Math . random ( ) * 1000000 ) ; } while ( document . getElementById ( prefix ) ) ; return prefix ; } ; const createTooltipElement = ( id , content ) : HTMLDivElement => { const tooltip = document . createElement ( 'div' ) ; tooltip . id = id ; tooltip . classList . add ( 'tooltip' , 'bs-tooltip-auto' , 'fade' ) ; tooltip . setAttribute ( 'role' , 'tooltip' ) ; tooltip . innerHTML = `<div class="tooltip-arrow" data-popper-arrow></div>
     <div class="tooltip-inner" id="">${ content }</div>` ; return tooltip ; } ; const addTooltipElement = ( tooltip , el , popperOptions ) => { document . body . appendChild ( tooltip ) ; createPopper ( el , tooltip , popperOptions ) ; setTimeout ( ( ) => { tooltip . classList . add ( 'show' ) ; } , 1 ) ; } ; const removeTooltipElement = ( tooltip ) => { tooltip . classList . remove ( 'show' ) ; setTimeout ( ( ) => { document . body . removeChild ( tooltip ) ; } , 300 ) ; } ; const toggleTooltipElement = ( tooltip , el , popperOptions ) => { const popperElement = document . getElementById ( tooltip . id ) ; if ( popperElement && popperElement . classList . contains ( 'show' ) ) { removeTooltipElement ( tooltip ) ; return ; } addTooltipElement ( tooltip , el , popperOptions ) ; } ; export default { mounted ( el , binding ) { const value = binding . value ; const content = typeof value === 'string' ? value : value . content ? value . content : '' ; const trigger = value . trigger ? value . trigger : 'hover' ; const offset = value . offset ? value . offset : [ 0 , 0 ] ; const placement = value . placement ? value . placement : 'top' ; const popperOptions = { placement : placement , modifiers : [ { name : 'offset' , options : { offset : offset , } , } , ] , } ; const tooltipUID = getUID ( 'tooltip' ) ; binding . arg = tooltipUID ; const tooltip = createTooltipElement ( tooltipUID , content ) ; trigger . includes ( 'click' ) && el . addEventListener ( 'click' , ( ) => { toggleTooltipElement ( tooltip , el , popperOptions ) ; } ) ; if ( trigger . includes ( 'focus' ) ) { el . addEventListener ( 'focus' , ( ) => { addTooltipElement ( tooltip , el , popperOptions ) ; } ) ; el . addEventListener ( 'blur' , ( ) => { removeTooltipElement ( tooltip ) ; } ) ; } if ( trigger . includes ( 'hover' ) ) { el . addEventListener ( 'mouseenter' , ( ) => { addTooltipElement ( tooltip , el , popperOptions ) ; } ) ; el . addEventListener ( 'mouseleave' , ( ) => { removeTooltipElement ( tooltip ) ; } ) ; } } , beforeUnmount ( binding ) { const tooltip = binding . arg && document . getElementById ( binding . arg ) ; tooltip && tooltip . remove ( ) ; } , } ;