Fixed tooltip position (#831)

* fixed tooltip position

* fix: Linting error

* [updated] fixed tooltip issue
This commit is contained in:
Sai Deepesh 2021-01-11 20:59:55 +05:30 committed by GitHub
parent cd3d4b1390
commit 13e944a425
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 13 additions and 2 deletions

View File

@ -14,7 +14,7 @@
<ft-tooltip
v-if="tooltip !== ''"
class="selectTooltip"
position="right"
position="bottom"
:tooltip="tooltip"
/>
</label>

View File

@ -21,6 +21,7 @@
<ft-tooltip
v-if="tooltip !== ''"
class="selectTooltip"
position="bottom-left"
:tooltip="tooltip"
/>
</label>

View File

@ -15,6 +15,8 @@
.button:focus + .text.bottom,
.button:hover + .text.bottom,
.button:hover + .text.bottom-left,
.button:hover + .text.bottom-left,
.button:focus + .text.top,
.button:hover + .text.top {
-webkit-transform: translate(-50%, 0);
@ -57,6 +59,14 @@
transform: translate(-50%, -1em);
}
.text.bottom-left {
margin-top: 1em;
top: 100%;
left: -100px;
-webkit-transform: translate(-50%, -1em);
transform: translate(-50%, -1em);
}
.text.left {
margin-right:1em;
right: 100%;

View File

@ -7,7 +7,7 @@ export default Vue.extend({
position: {
type: String,
default: 'bottom',
validator: (value) => value === 'bottom' || value === 'left' || value === 'right' || value === 'top'
validator: (value) => value === 'bottom' || value === 'left' || value === 'right' || value === 'top' || value === 'bottom-left'
},
tooltip: {
type: String,