<template>
  <fbg-tooltip  v-bind="$attrs" v-on="$listeners" transition="" :popper-class="'fbg-tooltip '+ popperClass">
    <slot />
    <slot slot="content" name="content" />
  </fbg-tooltip>
</template>
<script>
import {Tooltip} from 'element-ui';
export default {
  props: {
    popperClass: {
      type: String,
      default: ''
    }
  },
  components: {
    'fbg-tooltip': Tooltip
  }
}
</script>
<style lang="scss">
.el-tooltip__popper{
  border: 1px solid transparent!important;
  box-shadow: 0px 0px 4px #ccc;
  margin-top: 7px!important;
  
}
.el-tooltip__popper.is-light{
  background:#FFF;
  border:1px solid #ddd!important;
}
.el-tooltip__popper.is-light[x-placement^=top] .popper__arrow{
  border-top-color:#ddd!important;
}
.el-tooltip__popper.is-light[x-placement^=bottom] .popper__arrow{
  border-bottom-color:#ddd!important;
}
.el-tooltip__popper.is-light[x-placement^=left] .popper__arrow{
  border-left-color:#ddd!important;
}
.el-tooltip__popper.is-light[x-placement^=right] .popper__arrow{
  border-right-color:#ddd!important;
}




</style>