pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add example tooltips

Browse Source
This commit is contained in:
luis cielak 2018-08-09 13:49:17 -04:00
parent c9363515be
commit 090768972b
5 changed files with 119 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
js/index.js
View File

@ -1,8 +1,12 @@
import classes from '../styles/atat.scss'
import Vue from 'vue/dist/vue'
import VTooltip from 'v-tooltip'
import textinput from './components/text_input'
Vue.use(VTooltip)
const app = new Vue({
el: '#app-root',
components: {

1
styles/atat.scss
View File

@ -16,6 +16,7 @@
@import 'elements/action_group';
@import 'elements/labels';
@import 'elements/diff';
@import 'elements/tooltip';
@import 'components/topbar';
@import 'components/global_layout';

109
styles/elements/_tooltip.scss Normal file
View File

@ -0,0 +1,109 @@
.tooltip {
display: block;
z-index: 10000;
.tooltip-inner {
background: $color-black;
color: $color-white;
border-radius: $border-radius;
padding: 5px 10px 4px;
}
.tooltip-arrow {
width: 0;
height: 0;
border-style: solid;
position: absolute;
margin: 5px;
border-color: black;
z-index: 1;
}
&[x-placement^="top"] {
margin-bottom: 5px;
.tooltip-arrow {
border-width: 5px 5px 0 5px;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
bottom: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
}
&[x-placement^="bottom"] {
margin-top: 5px;
.tooltip-arrow {
border-width: 0 5px 5px 5px;
border-left-color: transparent;
border-right-color: transparent;
border-top-color: transparent;
top: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
}
&[x-placement^="right"] {
margin-left: 5px;
.tooltip-arrow {
border-width: 5px 5px 5px 0;
border-left-color: transparent;
border-top-color: transparent;
border-bottom-color: transparent;
left: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
}
&[x-placement^="left"] {
margin-right: 5px;
.tooltip-arrow {
border-width: 5px 0 5px 5px;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
right: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
}
&.popover {
$color: #f9f9f9;
.popover-inner {
background: $color;
color: black;
padding: 24px;
border-radius: 5px;
box-shadow: 0 5px 30px rgba(black, .1);
}
.popover-arrow {
border-color: $color;
}
}
&[aria-hidden='true'] {
visibility: hidden;
opacity: 0;
transition: opacity .15s, visibility .15s;
}
&[aria-hidden='false'] {
visibility: visible;
opacity: 1;
transition: opacity .15s;
}
}

0
templates/components/tooltip.html Normal file
View File

5
templates/styleguide.html
View File

@ -128,6 +128,11 @@
<div class='col col--grow'>col 12</div>
</div>
<h5>Tooltips</h5>
<span v-tooltip="'this is a tooltip text'">{{ Icon('help') }}</span><code>top</code> <br>
<span v-tooltip.top-start="'this is a tooltip text'">{{ Icon('help') }}</span><code>top-start</code> <br>
<span v-tooltip.right="'this is a tooltip text'">{{ Icon('help') }}</span><code>right</code> <br>
<span v-tooltip.bottom="'this is a tooltip text'">{{ Icon('help') }}</span><code>bottom</code> <br>
<form>
<textinput inline-template validation='dollars' value='1231231'>