//just edit tooltips's default options here and see result above tooltip = d3.componentsTooltip() .container('.svg-element') .content([ { left: "id", right: "{id} prefix" }, { left: "name", right: "{name}" }, ]) .x(400) .y(380) .tooltipRowHeight(25) .minSpaceBetweenColumns(50) .fontSize(13) .arrowHeight(10) .arrowLength(20) .contentMargin(0) .heightOffset(7) .textColor('#2C3E50') .tooltipFill('white') .leftMargin(10) .rightMargin(3) .direction('bottom') // top,left,right // invoke with test data tooltip .show({id:1,value:"some value",name:"Some large name"})