Tooltips

_.md

[ Launch Inlet ]
Gist #4403465 [ Launch Inlet ]
Gist #4403407 [ Launch Inlet ]
Gist #4403395 [ Launch Inlet ]
Gist #4403393 [ Launch Inlet ]
Gist #4403363 [ Launch Inlet ]
Gist #4403311 [ Launch Inlet ]
Gist #4403303 [ Launch Inlet ]
Gist #4403287 [ Launch Inlet ]
Gist #4403199 [ Launch Inlet ]
Gist #4403141 [ Launch Inlet ]
Gist #4403136 [ Launch Inlet ]
Gist #3200444

config.json

{"description":"Tooltips","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.5472306512659878,"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.container = config["appendTo"];
  this.style = config["style"] || {}; 
  this.contentFill = config["tooltip-content"];

  this.container = this.container.append("g")
    .attr("class","tooltip-container")
    .attr("transform","translate("+[this.x,this.y]+")")
    .on("click",config["onclick"]);
	
 	 
 
  this.bgRect = this.container.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)
    .style(this.style);
  
  
  this.arrow = this.container.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]+")")
  	.style(this.style)
  
  this.content = this.container.append("g")
			      .attr("class","tooltip-content")
  this.content = this.contentFill(this.content, config)()

    
  
  this.render();
  
  
}

Tooltip.prototype.render = function(){
	
  
  
      var currentScale = 1
      
	  var bb = this.content.node().getBBox();
      var width = bb.width;
      var height = bb.height;

      var boxHeight = this.width - this.padding["left"] -this.padding["right"];
      var boxWidth  = this.height - this.padding["top"] - this.padding["bottom"];

      var currentSF = 1;

      var maxWidth = (boxWidth / width );

      var maxHeight = (boxHeight /height);
      var max = Math.min(maxWidth, maxHeight);
      
      var scaling = (currentSF * max);
      var old_transform = ""; 
  
      if(this.content.attr("transform") != null){
            old_transform = this.content.attr("transform");
       }
        
      this.content.attr("transform","scale("+scaling+")");
	  var bb = this.content.node().getBoundingClientRect();
  
	  this.content.attr("transform","translate("+(this.width/2 - bb.width/2)+","+(this.height/2 - bb.height/2)+")scale("+scaling+")");	
  	  //translate("+(this.width/2 - bb.width/2)+")
  	
  
  
  
}; 

Tooltip.prototype.show = function(){

};

Tooltip.prototype.destroy = function(){
	this.container.remove();
};

Tooltip.prototype.hide = function(){

};

var content = function(appendTo, config){
  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,
              "padding": {"top": 10, "bottom": 10, "left": 10, "right": 0}}    

var x = new Tooltip(config);



var content = function(appendTo, config){
  return function(){
  	return appendTo.append("svg:circle")
	.attr("r",50)
	.attr("cx",50)
	.attr("cy",50)
	.attr("fill","#6B7467")
      .on("click",function(){
      	console.log("click2");
      });
  }
}


var config = {"width": 200, "height": 174,
                  "x" : 160, "y": 223, "appendTo": svg,
                  "tooltip-content" : content, "onclick": onclickCall,
                           "padding": {"top": 10, "bottom": 10, "left": 10, "right": 0},
              "style" : {"fill":"#A3A3A3"}
             }    

var y = new Tooltip(config);


var content = function(appendTo, config){
  return function(){
  	return appendTo.append("svg:rect")
	.attr("r",50)
	.attr("width",50)
	.attr("height",50)
	.attr("fill","#727E6C")
      .on("click",function(){
      	console.log("click2");
      });
  }
}

var config = {"width": 200, "height": 174,
                  "x" : 185, "y": 484, "appendTo": svg,
                  "tooltip-content" : content, "onclick": onclickCall,
                           "padding": {"top": 10, "bottom": 10, "left": 10, "right": 0},
              "style" : {"fill":"#A3A3A3"}
             }    

var y = new Tooltip(config);


var config = {"width": 453, "height": 129,
                  "x" : 509, "y": 520, "appendTo": svg,
                  "tooltip-content" : content, "onclick": onclickCall,
                           "padding": {"top": 10, "bottom": 10, "left": 10, "right": 0},
              "style" : {"fill":"#A3A3A3"}
             }    

var y = new Tooltip(config);
var content = function(appendTo, config){
  return function(){
 	var text = appendTo.append('svg:text')
      .attr("fill", "#FFFFFF")
      .attr("x", 0)
      .attr("y", 40)
      .attr("font-size", 29)
      .attr("font-family", "Arial")
      .attr("text-anchor", "start")
      ;
	
    text.append("tspan")
	 .attr("dy",0)
      .attr("x",0)
      .text("hello wie gehjts es dior sdfsdf sdsdf")
      
    text.append("tspan")
	 .attr("dy",40)
      .attr("x",0)
      .text("hello")  
    
    return text;
  }
}
    

var config = {"width": 249, "height": 208,
                  "x" : 484, "y": 146, "appendTo": svg,
                  "tooltip-content" : content, "onclick": onclickCall,
                           "padding": {"top": 0, "bottom": 0, "left": 10, "right": 0},
              "style" : {"fill":"#A3A3A3"}
             }    

var y = new Tooltip(config);

//y.destroy();