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:
Pedro Amorim 2025-02-03 11:00:16 +00:00 committed by Lucas Gass
parent a3b4b2a1e1
commit 4dabb65b5d
No known key found for this signature in database
GPG Key ID: 60B447398B0D36CA
2 changed files with 37 additions and 1 deletions

View File

@ -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>

View File

@ -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>