Add span to page at the cursor position

Question

I have the following JavaScript, I am trying to insert the span at where ever the cursor position is in the div.

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>

How do I go about doing it?

Answer 1

Here is an old script I've written.Hope it helps.

continent is the mouse entered 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;
    }
}