主页 / 问题 / 665642
Accepted
Yuri
Asked:2020-05-14 04:00:36 +0000 UTC2020-05-14 04:00:36 +0000 UTC

带有箭头切口的工具提示

  • 772

看到一个关于工具提示的有趣想法。它与其他的不同之处在于箭头的侧条纹进入身体形成两条透明条纹。我不知道如何制作这些切口。

在此处输入图像描述在此处输入图像描述

我的代码：

.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%);
}
<div class="tooltip">Текст</div>

如何制作透明镂空？

说明：文本必须插入到工具提示中。在这种情况下，工具提示的主体必须是橡胶的，即 工具提示应调整大小以适应里面的文本

css

8 个回答

  1. svg解决方案

    在任何矢量编辑器中，例如：Inkscape，绘制问题作者提出的那个tooltip

    在此处输入图像描述

    我画了一张大图，以便可以看到补丁的节点：总共有 15 个：8 个是矩形的圆角，6 个是切口的轮廓，1 个是三角形的顶部。

    接下来，我使用SVGOMG优化 SVG 代码

    下面的代码示例tooltip

    <svg id="svg1" version="1.1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" 
 viewBox="0 0 240 240"   >
  <path d="m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10L41.4 80.2 37.3 75.7c-2.4-2.3 0.9-4 2-2.2L59.9 95.1 80.3 73.3c1.6-1.7 3.7 0.5 1.9 2.1L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z" style="fill:#0391FD;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.4;stroke:#0391fd"/>
  </svg>

    动画示例tooltip

    通过平滑地动画化补丁从一种形式到另一种形式的过渡，可以实现有趣的效果。比方说从一个矩形到给定的一个。tooltip 属性的动画用于此d="M20 .."。指定起始值和结束值。
    最重要的是，开始和结束位置的补丁节点数量必须匹配！

    Для этого снова загружаем файл в Inkscape и перемещаем узлы, как показано на рисунке ниже: 在此处输入图像描述

    Получаем новый патч с 15 узлами, но это уже прямоугольник

    <svg version="1.1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" 
 viewBox="0 0 240 240"  >
 
  <path d="m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10l21.4 0.2-0.1-0.1c4.2 0.1 11.3 0.1 11.3 0.1l7.7 0 8.9 0c16.6 0 7.2-2 5.5-0.3L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z" style="fill:#0391FD;stroke-linecap:round;stroke-linejoin:round;"/>
</svg>

    Далее добавляем команду анимации атрибута d

     <animate id="an_path" attributeName="d"  values="m20 10c-5.5 0-10   


    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;
}
    <div class="bdiv">
  <div class="container">
    <svg id="svg1" version="1.1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
      <g transform="scale(0.8)">
        <path d="m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10l21.4 0.2-0.1-0.1c4.2 0.1 11.3 0.1 11.3 0.1l7.7 0 8.9 0c16.6 0 7.2-2 5.5-0.3L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z" style="fill:dodgerblue;stroke-linecap:round;stroke-linejoin:round; fill-opacity:0.5">
          <animate id="an_path"
          attributeName="d"
          values="m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10l21.4 0.2-0.1-0.1c4.2 0.1 11.3 0.1 11.3 0.1l7.7 0 8.9 0c16.6 0 7.2-2 5.5-0.3L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z;
      m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10L41.4 80.2 37.3 75.7c-2.4-2.3 0.9-4 2-2.2L59.9 95.1 80.3 73.3c1.6-1.7 3.7 0.5 1.9 2.1L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z;m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10l21.4 0.2-0.1-0.1c4.2 0.1 11.3 0.1 11.3 0.1l7.7 0 8.9 0c16.6 0 7.2-2 5.5-0.3L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z;
      m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10L41.4 80.2 37.3 75.7c-2.4-2.3 0.9-4 2-2.2L59.9 95.1 80.3 73.3c1.6-1.7 3.7 0.5 1.9 2.1L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z"
          begin="svg1.click"
          dur="8s"
          repeatCount="1"
          fill="freeze"
          restart="whenNotActive">
          </animate>
        </path>
        <text x="30" y="50" font-size="18" fill="white">click me </text>
      </g>
    </svg>
  </div>
