Another Inlet

_.md

[ Launch Inlet ]
Gist #4403199 [ Launch Inlet ]
Gist #4403141 [ Launch Inlet ]
Gist #4403136 [ Launch Inlet ]
Gist #3200444

config.json

{"description":"Another Inlet","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"tab":"edit","display_percent":0.42483481793265443,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"hidepanel":false}

inlet.js

var svg = d3.select("svg");




function Tooltip(config){
  this.x = config["x"] || 0;
  this.y = config["y"] || 0;
  this.width = config["width"] || 0;  
  this.height = config["height"] || 0;
  
  this.padding = config["padding"] || {"top": 0, "bottom": 0, "left": 0, "right": 0}
  this.onclickCallback = config["onclickCall"];
  this.appendTo = config["appendTo"];
    
  this.contentFill = config["tooltip-content"];

  //this.reponsiveTypes = ["fitToWidth","wrapText"];
   this.appendTo.append("g")
    .attr("class","tooltip-container")
    .attr("transform","translate("+[this.x,this.y]+")");;
	
 	 
 
  this.bgRect = this.appendTo.append("svg:rect")
    .attr("width", this.width)
    .attr("height", this.height)
    .attr("rx",20)
    .attr("ry",20)
    .attr("x",0)
    .attr("y",0)
    .attr("fill","#201F24")
    .classed("bgRect",true);
  
  
  this.arrow = this.appendTo.append('svg:path')
    .attr("fill","#201F24")
    .attr("d","m0,0 l35,0 l-17.5,20Z")
    .attr("fill","#201F24")
    .attr("transform","translate("+[(this.width/2)-8,this.height]+")");  
  
  
  this.content = this.contentFill(this.appendTo)()
  	.attr("transform","translate("+[this.padding["left"],this.padding["top"]]+")");  
  
}

Tooltip.prototype.render = function(){

}; 

Tooltip.prototype.show = function(){

};

Tooltip.prototype.destroy = function(){

};

Tooltip.prototype.hide = function(){

};

var content = function(appendTo){
  return function(){
  	return appendTo.append('svg:text')
      .text(function(d,i){ return "Hello World";})
      .attr("fill", "#FFFFFF")
      .attr("x", 0)
      .attr("y", 40)
      .attr("font-size", 29)
      .attr("font-family", "Arial")
      .attr("text-anchor", "start");

  }
}
    
    var onclickCall =  function(){
    console.log("click");
    }
    

var config = {"width": 200, "height": 100,
                  "x" : 100, "y": 100, "appendTo": svg,
                  "tooltip-content" : content, "onclick": onclickCall}    

var x = new Tooltip(config);


var config = {"width": 200, "height": 174,
                  "x" : 160, "y": 223, "appendTo": svg,
                  "tooltip-content" : content, "onclick": onclickCall}    

var y = new Tooltip(config);