Question

嘿嘿。

我从一个复杂的图像创建了一个 svg，显示了一张城市地图。包括用 A、B、C 或其他标记某些房屋等的小绿框。（可以在截图中看到）在鼠标悬停时，应该出现一个 div 框（不止一个工具提示行 - 如屏幕截图和代码所示） - 位于视图框内和指针旁边。或者，它可能是一个覆盖 - 在视图框内居中 - 在将指针移离 anker 时消失。

我无法使用纯 css 实现这一点，使用组合的 #C .mark #markc（例如）和可见性。

SVG-'盒子'：

<g id="C">
    <rect class="cls-245" x="88.2" y="523.4" width="11.2" height="9.26"/>
    <g class="cls-2"><path class="cls-6" d="M92.9,528.7c0,.9.4,1.4,1,1.4s.9-.4.9-1h1.3v.2a2,2,0,0,1-2.2,1.9,2.2,2.2,0,0,1-2.3-2.5v-.6a2.2,2.2,0,0,1,2.3-2.5,2,2,0,0,1,2.2,1.9v.2H94.8c0-.6-.3-1-.9-1s-1,.5-1,1.4Z"/></g>
  </g>

要出现的 DIV：

  <div class="mark" id="markc">
  <div class="thead">
      <div class="pin">C</div> <div class="label">culpepper crescent</div>
  </div>
  <div class="tdetail">
  <p class="descrp">Bewohner</p>
  <p class="peops">Heathcote Barbbary<br>Lynn Stark</p>
  </div>
  </div>

CSS 代码：

#karte {
    width: 90%;
    position: relative;
    margin: auto;
    margin-top: 70px;
    border: #fff solid 10px;
    outline: #ceccc4 solid 1px;
}

.mark {
    width: 250px;
    min-height: 100px;
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: rgb(255, 255, 255);
    line-height: 110%;
    font-weight: normal;
    z-index: 1;
    border: 10px solid #fff;
}

.thead {
    display: inline-flex;
    background-position-y: bottom;
    font-family: Roboto Slab;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.pin {
    background-color: #4e9295;
    width: 10%;
    text-align: center;
    font-size: 15px;
    color: #fff;
    padding: 8px;
}

.label {
    background-color: #D6EBEC;
    width: 90%;
    font-size: 12px;
    text-align: left;
    padding: 8px;
}

.tdetail {
    background: #E9E9E9;
    color: #4d4e52;
    font-family: calibri;
    min-height: 75px;
    text-align: left;
    padding: 0px 10px 10px 10px;
    border-top: 8px solid #fff;
}

.tdetail .descrp {
    color: #4d4e52;
    text-transform: uppercase;
    margin-bottom: -10px;
    font-weight: 600;
    font-size: 15px;
}

.tdetail .peops {
    font-weight: 300;
    font-size: 12px;
    padding: 8px;
}

它应该是一个“礼物”。我几乎没有使用 javascript 的经验 - 我很高兴将其用作解决方案，但可能需要“清晰”的说明。在完整地图上最多有 25 个“图钉”。

非常感谢！

screenshot

Answer 1

这是一个非常简单的示例实现，可帮助您入门。

您需要做更多的工作才能使其与多个工具提示一起使用。也不是它假设您的地图是 1:1。如果您的 SVG 有一个 viewBox 或以其他方式缩放，您需要做一些工作来获得正确的坐标以显示工具提示。您可以通过搜索 Stack Overflow 了解如何执行此操作。

var C = document.getElementById("C");

// Add an event handler to C that fires when the mouse moves over it
C.addEventListener("mousemove", function(evt) {
  let markc = document.getElementById("markc");
  // Position the tooltip element near the mouse
  markc.style.left = (evt.offsetX + 10) + "px";
  markc.style.top = evt.offsetY + "px";
  // Show the tooltip element
  markc.classList.remove("hidden");
});

// Add an event handler to C that fires when the mouse leaves the element
C.addEventListener("mouseout", function(evt) {
  hideElement("markc");
});


// Hide the element with given id
function hideElement(id) {
  document.getElementById(id).classList.add("hidden");
}

// Start out with the tooltip hidden
hideElement("markc");

#karte {
    width: 90%;
    position: relative;
    margin: auto;
    margin-top: 70px;
    border: #fff solid 10px;
    outline: #ceccc4 solid 1px;
}

.mark {
    width: 250px;
    min-height: 100px;
    position: absolute;   /* changed to absolute so we can position it where we want */
    display: flex;
    flex-direction: column;
    background-color: rgb(255, 255, 255);
    line-height: 110%;
    font-weight: normal;
    z-index: 1;
    border: 10px solid #fff;
}

.thead {
    display: inline-flex;
    background-position-y: bottom;
    font-family: Roboto Slab;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.pin {
    background-color: #4e9295;
    width: 10%;
    text-align: center;
    font-size: 15px;
    color: #fff;
    padding: 8px;
}

.label {
    background-color: #D6EBEC;
    width: 90%;
    font-size: 12px;
    text-align: left;
    padding: 8px;
}

.tdetail {
    background: #E9E9E9;
    color: #4d4e52;
    font-family: calibri;
    min-height: 75px;
    text-align: left;
    padding: 0px 10px 10px 10px;
    border-top: 8px solid #fff;
}

.tdetail .descrp {
    color: #4d4e52;
    text-transform: uppercase;
    margin-bottom: -10px;
    font-weight: 600;
    font-size: 15px;
}

.tdetail .peops {
    font-weight: 300;
    font-size: 12px;
    padding: 8px;
}



.cls-245 {
  fill: green;
}

.cls-6 {
  fill: white;
}

/* Needs to be position relative so we can later position the tooltip relative to it. */
.container {
  position: relative;
}

/* class used to hide the tooltip when we don't want it showing */
.hidden {
  display: none;
}

<div class="container">

  <svg width="400" height="700">
    <g id="C">
      <rect class="cls-245" x="88.2" y="523.4" width="11.2" height="9.26"/>
      <g class="cls-2"><path class="cls-6" d="M92.9,528.7c0,.9.4,1.4,1,1.4s.9-.4.9-1h1.3v.2a2,2,0,0,1-2.2,1.9,2.2,2.2,0,0,1-2.3-2.5v-.6a2.2,2.2,0,0,1,2.3-2.5,2,2,0,0,1,2.2,1.9v.2H94.8c0-.6-.3-1-.9-1s-1,.5-1,1.4Z"/></g>
    </g>
  </svg>

  <div class="mark" id="markc">
    <div class="thead">
      <div class="pin">C</div>
      <div class="label">culpepper crescent</div>
    </div>
    <div class="tdetail">
      <p class="descrp">Bewohner</p>
      <p class="peops">Heathcote Barbbary<br>Lynn Stark</p>
    </div>
  </div>
  
</div>

svg + div 鼠标悬停弹出窗口

1 个答案: