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

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

@ -1,11 +1,14 @@
<template> <template>
<modal :hide-header="true"> <modal :hide-header="true">
<div class="project-entry-modal"> <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>
<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>
<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> </text-form-with-help-text>
</div> </div>
<div slot="footer"> <div slot="footer">
@ -53,15 +56,15 @@
}, },
update: (store, {data: {addProjectEntry: {projectEntry}}}) => { update: (store, {data: {addProjectEntry: {projectEntry}}}) => {
const query = PROJECT_QUERY; const query = PROJECT_QUERY;
const variables = {slug: this.slug}; const variables = {slug: this.slug};
const data = store.readQuery({query, variables}); const data = store.readQuery({query, variables});
if (data.project && data.project.entries) { if (data.project && data.project.entries) {
data.project.entries.edges.unshift({ data.project.entries.edges.unshift({
node: projectEntry, node: projectEntry,
__typename: 'ProjectEntryNode' __typename: 'ProjectEntryNode'
}); });
store.writeQuery({query, variables, data}); store.writeQuery({query, variables, data});
} }
} }
}).then(() => { }).then(() => {