fix(client): dropdown tooltip placement for horizontal layout

This commit is contained in:
Elian Doran 2024-11-23 00:11:49 +02:00
parent 7e5fea8cd2
commit 5f9439a9e0
No known key found for this signature in database

View File

@ -8,7 +8,7 @@ const TPL = `
} }
</style> </style>
<button type="button" data-bs-toggle="dropdown" data-placement="right" <button type="button" data-bs-toggle="dropdown"
aria-haspopup="true" aria-expanded="false" aria-haspopup="true" aria-expanded="false"
class="bx right-dropdown-button launcher-button"></button> class="bx right-dropdown-button launcher-button"></button>
@ -25,6 +25,10 @@ export default class RightDropdownButtonWidget extends BasicWidget {
this.iconClass = iconClass; this.iconClass = iconClass;
this.title = title; this.title = title;
this.dropdownTpl = dropdownTpl; this.dropdownTpl = dropdownTpl;
this.settings = {
titlePlacement: "bottom"
};
} }
doRender() { doRender() {
@ -33,7 +37,10 @@ export default class RightDropdownButtonWidget extends BasicWidget {
this.dropdown = bootstrap.Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']")); this.dropdown = bootstrap.Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']"));
this.$tooltip = this.$widget.find(".tooltip-trigger").attr("title", this.title); this.$tooltip = this.$widget.find(".tooltip-trigger").attr("title", this.title);
this.tooltip = new bootstrap.Tooltip(this.$tooltip); this.tooltip = new bootstrap.Tooltip(this.$tooltip, {
placement: this.settings.titlePlacement,
fallbackPlacements: [ this.settings.titlePlacement ]
});
this.$widget.find(".right-dropdown-button") this.$widget.find(".right-dropdown-button")
.addClass(this.iconClass) .addClass(this.iconClass)