css+svg实现悬浮提示框效果代码-html代码-BFW代码库

代码语言：html
所属分类：弹出层
代码描述：css+svg实现悬浮提示框效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
@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.........完整代码请登录后点击上方下载按钮下载查看