<div class="container">
  <div class="title">
    Circle
    <div class="tooltip">
      <div class="tooltip-spacing">
        <div class="tooltip-bg1"></div>
        <div class="tooltip-bg2"></div>
        <div class="tooltip-text">?</div>
        <div class="bubble">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 40" height="80" width="210">
            <path d="M33.196 0h94.61C134.56 0 140 5.44 140 12.195v15.61C140 34.56 134.56 40 127.805 40h-94.61C26.44 40 21 34.56 21 27.805v-1.903S18.196 15.427 0 20c17.185-10.084 21-5.902 21-5.902v-1.903C21 5.44 26.44 0 33.196 0z" fill="#1a1a1a" />
          </svg>
          <div class="bubble-text">Hovering circle</div>
        </div>
      </div>
    </div>
  </div>
  <div class="body">
    A circle is a shape consisting of all points in a plane that are at a
    given distance from a given point, the centre; equivalently it is the
    curve traced out by a point that moves in a plane so that its distance
    from a given point is constant.
  </div>
  <div class="title title--spacing">
    Triangle
    <div class="tooltip">
      <div class="tooltip-spacing">
        <div class="tooltip-bg1"></div>
        <div class="tooltip-bg2"></div>
        <div class="tooltip-text">?</div>
        <div class="bubble bubble-triangles">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 40" height="80" width="210">
            <path d="M33.196 0h94.61C134.56 0 140 5.44 140 12.195v15.61C140 34.56 134.56 40 127.805 40h-94.61C26.44 40 21 34.56 21 27.805v-1.903S18.196 15.427 0 20c17.185-10.084 21-5.902 21-5.902v-1.903C21 5.44 26.44 0 33.196 0z" fill="#1a1a1a" />
          </svg>
          <div class="bubble-text bubble-text-triangles">
            Hovering triangle
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="body">
    In Euclidean geometry, any three points, when non-collinear, determine a
    unique triangle and simultaneously, a unique plane (i.e. a
    two-dimensional Euclidean space).
  </div>
  <div class="title title--spacing">
    Square
    <div class="tooltip">
      <div class="tooltip-spacing">
        <div class="tooltip-bg1"></div>
        <div class="tooltip-bg2"></div>
        <div class="tooltip-text">?</div>
      </div>
      <div class="bubble bubble-rects">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 40" height="80" width="210">
          <path d="M33.196 0h94.61C134.56 0 140 5.44 140 12.195v15.61C140 34.56 134.56 40 127.805 40h-94.61C26.44 40 21 34.56 21 27.805v-1.903S18.196 15.427 0 20c17.185-10.084 21-5.902 21-5.902v-1.903C21 5.44 26.44 0 33.196 0z" fill="#1a1a1a" />
        </svg>
        <div class="bubble-text bubble-text-rects">Hovering square</div>
      </div>
    </div>
  </div>
  <div class="body">Don't be a ...</div>
</div>

