Skip to content

Instantly share code, notes, and snippets.

@hal0gen
Created June 24, 2017 16:05
Show Gist options
  • Save hal0gen/06504ded380abdff761d6c411511d2a9 to your computer and use it in GitHub Desktop.
Save hal0gen/06504ded380abdff761d6c411511d2a9 to your computer and use it in GitHub Desktop.
VueJS integration with Foundation 6.4.0
<template>
<div class="grid-container">
<div class="grid-x">
<div class="callout">
<p>
The <tooltip :title="'Fancy word for a beetle.'" :fade-in-duration="800" :position="'right'">scarabaeus</tooltip> hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet. Legrand immediately took the scythe, and cleared with it a circular space, three or four yards in diameter, just beneath the insect, and, having accomplished this, ordered Jupiter to let go the string and come down from the tree.
</p>
</div>
</div>
</div>
</template>
<script>
import Tooltip from './Tooltip';
export default {
name: 'hello',
components: { Tooltip },
};
</script>
<style lang="scss">
@import '~foundation-sites/scss/foundation';
@include foundation-everything();
.callout {
margin-top: 2rem;
}
</style>
<template>
<span class="has-tip" :title="title">
<slot></slot>
</span>
</template>
<script>
/* eslint-disable */
import $ from 'jquery';
import whatInput from 'what-input';
import Foundation from 'foundation-sites';
export default {
name: 'tooltip',
props: [
'title',
'hoverDelay',
'fadeInDuration',
'fadeOutDuration',
'disableHover',
'templateClasses',
'tooltipClass',
'triggerClass',
'showOn',
'template',
'tipText',
'clickOpen',
'position',
'alignment',
'allowOverlap',
'allowBottomOverlap',
'vOffset',
'hOffset',
'tooltipHeight',
'tooltipWidth',
'allowHtml',
],
data() {
return {
tooltip: null,
};
},
mounted() {
this.tooltip = new Foundation.Tooltip($(this.$el), {
hoverDelay: this.hoverDelay || 200,
fadeInDuration: this.fadeInDuration || 150,
fadeOutDuration: this.fadeOutDuration || 150,
disableHover: this.disableHover || false,
templateClasses: this.templateClasses || '',
tooltipClass: this.tooltipClass || 'tooltip',
triggerClass: this.triggerClass || 'has-tip',
showOn: this.showOn || 'small',
template: this.template || '',
tipText: this.tipText || '',
clickOpen: this.clickOpen || true,
position: this.position || 'auto',
alignment: this.alignment || 'auto',
allowOverlap: this.allowOverlap || false,
allowBottomOverlap: this.allowBottomOverlap || false,
vOffset: this.vOffset || 0,
hOffset: this.hOffset ||0 ,
tooltipHeight: this.tooltipHeight || 14,
tooltipWidth: this.tooltipWidth || 12,
allowHtml: this.allowHtml || false,
});
}
};
</script>
<style>
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment