Spanne zur Seite an der Cursorposition hinzufügen

Question

Ich habe das folgende JavaScript, ich versuche, die Spanne an der Stelle einzufügen, an der sich die Cursorposition im div befindet.

var appendPlaceHolder = function (field) { 
     var e = document.getElementById("t"); 
     e.innerHTML += (' <span class="nonEditable tags">{' + field + '} <span onclick=removePlaceholder(this) class="testing"></span>x</span> '); 
    } 

<div id="t" contenteditable="true"> 
    Hello 
</div> 

Wie gehe ich dagegen zu tun?

Answer 1

Hier ist ein altes Skript, das ich geschrieben habe. Hoffe es hilft.

Kontinent ist die Maus eingegeben div, tooltipOutput

function continentTooltip(continent, tooltipOutput) { 
    var tooltip = $('.map__tooltip'); 

    $(continent).mouseenter(function() { 

     $(document).off('mousemove').bind('mousemove', function(e){ 

      var positionX = (e.pageX + 20) + 'px'; 
      var positionY = e.pageY + 'px'; 

      $('.map__tooltip').css(  
      "transform" , 'translate(' + positionX + ', ' + positionY + ')' 
     ); 
     }); 

     tooltip.addClass('map__tooltip--show'); 
     tooltip.text(tooltipOutput) 
    }) 

    $(continent).mouseleave(function() { 
     tooltip.removeClass('map__tooltip--show');   
    }); 
    } 
    //call script 
    continentTooltip(africa, 'Vacations in Africa'); 

HTML:

<div class="map__tooltip"></div> 

CSS:

.map__tooltip { 
    display: none; 
    background-color: #FFF; 
    border-radius: $radius; 
    padding: 4px; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

.map__tooltip--show { 
    display: block; 
} 

@media screen and (max-width: 1300px) { 

    .map__tooltip--show { 
     display: none; 
    } 
}