JSFiddle - React, Tailwind, and code Playground

by s4ty

HTML

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
  </head>
  <body>  //----------test mit Link
          <a href="#" title="Text 1" id="id1" class="link">Link</a>
          //----------test ausgabe mit media container
          <div id="mediaContainer"></div>
          //----------test mit SVG objekt
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="721" version="1.1" viewBox="0 0 422246 721" width="422246">
               <g id="id2">
                  <ellipse cx="91" cy="72" fill="#0B93F3" rx="16" ry="16" stroke="#000000" stroke-width="1.0"/>
               </g>
          </svg>
  </body>
</html>

JavaScript

var title2;
 //----------------------------Tooltip, weiter unten ist die implementierung des div containers
     $.fn.tooltip = function(optionen, inhalt){
        optionen = $.extend({
                hintergrund: "#000000",
                schriftfarbe: "#FFFFFF",
                rand: "2px #ABABAB solid",
                eckenradius: 10,
                zeit: 300
        }, optionen);

        function zeigeTooltip(evt, zeit, id){
                $("<div>", {
                        id: "tooltip",
                        css: {
                                position: "absolute",
                                left: evt.pageX + 20,
                                top: evt.pageY + 20,
                                padding: "10px",
                                background: optionen.hintergrund,
                                color: optionen.schriftfarbe,
                                fontFamily: "Tahoma, Helvetica, sans-serif",
                                fontSize: "12px",
                                border: optionen.rand,
                                display: "none",
                                "-moz-border-radius": optionen.eckenradius,
                                "-webkit-border-radius": optionen.eckenradius
                        },
                        html: inhalt["inhalt"][0][id]
                })
                .appendTo("body")
                .fadeIn(zeit);
        }

        $(this).each(function(){
                var id = $(this).attr("id");
                $(this).attr("title", "");
                $(this).bind({
                        mouseenter: function(evt){
                                if ($("#tooltip").css("opacity") != 0) {
                                        $("#tooltip").stop().remove();
                                }

                                zeigeTooltip(evt, optionen.zeit, id);
                        },
                        mouseleave: function(){
                               ...