Bug 38201: Add a ToolTip component
Signed-off-by: Michaela Sieber <michaela.sieber@kit.edu> Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org> Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
This commit is contained in:
parent
a3b4b2a1e1
commit
4dabb65b5d
|
|
@ -138,12 +138,14 @@
|
|||
:resource="resource"
|
||||
></FormRelationshipSelect>
|
||||
</template>
|
||||
<ToolTip v-if="attr.toolTip" :toolTip="attr.toolTip"></ToolTip>
|
||||
<span v-if="attr.required" class="required">{{ $__("Required") }}</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BaseElement from "./BaseElement.vue";
|
||||
import FormRelationshipSelect from "./FormRelationshipSelect.vue";
|
||||
import ToolTip from "./ToolTip.vue";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
|
|
@ -212,6 +214,6 @@ export default {
|
|||
},
|
||||
},
|
||||
name: "FormElement",
|
||||
components: { FormRelationshipSelect },
|
||||
components: { FormRelationshipSelect, ToolTip },
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,34 @@
|
|||
<template>
|
||||
<a
|
||||
v-if="toolTip"
|
||||
class="tooltip_helper"
|
||||
data-bs-toggle="tooltip"
|
||||
:title="toolTip"
|
||||
><i class="fa-solid fa-circle-question"></i
|
||||
></a>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Tooltip from "bootstrap/js/dist/tooltip";
|
||||
|
||||
export default {
|
||||
props: {
|
||||
toolTip: String | null,
|
||||
},
|
||||
mounted() {
|
||||
new Tooltip(document.body, {
|
||||
selector: "[data-bs-toggle='tooltip']",
|
||||
});
|
||||
},
|
||||
name: "ToolTip",
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.tooltip_helper {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
.tooltip_helper:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue