jschaufuss/DiceCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replaced shitty paper-tooltip with custom css tooltip

Browse Source
This commit is contained in:
Stefan Zermatten
2017-07-21 11:01:18 +02:00
parent e89b877326
commit 15e6c12c03
4 changed files with 52 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
rpg-docs/client/views/paperTemplates/inputSuffixes/inputSuffixes.css
View File

@@ -1,10 +1,8 @@
.textarea-bracket-suffix {
float: right;
position: absolute;
right: 6px;
bottom: 12px;
}
margin-bottom: 12px;
}
.description-input {
position: relative;
}
.description-input > paper-textarea {
width: 100%;
width: 100% - 24px;
}

27
rpg-docs/client/views/paperTemplates/inputSuffixes/inputSuffixes.html
View File

@@ -1,20 +1,35 @@
<template name="formulaSuffix">
<div suffix>
<paper-tooltip position="left" animation-delay="0">This is a formula field</paper-tooltip>
<div suffix style="position: relative">
<iron-icon icon="lightbulb-outline"></iron-icon>
{{# simpleTooltip}}
This is a formula field
{{/ simpleTooltip}}
</div>
</template>
<template name="bracketSuffix">
<div suffix>
<paper-tooltip position="left" animation-delay="0">This field accepts formulae in {curly brackets}</paper-tooltip>
<div suffix style="position: relative">
<iron-icon icon="dicecloud:code-braces"></iron-icon>
{{# simpleTooltip}}
This field accepts formulae in {curly brackets}
{{/ simpleTooltip}}
</div>
</template>
<template name="textareaBracketSuffix">
<div class="textarea-bracket-suffix">
<paper-tooltip position="left" animation-delay="0">This field accepts formulae in {curly brackets}</paper-tooltip>
<iron-icon icon="dicecloud:code-braces"></iron-icon>
<div class="markdown" style="position: relative">
<iron-icon icon="dicecloud:markdown"></iron-icon>
{{# simpleTooltip}}
This field accepts markdown formatting
{{/ simpleTooltip}}
</div>
<div class="brackets" style="position: relative">
<!--<paper-tooltip position="left" animation-delay="0">This field accepts formulae in {curly brackets}</paper-tooltip>-->
<iron-icon icon="dicecloud:code-braces"></iron-icon>
{{# simpleTooltip}}
This field accepts formulae in {curly brackets}
{{/ simpleTooltip}}
</div>
</div>
</template>

18
rpg-docs/client/views/paperTemplates/simpleTooltip/simpleTooltip.css Normal file
View File

@@ -0,0 +1,18 @@
.simple-tooltip:hover .tooltip {
opacity: 0.9;
}
.tooltip {
opacity: 0;
transition: opacity 200ms ease-in;
font-size: 12px;
line-height: 1;
background-color: #616161;
color: white;
padding: 8px;
border-radius: 2px;
position: absolute;
right: calc(100% + 8px);
pointer-events: none;
white-space: nowrap;
}

7
rpg-docs/client/views/paperTemplates/simpleTooltip/simpleTooltip.html Normal file
View File

@@ -0,0 +1,7 @@
<template name="simpleTooltip">
<div class="simple-tooltip fit">
<div class="tooltip">
{{> Template.contentBlock}}
</div>
</div>
</template>