Switch TooltipWrapper to AbsTooltip. Messages were being truncated
This commit is contained in:
parent
d50a8e0746
commit
27917c78d1
|
@ -1,12 +1,10 @@
|
||||||
<script>
|
<script>
|
||||||
import Tooltip from "./Tooltip.svelte"
|
|
||||||
import Icon from "../Icon/Icon.svelte"
|
import Icon from "../Icon/Icon.svelte"
|
||||||
|
import AbsTooltip from "./AbsTooltip.svelte"
|
||||||
|
|
||||||
export let tooltip = ""
|
export let tooltip = ""
|
||||||
export let size = "M"
|
export let size = "M"
|
||||||
export let disabled = true
|
export let disabled = true
|
||||||
|
|
||||||
let showTooltip = false
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||||
|
@ -14,20 +12,15 @@
|
||||||
<slot />
|
<slot />
|
||||||
{#if tooltip}
|
{#if tooltip}
|
||||||
<div class="icon-container">
|
<div class="icon-container">
|
||||||
<div
|
<AbsTooltip text={tooltip}>
|
||||||
class="icon"
|
<div
|
||||||
class:icon-small={size === "M" || size === "S"}
|
class="icon"
|
||||||
on:mouseover={() => (showTooltip = true)}
|
class:icon-small={size === "M" || size === "S"}
|
||||||
on:mouseleave={() => (showTooltip = false)}
|
on:focus
|
||||||
on:focus
|
>
|
||||||
>
|
<Icon name="InfoOutline" size="S" {disabled} hoverable />
|
||||||
<Icon name="InfoOutline" size="S" {disabled} />
|
|
||||||
</div>
|
|
||||||
{#if showTooltip}
|
|
||||||
<div class="tooltip">
|
|
||||||
<Tooltip textWrapping={true} direction={"bottom"} text={tooltip} />
|
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
</AbsTooltip>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
@ -44,14 +37,6 @@
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
.tooltip {
|
|
||||||
position: absolute;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
top: 15px;
|
|
||||||
z-index: 200;
|
|
||||||
width: 160px;
|
|
||||||
}
|
|
||||||
.icon {
|
.icon {
|
||||||
transform: scale(0.75);
|
transform: scale(0.75);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue