Как сделать tooltip с закруглениями указателя?

Question

Необходимо сделать tooltip со скруглёнными углами у самого блока и скруглённым указателем, как изображено на картинке:

Простой легко получается, а с закруглениями нет.

Answer 1

Для создания подобных закруглений используйте border-radius для основного блока и псевдоэлементы с radial-gradient для указателя:

.tooltip {
  font: 24px sans-serif;
  position: relative;
  display: inline-block;
  padding: 1em;
  border-radius: 1em;
  background-color: #228ef6;
}

.tooltip::before,
.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  height: 1em;
  width: 1em;
}

.tooltip::before {
  left: calc(50% - 1em);
  background-image: radial-gradient( circle at 0% 100%, transparent 1em, #228ef6 calc(1em + 1px));
}

.tooltip::after {
  left: 50%;
  background-image: radial-gradient( circle at 100% 100%, transparent 1em, #228ef6 calc(1em + 1px));
}

<div class="tooltip">The tooltip</div>

Answer 2

Не претендую на ответ, так как закруглений указателя нет, но зато есть динамическое появление tooltip при наведении на символ - **I**

var myicon = document.getElementById("myicon");
var mypopup = document.getElementById("mypopup");

myicon.addEventListener("mouseover", showPopup);
myicon.addEventListener("mouseout", hidePopup);

function showPopup(evt) {
  var iconPos = myicon.getBoundingClientRect();
  mypopup.style.left = (iconPos.right + 20) + "px";
  mypopup.style.top = (window.scrollY + iconPos.top - 60) + "px";
  mypopup.style.display = "block";
}

function hidePopup(evt) {
  mypopup.style.display = "none";
}

body {
  background-color: #33333f;
}

#mypopup {
  width: 400px;
  padding: 20px;
  font-family: Arial, sans-serif;
  font-size: 10pt;
  background-color: white;
  border-radius: 25px;
  position: absolute;
  display: none;
}

#mypopup::before {
  content: "";
  width: 15px;
  height: 15px;
  transform: rotate(45deg);
  background-color: white;
  position: absolute;
  left: -6px;
  top: 68px;
}

<svg width="400" height="400">
  <g id="myicon" pointer-events="all">
    <circle cx="100" cy="150" r="14" fill="none" stroke="gold" stroke-width="2"/>
    <circle cx="100" cy="144" r="2" fill="gold"/>
    <rect x="98.5" y="148" width="3" height="10" fill="gold"/>
  </g>
</svg>

<div id="mypopup">
  <h3>Это просто tooltip</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

_{Свободный перевод ответа от участника @Paul LeBeau.}

БЛОГ НА HUSL

Как сделать tooltip с закруглениями указателя?

Ответы (2 шт):