Увидел интересную идею для Tooltip. Её отличие от других состоит в том, что боковые полосы стрелки заходят в тело образовывая две прозрачные полосы. Не могу понять, как осуществить эти вырезы.
Как сделать прозрачные вырезы? Уточнение: в Tooltip должен вставляться текст. При этом тело Tooltip должно быть резиновым, т.е. размер Tooltip должен изменяться под текст внутри
Ответ SVG решение В любом векторном редакторе, например: Inkscape, рисуем предложенный автором вопроса tooltip
Я сделал крупный рисунок, чтобы были видны узлы патча: всего их 15: 8 – закругленные углы прямоугольника, 6 контуры вырезов, 1 – вершина треугольника. Далее делаю оптимизацию кода SVG с помощью SVGOMG Ниже пример кода tooltip
Пример анимации tooltip Интересные эффекты могут быть реализованы при плавной анимация перехода патча из одной формы в другую. Допустим из прямоугольника в данный tooltip Для этого используется анимация атрибута d="M20 ..". Указывается начальное значение и конечное. Самое главное, чтобы количество узлов патча в начальном и конечном положении совпадало! Для этого снова загружаем файл в Inkscape и перемещаем узлы, как показано на рисунке ниже: Получаем новый патч с 15 узлами, но это уже прямоугольник