How to make responsive tooltip on an image?

Question

How to make responsive tooltip on an image?

Navigation

#1 by (0 votes)

1

I have an image of a plane, and I'm using tooltips to show information from different places on the plane, the drawback is that the tooltips do not hold the position on the map and they pass this

to be in disarray

How could you keep the tooltips on the image as the image resizes?

This is the 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>

And this 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;
}

html css

asked by alec_ 17.12.2018 в 21:58

source

1 answer

audio tag html5 does not play streaming on iOS Doubts about i2c in CCS compiler

score 0 · Accepted Answer

As I mentioned, I would use SVG. You need to detect the position of the mouse and if the mouse is above the information point, the tooltip appears. The text is saved in data-info of element <use> . I hope it is what you need.

Please execute the code in full page and change the size of the window.

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>