JSFiddle - React, Tailwind, and code Playground

by id10922606

HTML

<div ><a href="#" class="spot ico_1 glyphicon glyphicon-map-marker"  title="Dummy Text">X</a></div>

CSS

div { height:400px; height:500px;}
a { min-width:10px; padding:5px; border:solid 1px red;}
.tooltip {padding:solid 1px red;}

JavaScript

$(".spot").mouseover(function(){
        var x = $(this).position();  
		var topval = x.top;
		var leftval = x.left;
		//alert("fsdf");
		$("#myCanvas").appendTo("<span class='tooltip'>Appended text</span>");
        //alert("Top position: " + topval + " Left position: " + leftval);
			$(this).attr("title", "X= "+topval+" "+"Y= "+leftval);		
    });