Update button tooltip to remove wrapper div and place tooltip inside button element

This commit is contained in:
Andrew Kingston 2022-02-15 12:01:50 +00:00
parent 381070a95c
commit 5d25f80916
1 changed files with 40 additions and 54 deletions

View File

@ -17,8 +17,7 @@
let showTooltip = false
</script>
<div class:container={!!tooltip}>
<button
<button
class:spectrum-Button--cta={cta}
class:spectrum-Button--primary={primary}
class:spectrum-Button--secondary={secondary}
@ -31,7 +30,7 @@
on:click|preventDefault
on:mouseover={() => (showTooltip = true)}
on:mouseleave={() => (showTooltip = false)}
>
>
{#if icon}
<svg
class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}"
@ -57,25 +56,16 @@
</svg>
</div>
{/if}
</button>
{#if showTooltip && tooltip}
<div class="position">
<div class="tooltip">
<Tooltip textWrapping={true} direction={"bottom"} text={tooltip} />
</div>
</div>
{/if}
</div>
</button>
<style>
button {
width: 100%;
}
.container {
display: flex;
align-items: center;
flex-direction: column;
position: relative;
}
.spectrum-Button-label {
white-space: nowrap;
@ -93,12 +83,8 @@
width: 160px;
text-align: center;
transform: translateX(-50%);
top: -5px;
}
.position {
position: relative;
width: 0;
height: 0;
left: 50%;
top: calc(100% - 3px);
}
.tooltip-icon {
padding-left: var(--spacing-m);