Fail
Unable to find role="tooltip"
Ignored nodes: comments, script, style
<div
id="storybook-root"
>
<div
class="enso-dashboard"
>
<div
class="flex flex-col gap-4"
>
<h1
class="text-primary text-xl leading-[29px] before:h-0.5 after:h-[5px] font-medium text-balance flex-col before:block after:block before:flex-none after:flex-none before:w-full after:w-full"
id=":r0:"
>
Tooltip
</h1>
<div
class="grid grid-cols-4 place-content-center place-items-start gap-3"
>
<button
class="group h-[max-content] outline-offset-[1px] outline-transparent border-0.5 border-transparent whitespace-nowrap cursor-pointer select-none appearance-none text-center items-center justify-center transition-[opacity,outline-offset,background,border-color] duration-150 ease-in-out text-xs leading-[20px] before:h-[1px] after:h-[3px] font-semibold flex-col before:block after:block before:flex-none after:flex-none before:w-full after:w-full flex px-[9px] py-[3.5px] rounded-full bg-primary text-white hover:bg-primary/70"
data-hovered="true"
data-rac=""
type="button"
>
<span
class="relative block"
>
<span
class="flex items-center gap-2"
id=":r2:"
>
<span
class="inline-flex items-center justify-center gap-1 w-full"
>
Tooltip
</span>
</span>
</span>
</button>
<button
aria-label="Tooltip uses aria-label for icon buttons"
class="group h-[max-content] outline-transparent border-transparent whitespace-nowrap cursor-pointer select-none appearance-none text-center items-center justify-center transition-[opacity,outline-offset,background,border-color] duration-150 ease-in-out flex-col before:flex-none after:flex-none flex text-xs leading-[20px] before:h-[1px] after:h-[3px] font-medium before:hidden after:hidden before:w-0 after:w-0 border-0 outline-offset-[5px] bg-primary text-white hover:bg-primary/70 p-0 rounded-full"
data-rac=""
data-testid="icon-button"
type="button"
>
<span
class="relative block"
>
<span
class="flex items-center gap-2"
id=":r5:"
>
<span
class="flex relative after:absolute after:cursor-pointer group-disabled:after:cursor-not-allowed after:inset-0"
>
<div
class="flex-none aspect-square flex items-center justify-center mb-[unset] w-4 h-4"
style="background-color: currentcolor; mask-image: url(\"data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0.4%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3ccircle%20cx='8.4'%20cy='8'%20r='7'%20stroke='black'%20stroke-width='2'%20/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M12.02%2010.8112C12.3647%2010.4101%2012.573%209.88852%2012.573%209.31828C12.573%208.05263%2011.5469%207.02661%2010.2813%207.02661C9.49094%207.02661%208.79404%207.4267%208.38207%208.0354C7.79798%208.82866%206.85752%209.34336%205.79686%209.34336C5.07403%209.34336%204.40704%209.10432%203.87061%208.70098L3.87076%208.70196C3.98182%209.41859%204.26135%2010.0986%204.68636%2010.6862C5.11138%2011.2738%205.66976%2011.7522%206.31561%2012.082C6.96147%2012.4118%207.67636%2012.5836%208.40155%2012.5834C9.12673%2012.5831%209.84151%2012.4108%2010.4871%2012.0806C11.0855%2011.7745%2011.6086%2011.3409%2012.02%2010.8112Z'%20fill='black'%20/%3e%3c/svg%3e\"); mask-position: center center; mask-repeat: no-repeat; mask-size: contain;"
>
<img
alt=""
class="pointer-events-none opacity-0"
draggable="false"
src="data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0.4%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3ccircle%20cx='8.4'%20cy='8'%20r='7'%20stroke='black'%20stroke-width='2'%20/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M12.02%2010.8112C12.3647%2010.4101%2012.573%209.88852%2012.573%209.31828C12.573%208.05263%2011.5469%207.02661%2010.2813%207.02661C9.49094%207.02661%208.79404%207.4267%208.38207%208.0354C7.79798%208.82866%206.85752%209.34336%205.79686%209.34336C5.07403%209.34336%204.40704%209.10432%203.87061%208.70098L3.87076%208.70196C3.98182%209.41859%204.26135%2010.0986%204.68636%2010.6862C5.11138%2011.2738%205.66976%2011.7522%206.31561%2012.082C6.96147%2012.4118%207.67636%2012.5836%208.40155%2012.5834C9.12673%2012.5831%209.84151%2012.4108%2010.4871%2012.0806C11.0855%2011.7745%2011.6086%2011.3409%2012.02%2010.8112Z'%20fill='black'%20/%3e%3c/svg%3e"
/>
</div>
</span>
</span>
</span>
</button>
<button
class="group h-[max-content] outline-transparent border-transparent whitespace-nowrap cursor-pointer select-none appearance-none text-center items-center justify-center transition-[opacity,outline-offset,background,border-color] duration-150 ease-in-out flex-col before:flex-none after:flex-none flex text-xs leading-[20px] before:h-[1px] after:h-[3px] font-medium before:hidden after:hidden before:w-0 after:w-0 border-0 outline-offset-[5px] bg-primary text-white hover:bg-primary/70 p-0 rounded-full"
data-rac=""
data-testid="icon-button-no-tooltip"
type="button"
>
<span
class="relative block"
>
<span
class="flex items-center gap-2"
id=":r8:"
>
<span
class="flex relative after:absolute after:cursor-pointer group-disabled:after:cursor-not-allowed after:inset-0"
>
<div
class="flex-none aspect-square flex items-center justify-center mb-[unset] w-4 h-4"
style="background-color: currentcolor; mask-image: url(\"data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0.4%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3ccircle%20cx='8.4'%20cy='8'%20r='7'%20stroke='black'%20stroke-width='2'%20/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M12.02%2010.8112C12.3647%2010.4101%2012.573%209.88852%2012.573%209.31828C12.573%208.05263%2011.5469%207.02661%2010.2813%207.02661C9.49094%207.02661%208.79404%207.4267%208.38207%208.0354C7.79798%208.82866%206.85752%209.34336%205.79686%209.34336C5.07403%209.34336%204.40704%209.10432%203.87061%208.70098L3.87076%208.70196C3.98182%209.41859%204.26135%2010.0986%204.68636%2010.6862C5.11138%2011.2738%205.66976%2011.7522%206.31561%2012.082C6.96147%2012.4118%207.67636%2012.5836%208.40155%2012.5834C9.12673%2012.5831%209.84151%2012.4108%2010.4871%2012.0806C11.0855%2011.7745%2011.6086%2011.3409%2012.02%2010.8112Z'%20fill='black'%20/%3e%3c/svg%3e\")...
Ignored nodes: comments, script, style
<div
id="storybook-root"
>
<div
class="enso-dashboard"
>
<div
class="flex flex-col gap-4"
>
<h1
class="text-primary text-xl leading-[29px] before:h-0.5 after:h-[5px] font-medium text-balance flex-col before:block after:block before:flex-none after:flex-none before:w-full after:w-full"
id=":r0:"
>
Tooltip
</h1>
<div
class="grid grid-cols-4 place-content-center place-items-start gap-3"
>
<button
class="group h-[max-content] outline-offset-[1px] outline-transparent border-0.5 border-transparent whitespace-nowrap cursor-pointer select-none appearance-none text-center items-center justify-center transition-[opacity,outline-offset,background,border-color] duration-150 ease-in-out text-xs leading-[20px] before:h-[1px] after:h-[3px] font-semibold flex-col before:block after:block before:flex-none after:flex-none before:w-full after:w-full flex px-[9px] py-[3.5px] rounded-full bg-primary text-white hover:bg-primary/70"
data-hovered="true"
data-rac=""
type="button"
>
<span
class="relative block"
>
<span
class="flex items-center gap-2"
id=":r2:"
>
<span
class="inline-flex items-center justify-center gap-1 w-full"
>
Tooltip
</span>
</span>
</span>
</button>
<button
aria-label="Tooltip uses aria-label for icon buttons"
class="group h-[max-content] outline-transparent border-transparent whitespace-nowrap cursor-pointer select-none appearance-none text-center items-center justify-center transition-[opacity,outline-offset,background,border-color] duration-150 ease-in-out flex-col before:flex-none after:flex-none flex text-xs leading-[20px] before:h-[1px] after:h-[3px] font-medium before:hidden after:hidden before:w-0 after:w-0 border-0 outline-offset-[5px] bg-primary text-white hover:bg-primary/70 p-0 rounded-full"
data-rac=""
data-testid="icon-button"
type="button"
>
<span
class="relative block"
>
<span
class="flex items-center gap-2"
id=":r5:"
>
<span
class="flex relative after:absolute after:cursor-pointer group-disabled:after:cursor-not-allowed after:inset-0"
>
<div
class="flex-none aspect-square flex items-center justify-center mb-[unset] w-4 h-4"
style="background-color: currentcolor; mask-image: url(\"data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0.4%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3ccircle%20cx='8.4'%20cy='8'%20r='7'%20stroke='black'%20stroke-width='2'%20/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M12.02%2010.8112C12.3647%2010.4101%2012.573%209.88852%2012.573%209.31828C12.573%208.05263%2011.5469%207.02661%2010.2813%207.02661C9.49094%207.02661%208.79404%207.4267%208.38207%208.0354C7.79798%208.82866%206.85752%209.34336%205.79686%209.34336C5.07403%209.34336%204.40704%209.10432%203.87061%208.70098L3.87076%208.70196C3.98182%209.41859%204.26135%2010.0986%204.68636%2010.6862C5.11138%2011.2738%205.66976%2011.7522%206.31561%2012.082C6.96147%2012.4118%207.67636%2012.5836%208.40155%2012.5834C9.12673%2012.5831%209.84151%2012.4108%2010.4871%2012.0806C11.0855%2011.7745%2011.6086%2011.3409%2012.02%2010.8112Z'%20fill='black'%20/%3e%3c/svg%3e\"); mask-position: center center; mask-repeat: no-repeat; mask-size: contain;"
>
<img
alt=""
class="pointer-events-none opacity-0"
draggable="false"
src="data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0.4%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3ccircle%20cx='8.4'%20cy='8'%20r='7'%20stroke='black'%20stroke-width='2'%20/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M12.02%2010.8112C12.3647%2010.4101%2012.573%209.88852%2012.573%209.31828C12.573%208.05263%2011.5469%207.02661%2010.2813%207.02661C9.49094%207.02661%208.79404%207.4267%208.38207%208.0354C7.79798%208.82866%206.85752%209.34336%205.79686%209.34336C5.07403%209.34336%204.40704%209.10432%203.87061%208.70098L3.87076%208.70196C3.98182%209.41859%204.26135%2010.0986%204.68636%2010.6862C5.11138%2011.2738%205.66976%2011.7522%206.31561%2012.082C6.96147%2012.4118%207.67636%2012.5836%208.40155%2012.5834C9.12673%2012.5831%209.84151%2012.4108%2010.4871%2012.0806C11.0855%2011.7745%2011.6086%2011.3409%2012.02%2010.8112Z'%20fill='black'%20/%3e%3c/svg%3e"
/>
</div>
</span>
</span>
</span>
</button>
<button
class="group h-[max-content] outline-transparent border-transparent whitespace-nowrap cursor-pointer select-none appearance-none text-center items-center justify-center transition-[opacity,outline-offset,background,border-color] duration-150 ease-in-out flex-col before:flex-none after:flex-none flex text-xs leading-[20px] before:h-[1px] after:h-[3px] font-medium before:hidden after:hidden before:w-0 after:w-0 border-0 outline-offset-[5px] bg-primary text-white hover:bg-primary/70 p-0 rounded-full"
data-rac=""
data-testid="icon-button-no-tooltip"
type="button"
>
<span
class="relative block"
>
<span
class="flex items-center gap-2"
id=":r8:"
>
<span
class="flex relative after:absolute after:cursor-pointer group-disabled:after:cursor-not-allowed after:inset-0"
>
<div
class="flex-none aspect-square flex items-center justify-center mb-[unset] w-4 h-4"
style="background-color: currentcolor; mask-image: url(\"data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0.4%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3ccircle%20cx='8.4'%20cy='8'%20r='7'%20stroke='black'%20stroke-width='2'%20/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M12.02%2010.8112C12.3647%2010.4101%2012.573%209.88852%2012.573%209.31828C12.573%208.05263%2011.5469%207.02661%2010.2813%207.02661C9.49094%207.02661%208.79404%207.4267%208.38207%208.0354C7.79798%208.82866%206.85752%209.34336%205.79686%209.34336C5.07403%209.34336%204.40704%209.10432%203.87061%208.70098L3.87076%208.70196C3.98182%209.41859%204.26135%2010.0986%204.68636%2010.6862C5.11138%2011.2738%205.66976%2011.7522%206.31561%2012.082C6.96147%2012.4118%207.67636%2012.5836%208.40155%2012.5834C9.12673%2012.5831%209.84151%2012.4108%2010.4871%2012.0806C11.0855%2011.7745%2011.6086%2011.3409%2012.02%2010.8112Z'%20fill='black'%20/%3e%3c/svg%3e\")...View in Storybook
Chrome 1211168x85
Linux Linux Ubuntu 20.04.4
a27c53 on wip/sergeigarin/storybook
Caught exception in
play functionThis story threw an error after it finished rendering which means interactions may not have been executed fully.
Error: Unable to find role="tooltip"
Ignored nodes: comments, script, style
<div
id="storybook-root"
>
<div
class="enso-dashboard"
>
<div
class="flex flex-col gap-4"
>
<h1
class="text-primary text-xl leading-[29px] before:h-0.5 after:h-[5px] font-medium text-balance flex-col before:block after:block before:flex-none after:flex-none before:w-full after:w-full"
id=":r0:"
>
Tooltip
</h1>
<div
class="grid grid-cols-4 place-content-center place-items-start gap-3"
>
<button
class="group h-[max-content] outline-offset-[1px] outline-transparent border-0.5 border-transparent whitespace-nowrap cursor-pointer select-none appearance-none text-center items-center justify-center transition-[opacity,outline-offset,background,border-color] duration-150 ease-in-out text-xs leading-[20px] before:h-[1px] after:h-[3px] font-semibold flex-col before:block after:block before:flex-none after:flex-none before:w-full after:w-full flex px-[9px] py-[3.5px] rounded-full bg-primary text-white hover:bg-primary/70"
data-hovered="true"
data-rac=""
type="button"
>
<span
class="relative block"
>
<span
class="flex items-center gap-2"
id=":r2:"
>
<span
class="inline-flex items-center justify-center gap-1 w-full"
>
Tooltip
</span>
</span>
</span>
</button>
<button
aria-label="Tooltip uses aria-label for icon buttons"
class="group h-[max-content] outline-transparent border-transparent whitespace-nowrap cursor-pointer select-none appearance-none text-center items-center justify-center transition-[opacity,outline-offset,background,border-color] duration-150 ease-in-out flex-col before:flex-none after:flex-none flex text-xs leading-[20px] before:h-[1px] after:h-[3px] font-medium before:hidden after:hidden before:w-0 after:w-0 border-0 outline-offset-[5px] bg-primary text-white hover:bg-primary/70 p-0 rounded-full"
data-rac=""
data-testid="icon-button"
type="button"
>
<span
class="relative block"
>
<span
class="flex items-center gap-2"
id=":r5:"
>
<span
class="flex relative after:absolute after:cursor-pointer group-disabled:after:cursor-not-allowed after:inset-0"
>
<div
class="flex-none aspect-square flex items-center justify-center mb-[unset] w-4 h-4"
style="background-color: currentcolor; mask-image: url(\"data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0.4%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3ccircle%20cx='8.4'%20cy='8'%20r='7'%20stroke='black'%20stroke-width='2'%20/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M12.02%2010.8112C12.3647%2010.4101%2012.573%209.88852%2012.573%209.31828C12.573%208.05263%2011.5469%207.02661%2010.2813%207.02661C9.49094%207.02661%208.79404%207.4267%208.38207%208.0354C7.79798%208.82866%206.85752%209.34336%205.79686%209.34336C5.07403%209.34336%204.40704%209.10432%203.87061%208.70098L3.87076%208.70196C3.98182%209.41859%204.26135%2010.0986%204.68636%2010.6862C5.11138%2011.2738%205.66976%2011.7522%206.31561%2012.082C6.96147%2012.4118%207.67636%2012.5836%208.40155%2012.5834C9.12673%2012.5831%209.84151%2012.4108%2010.4871%2012.0806C11.0855%2011.7745%2011.6086%2011.3409%2012.02%2010.8112Z'%20fill='black'%20/%3e%3c/svg%3e\"); mask-position: center center; mask-repeat: no-repeat; mask-size: contain;"
>
<img
alt=""
class="pointer-events-none opacity-0"
draggable="false"
src="data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0.4%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3ccircle%20cx='8.4'%20cy='8'%20r='7'%20stroke='black'%20stroke-width='2'%20/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M12.02%2010.8112C12.3647%2010.4101%2012.573%209.88852%2012.573%209.31828C12.573%208.05263%2011.5469%207.02661%2010.2813%207.02661C9.49094%207.02661%208.79404%207.4267%208.38207%208.0354C7.79798%208.82866%206.85752%209.34336%205.79686%209.34336C5.07403%209.34336%204.40704%209.10432%203.87061%208.70098L3.87076%208.70196C3.98182%209.41859%204.26135%2010.0986%204.68636%2010.6862C5.11138%2011.2738%205.66976%2011.7522%206.31561%2012.082C6.96147%2012.4118%207.67636%2012.5836%208.40155%2012.5834C9.12673%2012.5831%209.84151%2012.4108%2010.4871%2012.0806C11.0855%2011.7745%2011.6086%2011.3409%2012.02%2010.8112Z'%20fill='black'%20/%3e%3c/svg%3e"
/>
</div>
</span>
</span>
</span>
</button>
<button
class="group h-[max-content] outline-transparent border-transparent whitespace-nowrap cursor-pointer select-none appearance-none text-center items-center justify-center transition-[opacity,outline-offset,background,border-color] duration-150 ease-in-out flex-col before:flex-none after:flex-none flex text-xs leading-[20px] before:h-[1px] after:h-[3px] font-medium before:hidden after:hidden before:w-0 after:w-0 border-0 outline-offset-[5px] bg-primary text-white hover:bg-primary/70 p-0 rounded-full"
data-rac=""
data-testid="icon-button-no-tooltip"
type="button"
>
<span
class="relative block"
>
<span
class="flex items-center gap-2"
id=":r8:"
>
<span
class="flex relative after:absolute after:cursor-pointer group-disabled:after:cursor-not-allowed after:inset-0"
>
<div
class="flex-none aspect-square flex items-center justify-center mb-[unset] w-4 h-4"
style="background-color: currentcolor; mask-image: url(\"data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0.4%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3ccircle%20cx='8.4'%20cy='8'%20r='7'%20stroke='black'%20stroke-width='2'%20/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M12.02%2010.8112C12.3647%2010.4101%2012.573%209.88852%2012.573%209.31828C12.573%208.05263%2011.5469%207.02661%2010.2813%207.02661C9.49094%207.02661%208.79404%207.4267%208.38207%208.0354C7.79798%208.82866%206.85752%209.34336%205.79686%209.34336C5.07403%209.34336%204.40704%209.10432%203.87061%208.70098L3.87076%208.70196C3.98182%209.41859%204.26135%2010.0986%204.68636%2010.6862C5.11138%2011.2738%205.66976%2011.7522%206.31561%2012.082C6.96147%2012.4118%207.67636%2012.5836%208.40155%2012.5834C9.12673%2012.5831%209.84151%2012.4108%2010.4871%2012.0806C11.0855%2011.7745%2011.6086%2011.3409%2012.02%2010.8112Z'%20fill='black'%20/%3e%3c/svg%3e\")...
at Fl (https://673738989fc3e8430364197e-lufjynlemr.capture-loopback.chromatic.com/assets/index-BvTlRpDL.js:198:3353)
at https://673738989fc3e8430364197e-lufjynlemr.capture-loopback.chromatic.com/assets/index-BvTlRpDL.js:206:234
at r_.invoke (https://673738989fc3e8430364197e-lufjynlemr.capture-loopback.chromatic.com/assets/index-BvTlRpDL.js:48:8798)
at r_.intercept (https://673738989fc3e8430364197e-lufjynlemr.capture-loopback.chromatic.com/assets/index-BvTlRpDL.js:48:6199)
at r_.track (https://673738989fc3e8430364197e-lufjynlemr.capture-loopback.chromatic.com/assets/index-BvTlRpDL.js:48:5931)
at findByRole (https://673738989fc3e8430364197e-lufjynlemr.capture-loopback.chromatic.com/assets/index-BvTlRpDL.js:48:5203)
at play (https://673738989fc3e8430364197e-lufjynlemr.capture-loopback.chromatic.com/assets/Button.stories-Buspb6PJ.js:1:3438)
at async mn.runPhase (https://673738989fc3e8430364197e-lufjynlemr.capture-loopback.chromatic.com/sb-preview/runtime.js:5872:94)
at async mn.render (https://673738989fc3e8430364197e-lufjynlemr.capture-loopback.chromatic.com/sb-preview/runtime.js:5985:14)