1

Tengo una imagen de un plano, y estoy usando tooltips para mostrar información de diferentes lugares del plano, el inconveniente es que los tooltips no mantienen la posición sobre el mapa y pasan de esto introducir la descripción de la imagen aquí

a estar en desordenintroducir la descripción de la imagen aquí

Como podría mantener los tooltips sobre la imagen a medida que cambia de tamaño la imagen?

Este es el HTML

<img class="responsive center" src="casa.jpg" max-width="1200">    

<div class="btn btn-primary tooltip tool">
    <i class="fa fa-info-circle"></i>
    <div class="top">
        <h3>TERRAZAS, VENTANAS Y BALCONES</h3>
        <p>La salida a estos espacios debe estar asegurada constantemente con una cerradura, especialmente en pisos altos.</p>
                <p>Instala  mallas en la parte exterior del balcón o terraza. </p>
                <p>Aleja mesas y sillas que le permitan al niño trepar y acercarse a estos espacios.</p>
        <i></i>
    </div>
</div>

Y este el CSS

.tooltip {  
background: #fff0;
color: #555; 
cursor: pointer; font-family: "Gill Sans", Impact, sans-serif; 
font-size: 20px; 
padding: 15px 20px;
display: block;
text-align: center;
-webkit-transform: translateZ(0);
-webkit-font-smoothing: antialiased; 
left: 40px position: absolute;
text-align: left;
height:auto;
z-index:999;
}
1
  • Probablemente la imagen puede cambiar de tamaño mientras que los puntos informativos y los tooltip tienen una posición absolute. Lo podrías resolver utilizando SVG.
    – enxaneta
    el 18 dic. 2018 a las 14:06

1 respuesta 1

1

Como ya te he comentado utilizaría SVG. Necesitas detectar la posición del ratón y si el ratón está encima del punto informativo, aparece el tooltip. El texto está guardado en el data-info del elemento <use>. Espero que sea lo que necesites.

Por favor ejecuta el código en pagina completa y cambia el tamaño de la ventana.

let m = {}; //el ratón
let puntosInformativos = Array.from(document.querySelectorAll("use.puntoInfo"));
puntosInformativos.forEach(p => {
  let styles = window.getComputedStyle(tooltip, null); // los estilos calculados del tooltip
  let w = parseInt(styles.getPropertyValue("width")); // la anchura del tooltip
  let h = parseInt(styles.getPropertyValue("height")); // la altura del tooltip

  let text = p.dataset.info; // el texto del tooltip

  p.addEventListener("mousemove", evt => {
    m = oMousePos(svg, evt);
    // caslcula la posición del tooltip
    tooltip.style.left = `${m.x - w / 2}px`;
    tooltip.style.top = `${m.y - h - 8}px`; // 8 para el before
    // escribe el texto del tooltip
    tooltip.innerHTML = `<p>${text}</p>`;
  });
  // esconde el tooltip al abandonar el punto informativo
  p.addEventListener("mouseleave", esconderTooltip);
});

function esconderTooltip() {
  tooltip.style.left = "100em";
}

function oMousePos(svg, evt) {
  var ClientRect = svg.getBoundingClientRect();
  return {
    //objeto
    x: Math.round(evt.clientX - ClientRect.left),
    y: Math.round(evt.clientY - ClientRect.top)
  };
}
#contenedor {
  height: auto;
  width:50vw;
  position: relative;
}
#tooltip {
  opacity:.9;
  background: #fff0;
  color: #555;
  font-size: 20px;
  display: block;
  left: -100em;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  position: absolute;
  text-align: left;
  height: auto;
  background: white;
  border-radius: 10px;
  filter: drop-shadow(1px 1px 3px #000);
  pointer-events: none;
}
#tooltip::before {
  content: "";
  position: absolute;
  display: block;
  width: 15px;
  height: 15px;
  background: white;
  bottom: -8px;
  left: calc(50% - 8px);
  transform: rotate(45deg);
}

#tooltip p {
  margin: 15px 20px;
}
<div id="contenedor">
<svg id="svg" viewBox="0 0 100 100">
  <image width="100" height="100" xlink:href="https://upload.wikimedia.org/wikipedia/commons/thumb/1/19/Small_SVG_house_icon.svg/300px-Small_SVG_house_icon.svg" /> 
  
 <symbol id="info" width='24' height='24' viewBox='0 0 24 24'>
 <desc>el punto informativo</desc>
   <path d='M12 2c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10z' fill="333"></path>
   <path d='m13 17h-2v-6h2v6zm0-8h-2v-2h2v2z' fill='white' stroke="white" stroke-width=".5"></path>
</symbol> 
  
  <use class="puntoInfo" data-info="tejado"  xlink:href="#info" width='15' height='15' x="33" y="30" />
  <use class="puntoInfo"  data-info="puerta" xlink:href="#info" width='15' height='15' x="10" y="65" />
</svg>

  <div id="tooltip"><p>TEST</p></div>
</div>

1
  • 1
    Muchas gracias, funciona muy bien, excelente aporte
    – alec_
    el 18 dic. 2018 a las 16:31

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.