Tooltip с вырезами у стрелки
1,00
р.
Увидел интересную идею для Tooltip. Её отличие от других состоит в том, что боковые полосы стрелки заходят в тело образовывая две прозрачные полосы. Не могу понять, как осуществить эти вырезы.
Мой код:
.tooltip { display: inline-block position: relative padding: 10px background-color: #0391fd color: white border-radius: 6px } .tooltip:before { display: block content: '' position: absolute top: 100% left: 50% width: 0 height: 0 border-left: 6px solid transparent border-right: 6px solid transparent border-top: 6px solid #0391fd transform: translateX(-50%) }
Как сделать прозрачные вырезы?
Уточнение: в Tooltip должен вставляться текст. При этом тело Tooltip должно быть резиновым, т.е. размер Tooltip должен изменяться под текст внутри
Ответ
SVG решение
В любом векторном редакторе, например: Inkscape, рисуем предложенный автором вопроса tooltip
Я сделал крупный рисунок, чтобы были видны узлы патча: всего их 15: 8 – закругленные углы прямоугольника, 6 контуры вырезов, 1 – вершина треугольника.
Далее делаю оптимизацию кода SVG с помощью SVGOMG
Ниже пример кода tooltip
Пример анимации tooltip
Интересные эффекты могут быть реализованы при плавной анимация перехода патча из одной формы в другую. Допустим из прямоугольника в данный tooltip Для этого используется анимация атрибута d="M20 ..". Указывается начальное значение и конечное. Самое главное, чтобы количество узлов патча в начальном и конечном положении совпадало!
Для этого снова загружаем файл в Inkscape и перемещаем узлы, как показано на рисунке ниже:
Получаем новый патч с 15 узлами, но это уже прямоугольник
Далее добавляем команду анимации атрибута d
body { background: url('http://badumka.ru/images/1523569_krasochnaya-priroda.jpg') no-repeat background-size: cover height: 100% width: 100% overflow: hidden }
.bdiv { display: table }
.container { position: relative width: 500px margin: 0 auto }
Мой код:
.tooltip { display: inline-block position: relative padding: 10px background-color: #0391fd color: white border-radius: 6px } .tooltip:before { display: block content: '' position: absolute top: 100% left: 50% width: 0 height: 0 border-left: 6px solid transparent border-right: 6px solid transparent border-top: 6px solid #0391fd transform: translateX(-50%) }
Текст
Как сделать прозрачные вырезы?
Уточнение: в Tooltip должен вставляться текст. При этом тело Tooltip должно быть резиновым, т.е. размер Tooltip должен изменяться под текст внутри
Ответ
SVG решение
В любом векторном редакторе, например: Inkscape, рисуем предложенный автором вопроса tooltip
Я сделал крупный рисунок, чтобы были видны узлы патча: всего их 15: 8 – закругленные углы прямоугольника, 6 контуры вырезов, 1 – вершина треугольника.
Далее делаю оптимизацию кода SVG с помощью SVGOMG
Ниже пример кода tooltip
Пример анимации tooltip
Интересные эффекты могут быть реализованы при плавной анимация перехода патча из одной формы в другую. Допустим из прямоугольника в данный tooltip Для этого используется анимация атрибута d="M20 ..". Указывается начальное значение и конечное. Самое главное, чтобы количество узлов патча в начальном и конечном положении совпадало!
Для этого снова загружаем файл в Inkscape и перемещаем узлы, как показано на рисунке ниже:
Получаем новый патч с 15 узлами, но это уже прямоугольник
Далее добавляем команду анимации атрибута d
body { background: url('http://badumka.ru/images/1523569_krasochnaya-priroda.jpg') no-repeat background-size: cover height: 100% width: 100% overflow: hidden }
.bdiv { display: table }
.container { position: relative width: 500px margin: 0 auto }
click me
