tooltip improvements

[weepy]

Tool tips need a delay before the are shown. Unfortunately Pico doesn't yet support this.

I managed to hack it a little via :

  [data-tooltip][data-placement=bottom]:focus::before, [data-tooltip][data-placement=bottom]:focus::after, [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::before, [data-tooltip][data-placement=bottom]:hover [data-tooltip]:focus::after, [data-tooltip]:hover::before, [data-tooltip]:hover::after {
    animation-duration: 0.7s;
    
    animation-name: tooltip-slide-top;
  }

@keyframes tooltip-slide-top {
  0% {
    transform: translate(-50%, 0.75rem);
    opacity: 0;
  }

  90% {
    transform: translate(-50%, 0.75rem);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -0.25rem);
    opacity: 1;
  }
}

but there may be better solutions ?

[weepy]

Also you might need your tool tips to hide on focus. I added the following rule

[data-hide-focus]:focus::before, [data-hide-focus]:focus::after {
    display: none;
}

[weepy]

you can also do multiline tooltips like :

[data-multiline]::before {
white-space: unset;
max-width: 200px;
}

[lucaslarroche]

Thank you.
I will look into it.