@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;700&display=swap");
body {
  align-items: center;
  background-color: #5f9a74;
  display: flex;
  font-family: "Source Sans Pro", sans-serif;
  height: 100vh;
  justify-content: center;
}
.container {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 3.6px rgba(0, 0, 0, 0.023),
    0 5.6px 10px rgba(0, 0, 0, 0.028), 0 13.6px 24.1px rgba(0, 0, 0, 0.034),
    0 45px 80px rgba(0, 0, 0, 0.06);
  margin: 0 20px;
  max-width: 500px;
  padding: 20px 16px;
}
.title {
  display: flex;
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 4px;
}
.title--spacing {
  margin-top: 16px;
}
.tooltip {
  font-size: 16px;
  font-weight: normal;
  margin-top: 2px;
  position: relative;
}
.tooltip:hover {
  cursor: help;
}
.tooltip-spacing {
  height: 20px;
  margin: 8px;
  position: relative;
  width: 20px;
}
.tooltip-bg1 {
  background-color: #000;
  border-radius: 10px;
  content: " ";
  display: flex;
  height: 20px;
  position: absolute;
  top: 0;
  width: 20px;
}
.tooltip-bg2 {
  background-color: #fff;
  border-radius: 8px;
  content: " ";
  display: flex;
  height: 16px;
  left: 2px;
  position: absolute;
  top: 2px;
  width: 16px;
}
.tooltip-text {
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
  position: relative;
  text-align: center;
  width: 20px;
}
.bubble {
  clip-path: path(
    "M 201.23862,50.748829 A 0.006,0.006 0 0 1 201.23262,50.754829 0.006,0.006 0 0 1 201.22662,50.748829 0.006,0.006 0 0 1 201.23262,50.742829 0.006,0.006 0 0 1 201.23862,50.748829 M 191.85968,17.069946 A 0.006,0.006 0 0 1 191.85368,17.075946 0.006,0.006 0 0 1 191.84768,17.069946 0.006,0.006 0 0 1 191.85368,17.063946 0.006,0.006 0 0 1 191.85968,17.069946 M 161.59133,52.880402 A 0.006,0.006 0 0 1 161.58533,52.886402 0.006,0.006 0 0 1 161.57933,52.880402 0.006,0.006 0 0 1 161.58533,52.874402 0.006,0.006 0 0 1 161.59133,52.880402 M 138.57033,11.101538 A 0.006,0.006 0 0 1 138.56433,11.107538 0.006,0.006 0 0 1 138.55833,11.101538 0.006,0.006 0 0 1 138.56433,11.095538 0.006,0.006 0 0 1 138.57033,11.101538 M 113.84406,50.322514 A 0.006,0.006 0 0 1 113.83806,50.328514 0.006,0.006 0 0 1 113.83206,50.322514 0.006,0.006 0 0 1 113.83806,50.316514 0.006,0.006 0 0 1 113.84406,50.322514 M 102.33355,21.333096 A 0.006,0.006 0 0 1 102.32755,21.339096 0.006,0.006 0 0 1 102.32155,21.333096 0.006,0.006 0 0 1 102.32755,21.327096 0.006,0.006 0 0 1 102.33355,21.333096 M 64.391521,55.864605 A 0.006,0.006 0 0 1 64.385521,55.870605 0.006,0.006 0 0 1 64.379521,55.864605 0.006,0.006 0 0 1 64.385521,55.858605 0.006,0.006 0 0 1 64.391521,55.864605 M 63.112575,17.496262 A 0.006,0.006 0 0 1 63.106575,17.502262 0.006,0.006 0 0 1 63.100575,17.496262 0.006,0.006 0 0 1 63.106575,17.490262 0.006,0.006 0 0 1 63.112575,17.496262 M 27.198234,49.857197 A 0.006,0.006 0 0 1 27.192234,49.863197 0.006,0.006 0 0 1 27.186234,49.857197 0.006,0.006 0 0 1 27.192234,49.851197 0.006,0.006 0 0 1 27.198234,49.857197 M 14.309602,18.772854 A 0.006,0.006 0 0 1 14.303602,18.778854 0.006,0.006 0 0 1 14.297602,18.772854 0.006,0.006 0 0 1 28.303602,18.766854 0.006,0.006 0 0 1 14.309602,18.772854"
  );
  filter: drop-shadow(rgba(0, 0, 0, 0.16) 0px 3px 6px)
    drop-shadow(rgba(0, 0, 0, 0.23) 0px 3px 6px);
  left: 28px;
  opacity: 0.5;
  position: absolute;
  top: -30px;
  transition: transform 400ms, clip-path 400ms, opacity 400ms;
  transform: rotate(10deg);
  transform-origin: -10% 50%;
}
.bubble-triangles {
  clip-path: path(
    "M 203.0404,15.981094 H 203.05405 L 203.04722,15.99297 Z M 179.0404,21.981094 H 179.05405 L 179.04722,21.99297 Z M 137.0404,17.981094 H 137.05405 L 137.04722,17.99297 Z M 193.39923,31.578348 H 193.38558 L 193.39241,31.566472 Z M 153.39923,35.578348 H 153.38558 L 153.39241,35.566472 Z M 113.39923,35.578348 H 113.38558 L 113.39241,35.566472 Z M 69.399234,35.578348 H 69.385576 L 69.392405,35.566472 Z M 97.040397,23.981094 H 97.054055 L 97.047226,23.99297 Z M 15.399233,37.578349 H 15.385575 L 15.392404,37.566472 Z M 40.248519,26.488708 H 40.262177 L 40.255348,26.500584 Z M 14.248519,26.488708 H 14.262177 L 14.255348,26.500584 Z"
  );
}
.bubble-rects {
  clip-path: path(
    "M 220.41818,50.596475 H 220.42935 C 220.43075,50.596475 220.43188,50.597602 220.43188,50.599002 V 50.607633 C 220.43188,50.609033 220.43075,50.61016 220.42935,50.61016 H 220.41818 C 220.41678,50.61016 220.41565,50.609033 220.41565,50.607633 V 50.599002 C 220.41565,50.597602 220.41678,50.596475 220.41818,50.596475 Z M 207.09587,16.57393 H 207.10704 C 207.10844,16.57393 207.10957,16.575057 207.10957,16.576457 V 16.585088 C 207.10957,16.586488 207.10844,16.587615 207.10704,16.587615 H 207.09587 C 207.09447,16.587615 207.09334,16.586488 207.09334,16.585088 V 16.576457 C 207.09334,16.575057 207.09447,16.57393 207.09587,16.57393 Z M 171.9734,53.513078 H 171.98457 C 171.98597,53.513078 171.9871,53.514205 171.9871,53.515605 V 53.524236 C 171.9871,53.525636 171.98597,53.526763 171.98457,53.526763 H 171.9734 C 171.972,53.526763 171.97087,53.525636 171.97087,53.524236 V 53.515605 C 171.97087,53.514205 171.972,53.513078 171.9734,53.513078 Z M 168.9456,2.0404937 H 168.95677 C 168.95817,2.0404937 168.9593,2.0416208 168.9593,2.0430209 V 2.0516521 C 168.9593,2.0530522 168.95817,2.0541793 168.95677,2.0541793 H 168.9456 C 168.9442,2.0541793 168.94307,2.0530522 168.94307,2.0516521 V 2.0430209 C 168.94307,2.0416208 168.9442,2.0404937 168.9456,2.0404937 Z M 126.55641,48.063039 H 126.56758 C 126.56898,48.063039 126.57011,48.064166 126.57011,48.065566 V 48.074197 C 126.57011,48.075597 126.56898,48.076724 126.56758,48.076724 H 126.55641 C 126.55501,48.076724 126.55388,48.075597 126.55388,48.074197 V 48.065566 C 126.55388,48.064166 126.55501,48.063039 126.55641,48.063039 Z M 112.02298,11.012696 H 112.03415 C 112.03555,11.012696 112.03668,11.013823 112.03668,11.015223 V 11.023854 C 112.03668,11.025254 112.03555,11.026381 112.03415,11.026381 H 112.02298 C 112.02158,11.026381 112.02045,11.025254 112.02045,11.023854 V 11.015223 C 112.02045,11.013823 112.02158,11.012696 112.02298,11.012696 Z M 68.828384,53.513078 H 68.839559 C 68.840959,53.513078 68.842086,53.514205 68.842086,53.515605 V 53.524236 C 68.842086,53.525636 68.840959,53.526763 68.839559,53.526763 H 68.828384 C 68.826984,53.526763 68.825857,53.525636 68.825857,53.524236 V 53.515605 C 68.825857,53.514205 68.826984,53.513078 68.828384,53.513078 Z M 56.917034,3.7459782 H 56.928208 C 56.929608,3.7459782 56.930736,3.7471053 56.930736,3.7485054 V 3.7571366 C 56.930736,3.7585367 56.929608,3.7596638 56.928208,3.7596638 H 56.917034 C 56.915634,3.7596638 56.914506,3.7585367 56.914506,3.7571366 V 3.7485054 C 56.914506,3.7471053 56.915634,3.7459782 56.917034,3.7459782 Z M 6.0334827,41.474006 H 6.0446573 C 6.0460574,41.474006 6.0471845,41.475133 6.0471845,41.476533 V 41.485164 C 6.0471845,41.486564 6.0460574,41.487691 6.0446573,41.487691 H 6.0334827 C 6.0320826,41.487691 6.0309555,41.486564 6.0309555,41.485164 V 41.476533 C 6.0309555,41.475133 6.0320826,41.474006 6.0334827,41.474006 Z M -9.6945443,5.1404177 H -9.6833697 C -9.6819696,5.1404177 -9.6808425,5.1415448 -9.6808425,5.1429449 V 5.1515761 C -9.6808425,5.1529762 -9.6819696,5.1541033 -9.6833697,5.1541033 H -9.6945443 C -9.6959444,5.1541033 -9.6970715,5.1529762 -9.6970715,5.1515761 V 5.1429449 C -9.6970715,5.1415448 -9.6959444,5.1404177 -9.6945443,5.1404177 Z"
  );
  left: 37px;
  top: -22px;
}
.bubble-text {
  color: white;
  left: 68px;
  position: absolute;
  top: 28px;
}
.bubble-text-triangles {
  left: 62px;
}
.bubble-text-rects {
  left: 68px;
}
.tooltip:hover .bubble {
  clip-path: path(
    "M 231.23262,50.748829 A 30,30 0 0 1 201.23262,80.748829 30,30 0 0 1 171.23262,50.748829 30,30 0 0 1 201.23262,20.748829 30,30 0 0 1 231.23262,50.748829 M 221.85368,17.069946 A 30,30 0 0 1 191.85368,47.069946 30,30 0 0 1 161.85368,17.069946 30,30 0 0 1 191.85368,-12.930054 30,30 0 0 1 221.85368,17.069946 M 191.58533,52.880402 A 30,30 0 0 1 161.58533,82.880402 30,30 0 0 1 131.58533,52.880402 30,30 0 0 1 161.58533,22.880402 30,30 0 0 1 191.58533,52.880402 M 168.56433,11.101538 A 30,30 0 0 1 138.56433,41.101538 30,30 0 0 1 108.56433,11.101538 30,30 0 0 1 138.56433,-18.898462 30,30 0 0 1 168.56433,11.101538 M 143.83806,50.322514 A 30,30 0 0 1 113.83806,80.322514 30,30 0 0 1 83.838058,50.322514 30,30 0 0 1 113.83806,20.322514 30,30 0 0 1 143.83806,50.322514 M 132.32755,21.333096 A 30,30 0 0 1 102.32755,51.333096 30,30 0 0 1 72.327553,21.333096 30,30 0 0 1 102.32755,-8.6669044 30,30 0 0 1 132.32755,21.333096 M 94.385521,55.864605 A 30,30 0 0 1 64.385521,85.864605 30,30 0 0 1 34.385521,55.864605 30,30 0 0 1 64.385521,25.864605 30,30 0 0 1 94.385521,55.864605 M 93.106575,17.496262 A 30,30 0 0 1 63.106575,47.496262 30,30 0 0 1 33.106575,17.496262 30,30 0 0 1 63.106575,-12.503738 30,30 0 0 1 93.106575,17.496262 M 57.192234,49.857197 A 30,30 0 0 1 27.192234,79.857197 30,30 0 0 1 -2.807766,49.857197 30,30 0 0 1 27.192234,19.857197 30,30 0 0 1 57.192234,49.857197 M 44.303602,18.772854 A 30,30 0 0 1 14.303602,48.772854 30,30 0 0 1 -15.696398,18.772854 30,30 0 0 1 14.303602,-11.227146 30,30 0 0 1 44.303602,18.772854"
  );
  opacity: 1;
  transform: rotate(0deg);
}
.tooltip:hover .bubble-triangles {
  clip-path: path(
    "M 180.95134,-20.140107 H 262.90149 L 221.92642,51.116808 Z M 152.15134,-14.940107 H 234.10149 L 193.12642,56.316808 Z M 101.75134,-19.740107 H 183.70149 L 142.72642,51.516808 Z M 251.3157,68.499549 H 169.36555 L 210.34062,-2.7573658 Z M 203.3157,73.299549 H 121.36555 L 162.34062,2.0426342 Z M 155.3157,73.299549 H 73.365555 L 114.34062,2.0426342 Z M 100.5157,73.299549 H 18.565555 L 59.540627,2.0426342 Z M 47.751341,-12.540106 H 129.70149 L 88.726414,58.716808 Z M 37.7157,75.699549 H -44.234445 L -3.2593726,4.4426344 Z M -14.398913,-9.5309691 H 67.551233 L 26.57616,61.725945 Z M -45.598913,-9.5309691 H 36.351233 L -4.6238398,61.725945 Z"
  );
}
.tooltip:hover .bubble-rects {
  clip-path: path(
    "M 192.48716,16.389187 H 248.36037 C 255.36066,16.389187 260.99627,22.024798 260.99627,29.025086 V 72.181548 C 260.99627,79.181836 255.36066,84.817448 248.36037,84.817448 H 192.48716 C 185.48687,84.817448 179.85126,79.181836 179.85126,72.181548 V 29.025086 C 179.85126,22.024798 185.48687,16.389187 192.48716,16.389187 Z M 179.16485,-17.633358 H 235.03806 C 242.03835,-17.633358 247.67396,-11.997747 247.67396,-4.9974585 V 38.159003 C 247.67396,45.159292 242.03835,50.794903 235.03806,50.794903 H 179.16485 C 172.16456,50.794903 166.52895,45.159292 166.52895,38.159003 V -4.9974585 C 166.52895,-11.997747 172.16456,-17.633358 179.16485,-17.633358 Z M 144.04238,19.30579 H 199.91559 C 206.91588,19.30579 212.55149,24.941401 212.55149,31.941689 V 75.098151 C 212.55149,82.09844 206.91588,87.734051 199.91559,87.734051 H 144.04238 C 137.04209,87.734051 131.40648,82.09844 131.40648,75.098151 V 31.941689 C 131.40648,24.941401 137.04209,19.30579 144.04238,19.30579 Z M 141.01458,-32.166794 H 196.88779 C 203.88808,-32.166794 209.52369,-26.531183 209.52369,-19.530894 V 23.625567 C 209.52369,30.625856 203.88808,36.261467 196.88779,36.261467 H 141.01458 C 134.01429,36.261467 128.37868,30.625856 128.37868,23.625567 V -19.530894 C 128.37868,-26.531183 134.01429,-32.166794 141.01458,-32.166794 Z M 98.625386,13.855751 H 154.4986 C 161.49889,13.855751 167.1345,19.491362 167.1345,26.491651 V 69.648112 C 167.1345,76.648401 161.49889,82.284012 154.4986,82.284012 H 98.625386 C 91.625098,82.284012 85.989487,76.648401 85.989487,69.648112 V 26.491651 C 85.989487,19.491362 91.625098,13.855751 98.625386,13.855751 Z M 84.091954,-23.194592 H 139.96517 C 146.96546,-23.194592 152.60107,-17.55898 152.60107,-10.558692 V 32.59777 C 152.60107,39.598058 146.96546,45.233669 139.96517,45.233669 H 84.091954 C 77.091666,45.233669 71.456055,39.598058 71.456055,32.59777 V -10.558692 C 71.456055,-17.55898 77.091666,-23.194592 84.091954,-23.194592 Z M 40.897363,19.30579 H 96.770576 C 103.77086,19.30579 109.40648,24.941401 109.40648,31.941689 V 75.098151 C 109.40648,82.09844 103.77086,87.734051 96.770576,87.734051 H 40.897363 C 33.897074,87.734051 28.261463,82.09844 28.261463,75.098151 V 31.941689 C 28.261463,24.941401 33.897074,19.30579 40.897363,19.30579 Z M 28.986014,-30.461309 H 84.859227 C 91.859516,-30.461309 97.495127,-24.825698 97.495127,-17.82541 V 25.331052 C 97.495127,32.33134 91.859516,37.966951 84.859227,37.966951 H 28.986014 C 21.985726,37.966951 16.350115,32.33134 16.350115,25.331052 V -17.82541 C 16.350115,-24.825698 21.985726,-30.461309 28.986014,-30.461309 Z M -21.897536,7.2667179 H 33.975677 C 40.975965,7.2667179 46.611576,12.902329 46.611576,19.902617 V 63.059079 C 46.611576,70.059368 40.975965,75.694979 33.975677,75.694979 H -21.897536 C -28.897825,75.694979 -34.533436,70.059368 -34.533436,63.059079 V 19.902617 C -34.533436,12.902329 -28.897825,7.2667179 -21.897536,7.2667179 Z M -37.625564,-29.06687 H 18.247649 C 25.247938,-29.06687 30.883549,-23.431259 30.883549,-16.43097 V 26.725492 C 30.883549,33.72578 25.247938,39.361391 18.247649,39.361391 H -37.625564 C -44.625852,39.361391 -50.261463,33.72578 -50.261463,26.725492 V -16.43097 C -50.261463,-23.431259 -44.625852,-29.06687 -37.625564,-29.06687 Z"
  );
}