ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Make tooltip wrappable

This commit is contained in:
Ramon Wenger 2019-04-11 17:03:06 +02:00
parent 0fd1e928ae
commit d7b9fa0106
2 changed files with 32 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
client/src/components/HelpfulTooltip.vue
View File

@ -1,8 +1,10 @@
<template>
<div class="helpful-tooltip">
<info-icon class="helpful-tooltip__icon"></info-icon>
<div class="helpful-tooltip__text">
<div class="helpful-tooltip__tooltip">
<div class="helpful-tooltip__text">
{{text}}
</div>
</div>
</div>
</template>
@ -32,25 +34,30 @@
fill: $color-grey;
}
&__text {
display: none;
&__tooltip {
visibility: hidden;
position: absolute;
left: 30px;
top: 0px;
white-space: nowrap;
width: 400px;
}
&__text {
display: inline-table;
width: auto;
background-color: $color-white;
border: 1px solid $color-grey;
border-radius: 5px;
padding: $small-spacing;
@include small-text;
&::before {
content: '';
position: absolute;
left: 0;
top: 16px;
margin-left: -2px;
top: 18px;
margin-left: -1px;
border-left: 1px solid $color-grey;
border-top: 1px solid $color-grey;
background-color: $color-white;
@ -58,10 +65,11 @@
height: 10px;
transform: rotate(-45deg) translateY(-50%);
}
}
&:hover &__text {
display: grid;
&:hover &__tooltip {
visibility: visible;
}
}
</style>

27
client/src/components/portfolio/NewProjectEntryWizard.vue
View File

@ -1,11 +1,14 @@
<template>
<modal :hide-header="true">
<div class="project-entry-modal">
<text-form-with-help-text title="Tätigkeit" :value="activity" @change="activity = $event" help-text="Hilfetext für Tätigkeit">
<text-form-with-help-text title="Tätigkeit" :value="activity" @change="activity = $event"
help-text="Hilfetext für Tätigkeit">
</text-form-with-help-text>
<text-form-with-help-text title="Reflexion" :value="reflection" @change="reflection = $event" help-text="Hilfetext für Reflexion">
<text-form-with-help-text title="Reflexion" :value="reflection" @change="reflection = $event"
help-text="Hilfetext für Reflexion">
</text-form-with-help-text>
<text-form-with-help-text title="Nächste Schritte" :value="nextSteps" @change="nextSteps = $event" help-text="Hilfetext für Nächste Schritte">
<text-form-with-help-text title="Nächste Schritte" :value="nextSteps" @change="nextSteps = $event"
help-text="Hilfetext für Nächste Schritte Hilfetext für Nächste Schritte Hilfetext für Nächste Schritte Hilfetext für Nächste Schritte">
</text-form-with-help-text>
</div>
<div slot="footer">
@ -53,15 +56,15 @@
},
update: (store, {data: {addProjectEntry: {projectEntry}}}) => {
const query = PROJECT_QUERY;
const variables = {slug: this.slug};
const data = store.readQuery({query, variables});
if (data.project && data.project.entries) {
data.project.entries.edges.unshift({
node: projectEntry,
__typename: 'ProjectEntryNode'
});
store.writeQuery({query, variables, data});
}
const variables = {slug: this.slug};
const data = store.readQuery({query, variables});
if (data.project && data.project.entries) {
data.project.entries.edges.unshift({
node: projectEntry,
__typename: 'ProjectEntryNode'
});
store.writeQuery({query, variables, data});
}
}
}).then(() => {