Update buttons when the title changes, v2.18.3

CHANGELOG.md

@@ -7,6 +7,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [2.18.3] - 2025-01-15
+
+### Fixed
+
+- `BButton`:
+  - Update buttons when the title changes
+  - Don't show tooltip when empty
+  - Fixed positioning
+
 ## [2.18.2] - 2025-01-15
 
 ### Added
@@ -699,6 +708,7 @@ Please see the [Releases](https://github.com/Open-EO/openeo-vue-components/relea
 
 
 [Unreleased]: https://github.com/Open-EO/openeo-vue-components/compare/v2.18.2...HEAD
+[2.18.3]: https://github.com/Open-EO/openeo-vue-components/compare/v2.18.2...v2.18.3
 [2.18.2]: https://github.com/Open-EO/openeo-vue-components/compare/v2.18.1...v2.18.2
 [2.18.1]: https://github.com/Open-EO/openeo-vue-components/compare/v2.18.0...v2.18.1
 [2.18.0]: https://github.com/Open-EO/openeo-vue-components/compare/v2.17.1...v2.18.0

README.md

@@ -2,7 +2,7 @@
 
 A set of [Vue](https://vuejs.org) components for [openEO](http://openeo.org).
 
-This library's version is [**2.18.2**](CHANGELOG.md) and supports **openEO API versions 1.x.x**.
+This library's version is [**2.18.3**](CHANGELOG.md) and supports **openEO API versions 1.x.x**.
 Legacy versions supporting API version 0.x are available as [releases](https://github.com/Open-EO/openeo-vue-components/releases).
 
 npm: [@openeo/vue-components](https://www.npmjs.com/package/@openeo/vue-components)

components/internal/BButton.vue

@@ -48,7 +48,7 @@ export default {
 		};
 	},
   mounted() {
-    this.container = document.getElementsByName('body')[0];
+    this.container = document.getElementsByTagName('body')[0];
     if (!this.container) {
       this.container = this.$refs.button.parentNode;
       if (!this.container) {
@@ -78,26 +78,35 @@ export default {
       else {
         this.removeTooltip();
       }
+    },
+    title() {
+      if (this.title) {
+        this.updateTooltip();
+      }
+      else {
+        this.showTooltip = false;
+      }
     }
   },
 	methods: {
     createTooltip() {
-      if (!this.container) {
+      if (!this.container || !this.title) {
         return;
       }
       if (this.element) {
         this.removeTooltip();
       }
       this.element = document.createElement('div');
       this.element.className = 'openeo-vue-tooltip';
-      this.element.innerText = this.title;
+      this.element.addEventListener('mouseover', () => this.showTooltip = false);
       this.container.appendChild(this.element);
       this.updateTooltip();
     },
     updateTooltip() {
       if (!this.element) {
         return;
       }
+      this.element.innerText = this.title;
       const el = this.$refs.button;
       const pos = el.getBoundingClientRect();
       this.element.style.top = Math.max(0, (pos.top + el.offsetHeight)) + 1 + 'px';
@@ -107,10 +116,10 @@ export default {
       if (!this.container || !this.element) {
         return;
       }
-      document.removeEventListener('scroll', this.removeTooltip);
       if (this.container.contains(this.element)) {
         this.container.removeChild(this.element);
       }
+      this.element = null;
     },
     click(event) {
       this.$emit('click', event);
@@ -147,9 +156,10 @@ export default {
   color: white;
   padding: 5px;
   border-radius: 5px;
-  z-index: 1000;
+  z-index: 9999;
   font-size: 0.9em;
   border: 1px solid #000;
   text-align: center;
+  max-width: 250px;
 }
 </style>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openeo/vue-components",
-  "version": "2.18.2",
+  "version": "2.18.3",
   "author": "openEO Consortium",
   "contributors": [
     {