</div>

    • 27

  2. 渐变 + 伪元素 + 1 个嵌套元素。

    body {
  background-image: linear-gradient(to right, white, rebeccapurple);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-radius: 10px;
  padding: 15px 25px 25px;
  color: #fff;
  font-size: 22px;
  background: linear-gradient(to bottom, #0391fd calc(100% - 10px), transparent calc(100% - 10px)), radial-gradient(circle at 50% 100%, transparent 24px, #0391fd 25px);
  margin: auto;
}

.tooltip:before,
.tooltip:after {
  position: absolute;
  content: ' ';
  bottom: 0;
  left: 0;
  width: 50%;
  height: 11px;
  border-bottom-left-radius: 10px;
  background-image: linear-gradient(45deg, #0391fd calc(100% - 18px), transparent calc(100% - 18px));
}

.tooltip:after {
  left: auto;
  right: 0;
  border-bottom-right-radius: 10px;
  background-image: linear-gradient(-45deg, #0391fd calc(100% - 18px), transparent calc(100% - 18px));
}

.tooltip__arrow {
  position: absolute;
  left: calc(50% - 21px);
  bottom: -10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 21px 21px 0 21px;
  border-color: #0391fd transparent transparent transparent;
}
    <div class=tooltip>Это какой-нибудь текст для примера
  <span class=tooltip__arrow></span>
</div>
<br>
<div class=tooltip>текст чуть поменьше
  <span class=tooltip__arrow></span>
</div>

    • 17

  3. 选项 #1（新）

    我们在 DOM 中创建了一个额外的元素，因为没有它就不可能在 css 上实现它，我应用了一个免费的命名空间

    html,body{
height:100%;	
background:url(https://walldeco.ua/img/gallery/29/thumbs/thumb_l_2971.jpg);
background-size:cover;
}
a{
	padding:6px 10px;
	border:1px solid #fff;
	text-decoration:none;
	color:#fff;
	position:relative;
	top:50px; left:50px;
}
tooltipe{
	display:none;
	width:100%;
	height:100px;
	position:absolute;
	transform:translate(-100%,70px);
 overflow:hidden;
}
left{
	display:block;
	width:50%;
	height:100%;
	background:red;
	position:absolute;
	left:-33px;
	transform:skew(-21deg);
}
right{
	display:block;
	width:50%;
	height:100%;
	background:red;
	position:absolute;
	right:-33px;
	transform:skew(21deg);
}

right:after{
	content:"";
	position:absolute;
	display:block;
	width:200px;
	height:80px;
	background:red;
	left:-90%;
	top:20px;
	transform:skew(-21deg);
}

a.tool:hover:after{
	content:"";
	display:block;
	position:absolute;
	border:18px solid transparent;
	border-bottom:50px solid red;
	left:41.5%; top:40px;
}
a:hover tooltipe{
	display:inline-block;
}
tooltext{
	display:block;
	position:absolute;
	left:0;
	padding:15px;
}
    <a href="" class="tool">
  <span>Это текст на которыйнадо  сделать подсказку</span>
  <tooltipe>
    <left></left>
    <right></right>

	  <tooltext> 
	    <p> Cras ultricies ligula sed magna dictum porta. Donec rutrum congue leo eget malesuada. Nulla porttitor accumsan tincidunt.</p>
	 </tooltext>
  </tooltipe>
</a>

    选项不是很（需要最终确定）No.2

    * {
  margin: 0;
  padding: 0;
  font-size: 20px;
  letter-spacing: 2px;
}

html,
body {
  padding: 10px;
}

span.tooltipe {
  background-color: #ccc;
  padding: 0 10px;
  border-radius: 4px;
  position: relative;
  z-index: 100;
  color: #fefefe;
}

span.tooltipe a {
  text-decoration: none;
  color: #fefefe;
  display: inline-block;
}

.tool {
  position: absolute;
  display: inline-block;
  width: 328px;
  height: 0;
  border: 1px solid #ccc;
  top: 80px;
  left: 0;
  padding: 20px;
  padding-top: 50px;
  background: transparent;
}

.overlay {
  display: block;
  background: #000;
  padding: 10px;
  width: 350px;
  position: relative;
  z-index: 100;
  left: -20px;
  text-align: center;
}

.tool cover {
  position: absolute;
  width: 100%;
  height: 70px;
  top: 0;
  left: 0;
  z-index: -1;
  background: rgba(0, 0, 0, .4);
}

.tool:after {
  content: "";
  position: absolute;
  border-width: 70px 140px 0px 0;
  border-style: solid;
  border-color: #000 transparent;
  top: 0;
  left: 0;
  z-index: 10;
}

.tool:before {
  content: "";
  position: absolute;
  border-width: 0 140px 70px 0;
  border-style: solid;
  border-color: transparent #000;
  top: 0;
  z-index: 10;
  right: 0;
}

cover:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 4%;
  border: 170px solid transparent;
  border-bottom: 70px solid #000;
  border-top: 0px solid #000;
  z-index: 210;
}

cover:before {
  content: " v ";
  display: block;
  color: red;
  position: absolute;
  top: -15px;
  left: 44%;
  transform: rotate(180deg)scaleX(12)scaleY(3);
  color: transparent;
  text-shadow: 0 0 1px rgba(0, 0, 0, .7);
}

.tool,
.overlay,
cover {
  display: none;
}

span.tooltipe:hover .tool,
.overlay,
cover {
  display: block;
}
    <p>Curabitur aliquet quam id dui posuere blandit. Nulla porttitor accumsan tincidunt. Mauris blandit aliquet elit, eget tincidunt

  <span class="tooltipe"><a href=""> Curabitur arcu pretium ut lacinia in</a>
	 <span class="tool"><cover></cover><span class="overlay">Quisque velit nisi, , elementum id enim. Curabitur aliquet quam id dui posuere blandit. Donec rutrum congue leo eget malesuada. Sed porttitor lectus nibh. Nulla porttitor accumsan tincidunt. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Proin eget tortor risus. Proin eget tortor risus. Curabitur aliquet quam id dui posuere blandit. Nulla porttitor accumsan tincidunt.</span>
  <!--overlay-->
  </span>
  </span>

  nibh pulvinar a. erat, accumsan id imperdiet et, porttitor at sem.Vivamus suscipit tortor eget felis porttitor volutpat. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Cras ultricies ligula sed magna dictum porta.
</p>

    选项3（已经看过）

    * {
  margin: 0;
  padding: 0;
  text-decoration: none;
  box-sizing: border-box;
}

a {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #ccc;
  position: relative;
  font-size: 20px;
  color: #ccc;
}

a:hover {
  background-color: #ccc;
  color: #fefefe;
}

a[tooltipe]:hover:after {
  content: attr(tooltipe);
  display: inline-block;
  white-space: pre;
  position: absolute;
  top: 60px;
  left: 50%;
  color: #fefefe;
  cursor: default;
  pointer-events: none;
  border: 3px solid #fefefe;
  padding: 10px 20px;
  background: #cc0000;
}

a[tooltipe]:hover:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 53px;
  left: 80%;
  color: #cc0000;
  background-image: linear-gradient(to bottom right, #cc0000, #cc0000, #cc0000);
  cursor: default;
  pointer-events: none;
  border: 4px solid #fefefe;
  background: ;
  width: 20px;
  height: 20px;
  z-index: 1;
  transform: rotate(45deg);
  border-bottom: transparent;
  border-right: transparent;
}
    <a href="" tooltipe="Это подсказка"> 
      Некий понт на css
    </a>

    选项 4 不是自适应的：不幸的是，请参阅链接

    • 14
  4. Best Answer

    CSS 解决方案

    这可以通过正常布局来完成。没有额外的图形，跨浏览器。

    .back {
  width: 850px;
  height: 640px;
  background: url(http://orig09.deviantart.net/5063/f/2012/219/c/4/inari_fox__ivory_by_santani-d5a465m.jpg);
}

.tooltip {
  min-width: 50px;
  max-width: 300px;

  /* Стили ниже только для демонстрации. Можно удалить. */
  display: inline-block;
  vertical-align: top;
  margin: 10px;
}

.tooltip .content {
  border-radius: 10px 10px 0 0;
  background: #3f51b5;
  padding: 10px;
  color: #fff;
}

.tooltip .footer {
  position: relative;
  display: flex;
}

.tooltip .footer .left {
  flex: 1 1 auto;
  position: relative;
  border-bottom: 10px solid #3f51b5;
  border-right: 10px solid transparent;
  border-bottom-left-radius: 10px;
}

.tooltip .footer .circle {
  position: absolute;
  top: -1px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  border-top: 1px solid #3f51b5;
}

.tooltip .footer .circle:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
}

.tooltip .footer .left .circle {
  right: -5px;
  border-left: 1px solid #3f51b5;
}

.tooltip .footer .left .circle:after {
  top: -3px;
  left: -3px;
  border-right: 3px solid #3f51b5;
  border-top: 2px solid transparent;
  border-bottom: 3px solid transparent;
  transform: rotate(45deg);
}

.tooltip .footer .right {
  flex: 1 1 auto;
  position: relative;
  border-bottom: 10px solid #3f51b5;
  border-left: 10px solid transparent;
  border-bottom-right-radius: 10px;
}

.tooltip .footer .right .circle {
  left: -5px;
  border-right: 1px solid #3f51b5;
}

.tooltip .footer .right .circle:after {
  top: -3px;
  right: -3px;
  border-left: 3px solid #3f51b5;
  border-top: 3px solid transparent;
  border-bottom: 2px solid transparent;
  transform: rotate(-45deg);
}

.tooltip .footer .center {
  flex: 0 0 28px;
  position: relative;
}

.tooltip .footer .center:after {
  content: '';
  position: absolute;
  left: -6px;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-top: 20px solid #3f51b5;
  border-right: 20px solid transparent;
}
    <div class="back">
    <div class="tooltip">
        <div class="content">
            Lorem ipsum
        </div>
        <div class="footer">
            <div class="left"><div class="circle"></div></div>
            <div class="center"></div>
            <div class="right"><div class="circle"></div></div>
        </div>
    </div>

    <div class="tooltip">
        <div class="content">
            Lorem ipsum dolor sit amet
        </div>
        <div class="footer">
            <div class="left"><div class="circle"></div></div>
            <div class="center"></div>
            <div class="right"><div class="circle"></div></div>
        </div>
    </div>

    <div class="tooltip">
        <div class="content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu mauris ut nisl pretium sollicitudin.
        </div>
        <div class="footer">
            <div class="left"><div class="circle"></div></div>
            <div class="center"></div>
            <div class="right"><div class="circle"></div></div>
        </div>
    </div>

    <div class="tooltip">
        <div class="content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu mauris ut nisl pretium sollicitudin. Cras laoreet accumsan eros vitae ultrices. Cras sit amet iaculis quam. Nullam bibendum lorem quis viverra euismod. Ut sagittis nec nisl sodales euismod. Vivamus eget ornare augue. Morbi ultricies at augue eget vestibulum. Nullam a dapibus libero, fermentum pretium leo. Cras ac sagittis ex, in mattis ante. Sed lobortis vehicula orci, pulvinar pulvinar orci consectetur eu. Sed accumsan, lorem ut lacinia tempus, tortor tellus venenatis nisi, a tincidunt quam nibh commodo erat. Vestibulum posuere, risus eu efficitur interdum, orci diam molestie est, id sodales neque mi nec ipsum. Donec consectetur sit amet ligula quis gravida. Nunc in finibus nisi. Morbi at neque mi.
        </div>
        <div class="footer">
            <div class="left"><div class="circle"></div></div>
            <div class="center"></div>
            <div class="right"><div class="circle"></div></div>
        </div>
    </div>
</div>

    在此示例中，它用于flex-box页脚。如果您确实需要支持 IE <= 9，您可以将其替换为经典版。

    • 13

  5. Режем низ на три части и с помощью православного calc наводим порядок:

    body {
  background: radial-gradient(circle at 0% 50%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px) 0px 10px, radial-gradient(at 100% 100%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px), #8a3;
  background-size: 20px 20px;
}

.tooltip {
  margin: 50px;
}

.tooltip-top {
  background: #0391fd;
  color: #FFF;
  text-align: center;
  border-radius: 10px 10px 0 0;
  padding: 10px 5px;
  font-family: Verdana, sans-serif;
}

.tooltip-bottom {
  height: 15px;
  overflow: visible;
}

.tooltip-bottom-left {
  background: #0391fd;
  float: left;
  width: calc(50% - 30px);
  height: 15px;
  border-radius: 0 0 0 10px;
}

.tooltip-bottom-center {
  float: left;
  background: url('https://isstatic.askoverflow.dev/Nw7uL.png');
  width: 60px;
  height: 41px;
  background-size: 60px 41px;
}

.tooltip-bottom-right {
  background: #0391fd;
  float: left;
  width: calc(50% - 30px);
  height: 15px;
  border-radius: 0 0 10px 0;
}
    <div class="tooltip" style="width:100px">
  <div class="tooltip-top">Тултипчик</div>
  <div class="tooltip-bottom">
    <div class="tooltip-bottom-left"></div>
    <div class="tooltip-bottom-center"></div>
    <div class="tooltip-bottom-right"></div>
  </div>
</div>
<div class="tooltip" style="width:200px">
  <div class="tooltip-top">Тултип</div>
  <div class="tooltip-bottom">
    <div class="tooltip-bottom-left"></div>
    <div class="tooltip-bottom-center"></div>
    <div class="tooltip-bottom-right"></div>
  </div>
</div>
<div class="tooltip" style="width:400px">
  <div class="tooltip-top">Тултипище<br />c тултипом-женой<br />и тултипятами</div>
  <div class="tooltip-bottom">
    <div class="tooltip-bottom-left"></div>
    <div class="tooltip-bottom-center"></div>
    <div class="tooltip-bottom-right"></div>
  </div>
</div>

    Сорян за косо обрезанную картинку.

    • 11

  6. 魔术clip-path和 6 个嵌套元素。

    *, *:before, *:after {
  box-sizing: border-box;
}

html {
  height: 100vh;
  background-image: linear-gradient(to right, #ecdff9, #af7fe0);
  background-size: 100% 100%;
}

body {
  height: 100%;
  margin: 0 10px;
}

.tooltip {
  position: relative;
  display: inline-block;
  margin: 10px auto;
}

.tooltip__block {
  display: block;
  font-size: 28px;
  color: #fff;
  font-family: Arial;
  background-color: #0391fd;
  padding: 20px 35px 50px;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, calc(50% + 90px) 100%, calc(50% + 90px) calc(100% - 30px), calc(50% - 90px) calc(100% - 30px), calc(50% - 90px) 100%, 0 100%);
}

.tooltip__arrow {
  position: absolute;
  left: calc(50% - 85px);
  top: calc(100% - 30px);
  height: 60px;
  width: 170px;
  background-color: #0391fd;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.tooltip__circle {
  display: block;
  position: absolute;
  top: calc(100% - 30px);
  width: 7px;
  background-image: radial-gradient(circle, transparent 40%, #0391fd 60%);
}

.tooltip__circle:before {
  float: left;
  content: '';
  padding-top: 100%;
}

.tooltip__circle--left {
  left: calc(50% - 91px);
  clip-path: polygon(0 0, 50% 0, 50% 50%, 0 50%);
}

.tooltip__circle--right {
  right: calc(50% - 91px);
  clip-path: polygon(50% 0, 50% 50%, 100% 50%, 100% 0);
}

.tooltip__triangle {
  width: 36px;
  background-color: #0391fd;
  position: absolute;
  bottom: 0;
}

.tooltip__triangle:before {
  float: left;
  padding-top: 72%;
  content: '';
}

.tooltip__triangle--left {
  left: calc(50% - 91px);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.tooltip__triangle--right {
  right: calc(50% - 91px);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
    <div class=tooltip>
  <span class=tooltip__block>Текст в тултипе</span>
  <span class=tooltip__arrow></span>
  <span class="tooltip__circle tooltip__circle--left"></span>
  <span class="tooltip__circle tooltip__circle--right"></span>
  <span class="tooltip__triangle tooltip__triangle--left"></span>
  <span class="tooltip__triangle tooltip__triangle--right"></span>
</div>
<br>
<br>
<br>
<div class=tooltip>
  <span class=tooltip__block>Чертовски длинный текст в тултипе, чтобы показать, что блок тянется</span>
  <span class=tooltip__arrow></span>
  <span class="tooltip__circle tooltip__circle--left"></span>
  <span class="tooltip__circle tooltip__circle--right"></span>
  <span class="tooltip__triangle tooltip__triangle--left"></span>
  <span class="tooltip__triangle tooltip__triangle--right"></span>
</div>

    • 11

  7. Первый мой ответ был опубликован до объявления конкурса и не совсем выполнял его условия. Поэтому публикую новый ответ.
    Если я правильно понял задачу, то необходимо было выполнить следующие условия:

    1. Вёрстка должна быть полностью адаптивна

    2. Вырезы на тултипе должны быть прозрачны

    3. Тултип должен растягиваться по горизонтали в зависимости от длины текста в тултипе и по вертикали (желательно), если строчек больше одной.

    Пример ниже полностью адаптивен: блоки, тултипы, текст.

    Проверена работоспособность в IE11, Firefox, Chrome, Opera

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Вывод Tooltip</title>  
<style> 

.square {
    float:left;
    position: relative;
    width: 30%;
    padding-bottom : 30%; 
    margin:1.66%;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover; 
}

.img_1-1{background-image:url('https://isstatic.askoverflow.dev/S8q6Z.jpg');}
.img_1-2{background-image:url('https://isstatic.askoverflow.dev/Ox8J2.jpg');}
.img_1-3{background-image:url('https://isstatic.askoverflow.dev/zdZU0.jpg');}


svg path 
{
fill:inherit;
}
#svg1
{
fill:yellow;
}
.container
{
width:80%;
height:auto;
margin:0px;
padding:0px;
position:relative; 
clear:both;
}
</style>
</head>

<body> 
<div class="square img_1-1">
<div class="container">
 <svg id="svg1" version="1.1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" 
 viewBox="-100 -100 480 240" >
 
<g transform="scale(1.4 1.2)">
 <use xlink:href="#tooltip"  x="0%" y="3%" fill="yellow" opacity="0.9" > </use>
 <text font-size="24" x="30" y="57" fill="dodgerblue">Морж</text>
 </g>

 </svg>
</div>	
</div>
<div class="square img_1-2">
<div class="container">
 <svg id="svg1" version="1.1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" 
 viewBox="5 0 240 240" >
 
<g transform="scale(2.2 0.75)">
 <use xlink:href="#tooltip"  x="0%" y="3%" fill="dodgerblue" opacity="0.8" > </use>

 </g>
 <text font-size="16" font-family="serif" x="45" y="45" fill="white">Харьковский  дельфинарий</text>
 </svg>
</div>	
</div>
<div class="square img_1-3">  
<div class="container">
 <svg id="svg1" version="1.1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" 
 viewBox="-60 -45 240 240" >
 <g transform="scale(1.5 1.5)">
 <use xlink:href="#tooltip"  x="3%" y="3%" fill="crimson" opacity="0.6" > </use>
 <text font-size="16" x="30" y="40" fill="white">Дельфины
 <tspan dx="-45" dy="20"> и </tspan>
 <tspan dx="-20" dy="15"> мяч</tspan>
 </text>
 </g>
 </svg>
</div>	
</div>

<div class="container">
 <svg id="svg1" version="1.1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" 
 width="100%" height="100%" viewBox="-100 -100 480 240">
 <defs>
 <g id="tooltip" transform="scale(1 1)">
 <path d="m20 10c-5.5 0-10 4.5-10 10l0 50c0 5.5 4.5 10 10 10L41.4 80.2 37.3 75.7c-2.4-2.3 0.9-4 2-2.2L59.9 95.1 80.3 73.3c1.6-1.7 3.7 0.5 1.9 2.1L78 80.2 100 80c5.5 0 10-4.5 10-10l0-50c0-5.5-4.5-10-10-10z" style="stroke-linecap:round;stroke-linejoin:round; "/>
</g>  
</defs>
 
 </svg>
</div>	





</body>
</html>

    Масштабирование тултипа осуществляется командой - transform="scale(2.2 0.75)", где первая цифра это увеличение по горизонтали, вторая уменьшение высоты. Это пример для однострочного тултипа на второй картинке (Харьковский дельфинарий)

    Важный атрибут viewBox выполняет сразу несколько задач:

    Адаптивность svg изображения

    Обязательным условием для выполнения этого является,- либо отсутствие viewport в шапке svg файла, либо задание высоты и ширины окна просмотра браузера в процентах.
    Если не указан viewport то значения по умолчанию - width="100%" и height="100%" от размеров окна браузера.

    Параметры viewBox="5 0 240 240" (не путать с viewport)

    Первые две цифры отвечают за смещение svg изображения по осям X, Y
    3,4 цифры отвечают за масштабирование изображения внутри viewport
    При изменении этих параметров необходимо помнить, что:

    У viewBox всё наоборот.

    Поэтому, если вправо перемещаем viewBox - min-x > 0, то изображение сдвигается влево. Подробнее тут и тут.
    Если увеличиваем viewBox, то изображение уменьшается. Это всё применяется для позиционирования и масштабирования тултипа.

    Клонирование тултипа

    Для этого применяется команда use 

    <use xlink:href="#tooltip"  x="0%" y="3%" fill="dodgerblue" opacity="0.8" > </use>

    Как видно в этой команде делается дополнительной позиционирование тултипа по вертикали и горизонтали.
    Цифры только в процентах, иначе svg не будет масштабироваться!

    要从内部或外部样式表样式化工具提示克隆，您必须应用强制继承 

    svg path 
{
fill:inherit;    
}

    在path填充本身fill中，一定要删除它！

    文本换行

    SVG 没有像 html
    那样的自动换行，所以你必须使用标签<tspan> 

    <text font-size="16" x="30" y="40" fill="white">Дельфины
 <tspan dx="-45" dy="20"> и </tspan>
 <tspan dx="-20" dy="15"> мяч</tspan>
 </text>

    但我认为这并不重要，因为工具提示的放置和填充是在 Html 布局期间完成的。

    • 9

  8. 我认为它是叠加在上面的白色条纹

    .tooltip:before {
  display: block;
  content: '';
  position: absolute;
  top: 10%;
  left: 50%;
  width: 2px;
  height:  14px;
  background-color: #fff;
  border-radius: 1px 1px 1px 1px;
  transform: rotate(45deg);
  z-index: 1;
}

.tooltip:after {
  display: block;
  content: '';
  position: absolute;
  top: 10%;
  left: 36%;
  width: 2px;
  height:  14px;
  background-color: #fff;
  border-radius: 1px 1px 1px 1px;
  transform: rotate(-45deg);
  z-index: 1;
}

    像这样尝试，你可以通过 div 添加一个三角形，因为 before 和 after 都很忙。

    • 7

相关问题