fix(ui): handle long text in BuilderSelect

[madeindjs]

The BuilderSelect trigger has overflow issues with long text containing breakable content. The trick was just a missing white-space: nowrap rule.

I also took the opportunity to add a tooltip to the BuilderSelect's trigger.

[FabienArcellier]

I had this issue 2 weeks ago. It would be awesome to have the popup on the list after 3 seconds to know what is the handler. do you think it would be possible ?

[madeindjs]

Good point @FabienArcellier . I thought about it, it's easy as adding an attribute data-writer-tooltip on each option. The issue is, the tooltip will be displayed every time.

I would like to display the tooltip only if the element overflow. Maybe adding a new prop data-writer-tooltip-strategy="overflow".

I can give a try, it should not be that hard to implement this logic here

writer-framework/src/ui/src/builder/BuilderTooltip.vue

Lines 72 to 76 in 4e956b1

	function handleMouseover(ev: MouseEvent) {
	const el = ev.target as HTMLElement;
	const tooltippedEl = el.closest("[data-writer-tooltip]") as HTMLElement;
	if (!tooltippedEl) {

[madeindjs]

@FabienArcellier , I implemented it 02e3ef0 . So we display the tooltip in BuilderSelect only if the element overflow

Screen.Recording.2024-12-26.at.10.54.57.mov