Estoy tratando de mostrarle al usuario un menú emergente con algunas opciones si resalta algún texto en el navegador. Quiero que el menú se muestre directamente debajo del texto resaltado.
Actualmente estoy usando getBoundingClientRect() en el range del texto. Pasando el objeto al menú y usando las coordenadas para establecer el posicionamiento.
function doSomethingWithSelectedText() { let selectedText = getSelectedText(); let sel; if (selectedText && selectedText.indexOf(' ') === -1) { console.log('SELECTED TEXT =>', selectedText) sel = window.getSelection(); if (sel.rangeCount) { let range = sel.getRangeAt(0); let coords = range.getBoundingClientRect() setTimeout(() => { handleShowMenu(coords) }, 800) } } } const handleShowMenu = (coords) => { menu.style.display = 'block' menu.style.left = coords.x + 'px' menu.style.top = coords.y + 'px' }Durante algunas pruebas de resaltado de varios elementos de texto, noto:
<p> perfectamente según mi deseo.<h3> pero más cerca de la parte superior, casi superponiéndose al texto.<h1> pero ahora se superpone parcialmente a la parte inferior del texto.¿Alguna razón para este comportamiento, así como una posible solución? Gracias.
menu.style.top = coords.y + 'px'a
menu.style.top = coords.bottom + "px";Debería funcionar si estoy entendiendo tu pregunta correctamente. Obviamente, puede usar comillas simples si lo prefiere, solo prefiero comillas dobles, y recomendaría agregar los puntos y comas que no está incluyendo, pero de nuevo depende de usted, supongo.