diff --git a/src/components/helpers/tooltip/Tooltip.jsx b/src/components/helpers/tooltip/Tooltip.jsx index 2a4f6283..61a55d39 100644 --- a/src/components/helpers/tooltip/Tooltip.jsx +++ b/src/components/helpers/tooltip/Tooltip.jsx @@ -10,16 +10,18 @@ function Tooltip({ children, title, style, placement, subtitle }) { }); return ( -
setShowTooltip(true)} - onMouseLeave={() => setShowTooltip(false)} - onFocus={() => setShowTooltip(true)} - onBlur={() => setShowTooltip(false)} - ref={reference} - > - {children} + <> +
setShowTooltip(true)} + onMouseLeave={() => setShowTooltip(false)} + onFocus={() => setShowTooltip(true)} + onBlur={() => setShowTooltip(false)} + ref={reference} + > + {children} +
{showTooltip && ( {subtitle} )} -
+ ); } diff --git a/src/components/widgets/background/scss/_photoinformation.scss b/src/components/widgets/background/scss/_photoinformation.scss index d29c4802..268c4c40 100644 --- a/src/components/widgets/background/scss/_photoinformation.scss +++ b/src/components/widgets/background/scss/_photoinformation.scss @@ -199,6 +199,7 @@ .photoInformation { @extend %basic; + animation: fadeIn 2s; min-width: 300px; font-size: 0.8em; font-weight: 300; @@ -361,3 +362,12 @@ @include basicIconButton(11px, 1.3rem, ui); } } + +@keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} \ No newline at end of file