31:[] 2f:{"title":"Patterns: Tooltip + Persist On Click","cells":[{"id":0,"value":"md`# Patterns: Tooltip + Persist On Click\nThis is a simple example of the tooltip pattern I often use (although there are other possible methods).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"md`First Append a tooltip div to the body (or other container element of the viz) with a variable you can access.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"toolTip = d3.select(\"body\").append(\"div\").attr(\"class\", \"toolTip\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":188,"value":"closeTip = d3.select(\"body\").append(\"div\").attr(\"class\", \"closeTip\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"md`The div needs to be styled with at least an absolute position and a display of none so it doesn't appear on hover. You can also set min/max widths`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"md`This is a simple data point with a name attribute. It would normally have additional data for positioning but this is just drawn in the center of the svg.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"dataPoint = [{name: 'Example Point'}, {name: 'Example Point'}]","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"md`Draw your data to the svg and add the on mousemove/mousemove and mouseout function to the element. I usually separate them into separate functions so the code is a little easier to navigate when the actions on hover are more complex.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"layout = {\n let height = 250\n\n let clickFlag = false\n\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n \n let node = svg.selectAll(\"circle\")\n .data(dataPoint)\n .join(\"circle\")\n .attr(\"cx\", (d,i) => 150*(i+1) )\n .attr(\"cy\", height/2)\n .attr(\"r\", 50)\n .attr(\"fill\", \"#CCC\")\n .on('mousemove', function(event, d) {\n nodeMouseOver(event, d, isTooltip)\n })\n .on('mouseout', nodeMouseOut)\n .on('click', nodeSelect)\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":140,"value":"function nodeMouseOut(event, d){\n // Hide tooltip on mouse out\n\t toolTip.style(\"display\", \"none\"); // Hide toolTip\n \n // Optional cursor change removed\n d3.select(event.target).style(\"cursor\", \"default\"); \n \n // Optional highlight removed\n\t d3.select(event.target)\n .transition()\n .attr('stroke', '#fff')\n .attr('stroke-width', 0);\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"function nodeMouseOver(event, d, isTooltip){\n if (isTooltip) {\n toolTip.style(\"left\", event.pageX + 18 + \"px\")\n .style(\"top\", event.pageY + 18 + \"px\")\n .style(\"display\", \"block\")\n .html(\n `\n Tooltip for ${d.name}\n ${d.other_var === undefined ? '' : \"

Other Thing: \" + d.other_var + \"

\"} \n `\n );\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":180,"value":"function nodeSelect(event, d, isToolTip) {\n closeTip.style(\"left\", event.pageX + 18 + \"px\")\n .style(\"top\", event.pageY + 18 + \"px\")\n .style(\"display\", \"block\")\n .html(\n `\n closable tooltip for ${d.name}\n } \n `\n );\n \n // cant see tooltip when closetip is open\n // so we set it to false\n let isTooltip = false\n return(isTooltip)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}