Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <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>
              
            
!

CSS

              
                @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"
  );
}

              
            
!

JS

              
                
              
            
!
999px

Console