Skip to content

Commit

Permalink
feat(notifications): vuestic-tooltip component
Browse files Browse the repository at this point in the history
  • Loading branch information
@smartapant
smartapant committed Feb 5, 2018
1 parent fc2c138 commit 062c72e
Show file tree
Hide file tree
Showing 4 changed files with 106 additions and 69 deletions.
130 changes: 62 additions & 68 deletions src/components/ui/notifications/Notifications.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,78 +3,56 @@
<div class="row">
<div class="col-md-12">
<vuestic-widget :headerText="'Tooltips'">
<div class="row">
<div class="col-md-6">
<fieldset>
<div class="form-group">
<div class="input-group">
<input id="tooltip-title" v-model="tooltipTitle" required/>
<label class="control-label" for="tooltip-title">Tooltip Title</label><i class="bar"></i>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input id="tooltip-text" v-model="tooltipText" required/>
<label class="control-label" for="tooltip-text">Tooltip Text</label><i class="bar"></i>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input id="tooltip-icon" v-model="tooltipIcon" required/>
<label class="control-label" for="tooltip-icon">Tooltip Icon</label><i class="bar"></i>
</div>
</div>
<v-popover popover-class="vuestic-tooltip" placement="right">
<button class="btn btn-sm btn-primary">
Show tooltip
</button>
<template slot="popover">
<div class="popover-icon">
<i class="fa fa-image"></i>
</div>
<div class="popover-content">
<div class="popover-header">Hey!</div>
<div class="popover-body">This popover is amazing</div>
</div>
</template>
</v-popover>
</fieldset>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<fieldset>
<div class="form-group">
<div class="input-group">
<input id="tooltip-title" v-model="tooltipTitle" required/>
<label class="control-label" for="tooltip-title">Tooltip Title</label><i class="bar"></i>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input id="tooltip-text" v-model="tooltipText" required/>
<label class="control-label" for="tooltip-text">Tooltip Text</label><i class="bar"></i>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input id="tooltip-icon" v-model="tooltipIcon" required/>
<label class="control-label" for="tooltip-icon">Tooltip Icon</label><i class="bar"></i>
</div>
</div>
<v-popover popover-class="vuestic-tooltip" placement="right">
<button class="btn btn-sm btn-primary">
Show tooltip
</button>
<template slot="popover">
<div class="popover-icon">
<i class="fa fa-image"></i>
</div>
<div class="popover-content">
<div class="popover-header">Hey!</div>
<div class="popover-body">This popover is amazing</div>
</div>
</template>
</v-popover>
</fieldset>
</div>
<div class="col-md-6">
<p>
Any text can be used for
<a href="#" v-tooltip="{
content: 'You have 2 new messages',
classes: 'vuestic-tooltip',
placement: 'top'
}">
top tooltip
</a>
<vuestic-tooltip :options="topTooltipOptions"><a href="#"> top tooltip</a></vuestic-tooltip>
showcase. Just anything you can possibly imagine to test
<a href="#" v-tooltip="{
content: 'You have 2 new messages',
classes: 'vuestic-tooltip',
placement: 'right'
}">
rightside tooltip
</a>. But it can appear on the
<a href="#" v-tooltip="{
content: 'You have 2 new messages',
classes: 'vuestic-tooltip',
placement: 'left'
}">
left
</a>. Or just
<a href="#" v-tooltip="{
content: 'You have 2 new messages',
classes: 'vuestic-tooltip',
placement: 'bottom'
}">
below
</a>
<vuestic-tooltip :options="rightTooltipOptions"><a href="#">rightside tooltip</a></vuestic-tooltip>.
But it can appear on the
<vuestic-tooltip :options="leftTooltipOptions"><a href="#">left</a></vuestic-tooltip>.
Or just
<vuestic-tooltip :options="bottomTooltipOptions"><a href="#">below</a></vuestic-tooltip>
the item.
</p>
</div>
</div>
</div>
</vuestic-widget>
</div>
Expand Down Expand Up @@ -114,7 +92,23 @@
return {
tooltipTitle: 'Title',
tooltipText: 'Text',
tooltipIcon: 'Icon'
tooltipIcon: 'Icon',
topTooltipOptions: {
content: 'You have 2 new messages',
placement: 'top'
},
leftTooltipOptions: {
content: 'You have 2 new messages',
placement: 'left'
},
rightTooltipOptions: {
content: 'You have 2 new messages',
placement: 'right'
},
bottomTooltipOptions: {
content: 'You have 2 new messages',
placement: 'bottom'
}
}
}
}
Expand Down
2 changes: 2 additions & 0 deletions src/components/vuestic-components/vuestic-components-plugin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import Tabs from 'src/components/vuestic-components/vuestic-tabs/VuesticTabs.vue
import Widget from 'src/components/vuestic-components/vuestic-widget/VuesticWidget.vue'
import Wizard from 'src/components/vuestic-components/vuestic-wizard/VuesticWizard.vue'
import MediumEditor from 'src/components/vuestic-components/vuestic-medium-editor/VuesticMediumEditor.vue'
import Tooltip from 'src/components/vuestic-components/vuestic-tooltip/VuesticTooltip.vue'

const VuesticComponentsPlugin = {
install (Vue, options) {
Expand All @@ -39,6 +40,7 @@ const VuesticComponentsPlugin = {
Vue.component(Widget.name, Widget)
Vue.component(Wizard.name, Wizard)
Vue.component(MediumEditor.name, MediumEditor)
Vue.component(Tooltip.name, Tooltip)
}
}

Expand Down
39 changes: 39 additions & 0 deletions src/components/vuestic-components/vuestic-tooltip/VuesticTooltip.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<template>
<span class="vuestic-tooltip-target" v-tooltip="tooltipOptions">
<slot></slot>
</span>
</template>

<script>
import { VTooltip } from 'v-tooltip'
export default {
name: 'vuestic-tooltip',
directives: { VTooltip },
computed: {
tooltipOptions () {
return Object.assign({}, this.defaultOptions, this.options)
}
},
props: {
options: {
type: Object,
default: {}
}
},
data () {
return {
defaultOptions: {
classes: 'vuestic-tooltip'
}
}
}
}
</script>

<style lang='scss' scoped>
</style>
4 changes: 3 additions & 1 deletion src/sass/_override-custom-libs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,10 +191,12 @@

&[x-placement^="right"] {
@extend .bs-tooltip-right;
margin-left: .15rem;
}

&[x-placement^="left"] {
@extend .bs-tooltip-left;
@extend .bs-tooltip-left;
margin-right: .15rem;
}

&.popover {
Expand Down

0 comments on commit 062c72e

Please sign in to comment.