Подскажите по CSS

[val06]

Добрый день, сделал тултип по клику, нашел в сети код

p{
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0;
}
p:before{
  content: attr(data-tools);
  display: block;
  opacity: 0;
  position: absolute;
  bottom: -40px;
  left: 80%;
  background: #217AB6;
  color: #fff;
  padding: 5px 10px 10px 10px;
  pointer-events: none;
}
p:focus:before{
  opacity: 1;
  background: #000;
}
@keyframes opacity{
  0%,100%{
    opacity: 0;
    transform: scale(1)
  }
  50%{
    opacity: 1;
    transform: scale(2)
  }
}

<p data-tools="Текст тултипа" tabindex="-1"> (Справка)</p>

все работает, но сам тултип узкий https://skrinshoter.ru/scMl15C0HWM
подскажите плиз, как его расширить.

 

[af9gs]

Добрый день.
Можно сделать так

Спойлер: код для p:before

p:before{
    content: attr(data-tools);
    display: block;
    opacity: 0;
    position: absolute;
    bottom: -40px;
    left: 80%;
    background: #217AB6;
    color: #fff;
    padding: 5px 10px 10px 10px;
    pointer-events: none;

    /*
    width: 200px; - фиксированная ширина
    чтобы тултип автоматически подстраивался под содержимое,
    но не был слишком узким
    */
    min-width: 200px;
    max-width: 400px;
    white-space: normal;
}

 

[val06]

Можно сделать так

спасибо, все отлично !