feat: progress with popper.js tooltip rendering

bloombergindustry · Jun 25, 2019 · 5a44292 · 5a44292
1 parent 4868387
commit 5a44292
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 13 deletions.
diff --git a/dev/views/Tooltip.vue b/dev/views/Tooltip.vue
@@ -44,7 +44,7 @@
  justify-content="between"
  >
  <FishTankTooltip
- orientation="top"
+ orientation='top'
  placeholder="a top oriented Tooltip"
  >
  <a href="#"><FishTankText color="link" semiBold

diff --git a/src/components/FishTankTooltip.vue b/src/components/FishTankTooltip.vue
@@ -5,6 +5,7 @@
  @mouseleave="destroyPop"
  >
  <slot/>
+ <div class="content">{{placeholder}}</div>
  </div>
 </template>
 
@@ -21,20 +22,16 @@ export default Vue.extend({
  FishTankText
  },
  props: {
- 
+ placeholder: String,
+ orientation: String
  },
  data(){
  return{
  // focus: Boolean,
  popObj: undefined,
  inputEl: undefined,
- slot: undefined,
- placeholder: String,
- orientation: {
- type: String,
- required: false,
- default: 'top'
- },
+ content: undefined,
+ 
 
  }
  },
@@ -46,13 +43,15 @@ export default Vue.extend({
  console.log("true")
 
  this.$data.inputEl = document.querySelector('.popper')
- this.$data.slot = document.querySelector('slot')
+ this.$data.content = document.querySelector('.content')
+ let popperLocation = this.$props.orientation
+ console.log(this.$props.placeholder)
  
- this.$data.popObj = new Popper(this.$data.inputEl, this.$data.placeholder,{
- placement: this.$data.orientation,
+ this.$data.popObj = new Popper(this.$data.inputEl, this.$data.content,{
+ placement: popperLocation,
  modifiers:{
  computeStyle:{
- gpuAcceleration:true
+ // gpuAcceleration:true
  },
  offset:{
  offset:4