Tooltip

SVG Path Example

by Ajith S Punalur

HTML

<svg width='698' height='402'>
  <defs>
    <marker id="line-arrow" viewBox="0 -16 32 32" refX="24" refY="0" 
      markerWidth="12" markerHeight="12" orient="auto">
      <path d="M0,-12 L24,0 L0,12" style="fill: white; stroke: white">
      </path>
    </marker>
  </defs>
</svg>

CSS

html, body {
  margin: 0;
  padding: 0;
}

svg {
  background-color: #123;
}

.demo-path {
  fill: none;
  stroke: yellow;
  stroke-width: 3;
}

line {
  fill: none;
  stroke: white;
  stroke-width: 1;
}

.path-point {
  fill: red;
  stroke: none;
}

.demo-point {
  fill: white;
  stroke: none;
  cursor: pointer;
}

.point-label {
  fill: white;
  font-family: Tahoma;
  font-size: 12pt;
}

.description {
  fill: white;
  font-family: Tahoma;
  font-size: 10pt;
}

.tooltip {
  stroke: #fff;
  fill: #456;
}

.position-control {
  cursor: pointer;
}

.position-control > circle {
  stroke: #fff;
  fill: #555; 
}

.position-control.selected > circle {
  fill: #080;
}

.position-control:hover > circle {
  fill: #999;
}

.position-control.selected:hover > circle {
  fill: #0f0;
}

.position-control > text {
  font-family: Tahoma;
  font-weight: bold;
  font-size: 12pt;
  fill: #fff;
}

.position-control:hover > text {
  fill: #000;
}

Babel + JSX

const DEMO_CR = 25

let params = {
	width: 105,
  height: 100,
  radius: 0,
  offset: 20,
  placement: 'T',
}

const points = {
	A: {x: 150, y: 190, p: 'B'},
	B: {x: 120, y: 160, p: 'T'},
	C: {x: 30, y: 160, p: 'BL', sdx: 1, edy: -1},
	D: {x: 30, y: 30, p: 'TL', sdy: 1, edx: 1},
	E: {x: 270, y: 30, p: 'TR', sdx: -1, edy: 1},
	F: {x: 270, y: 160, p: 'BR', sdy: -1, edx: -1},
	G: {x: 180, y: 160, p: 'T'},
}

const positions = {
	L: {x: 660, y: 250},
	T: {x: 525, y: 300},
	R: {x: 400, y: 250},
	B: {x: 525, y: 170},
}


const getTopTooltipPath = () => {
	const top = -params.offset - params.height 
	return `M 0,0
  	L ${-params.offset},${-params.offset} 
    H ${-params.width / 2 + params.radius} 
    Q ${-params.width / 2},${-params.offset}  
    ${-params.width / 2},${-params.offset - params.radius} 
    V ${top + params.radius} 
    Q ${-params.width / 2},${top}  
    ${-params.width / 2 + params.radius},${top}
    H ${params.width / 2 - params.radius}
    Q ${params.width / 2},${top}  
    ${params.width / 2},${top + params.radius} 
    V ${-params.offset - params.radius}
    Q ${params.width / 2},${-params.offset}  
    ${params.width / 2 - params.radius},${-params.offset}
    H ${params.offset} z` 
}

const getBottomTooltipPath = () => {
	const bottom = params.offset + params.height 
	return `M 0,0
  	L ${-params.offset},${params.offset} 
    H ${-params.width / 2 + params.radius} 
    Q ${-params.width / 2},${params.offset}  
    ${-params.width / 2},${params.offset + params.radius} 
    V ${bottom - params.radius} 
    Q ${-params.width / 2},${bottom}  
    ${-params.width / 2 + params.radius},${bottom}
    H ${params.width / 2 - params.radius}
    Q ${params.width / 2},${bottom}  
    ${params.width / 2},${bottom - params.radius} 
    V ${params.offset + params.radius}
    Q ${params.width / 2},${params.offset}  
    ${params.width / 2 - params.radius},${params.offset}
    H ${params.offset} z` 
}

const getLeftTooltipPath = () => {
	const left =...