Overflow tooltip
This commit is contained in:
parent
3d15f71344
commit
21e5c8ecda
|
@ -27,6 +27,7 @@
|
||||||
export let clickOutsideOverride = false
|
export let clickOutsideOverride = false
|
||||||
export let resizable = true
|
export let resizable = true
|
||||||
export let wrap = false
|
export let wrap = false
|
||||||
|
export let overflow = false
|
||||||
|
|
||||||
$: target = portalTarget || getContext(Context.PopoverRoot) || ".spectrum"
|
$: target = portalTarget || getContext(Context.PopoverRoot) || ".spectrum"
|
||||||
|
|
||||||
|
@ -104,6 +105,7 @@
|
||||||
class="spectrum-Popover is-open"
|
class="spectrum-Popover is-open"
|
||||||
class:customZindex
|
class:customZindex
|
||||||
class:hidden={!showPopover}
|
class:hidden={!showPopover}
|
||||||
|
class:overflow
|
||||||
role="presentation"
|
role="presentation"
|
||||||
style="height: {customHeight}; --customZindex: {customZindex};"
|
style="height: {customHeight}; --customZindex: {customZindex};"
|
||||||
transition:fly|local={{ y: -20, duration: animate ? 260 : 0 }}
|
transition:fly|local={{ y: -20, duration: animate ? 260 : 0 }}
|
||||||
|
@ -122,6 +124,9 @@
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
transition: opacity 260ms ease-out;
|
transition: opacity 260ms ease-out;
|
||||||
}
|
}
|
||||||
|
.spectrum-Popover.overflow {
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
.hidden {
|
.hidden {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
|
@ -31,7 +31,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
const options = [
|
const options = [
|
||||||
{ icon: "Edit", value: PERMISSION_OPTIONS.WRITABLE, tooltip: "Writable" },
|
{ icon: "Edit", value: PERMISSION_OPTIONS.WRITABLE, tooltip: "Writeable" },
|
||||||
{
|
{
|
||||||
icon: "VisibilityOff",
|
icon: "VisibilityOff",
|
||||||
value: PERMISSION_OPTIONS.HIDDEN,
|
value: PERMISSION_OPTIONS.HIDDEN,
|
||||||
|
@ -61,7 +61,7 @@
|
||||||
</ActionButton>
|
</ActionButton>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Popover bind:open {anchor} align="left">
|
<Popover bind:open {anchor} align="left" overflow>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
{#if $stickyColumn}
|
{#if $stickyColumn}
|
||||||
|
|
Loading…
Reference in New Issue