2b:null 2c:["$","title",null,{"children":"Hoverable tooltips for Plot | Mark McClure | Observable"}] 31:T4a5,map = { let map = Plot.plot({ color: "#ddd", width: 600, height: 400, projection: d3.geoMercator().fitExtent( [ [0, 0], [600, 400] ], italy ), marks: [ Plot.geo(italy, { fill: "#eee", stroke: "black" }), Plot.dot(cities, { x: "lng", y: "lat", r: 5, fill: "#cd212a", stroke: "black", // We're going to use the title channel to pass the name // of each city to our tip generator. title: "city" }) ] }); // Convert the native tooltips generated by "title" to // groovy Tippy tooltips. let dots = d3.select(map).selectAll("circle"); dots .each(function () { // Grab the title generated by Plot let t = d3.select(this).select("title").text(); // Apply tippy to the DOM element to attach groovy tooltips tippy(this, { content: tip(t), theme: "light-border", allowHTML: true, interactive: true, appendTo: () => document.body }); }) // Remove the native tooltip generated by Plot. .selectAll("title") .remove(); return map; }32:[{"id":"d2b04872d33b3d75deff10fa82dd6a04f56161698ba180b262b4619e19f9ae8229acff92a5e26c36243769cd23daaaa72f9f730b9595bacb63a7bfd4253d5db8","href":"https://static.observableusercontent.com/files/d2b04872d33b3d75deff10fa82dd6a04f56161698ba180b262b4619e19f9ae8229acff92a5e26c36243769cd23daaaa72f9f730b9595bacb63a7bfd4253d5db8","name":"italy.json","type":"application/json","lastModified":1690153963169.076,"size":30908},{"id":"11fd06343618be449508ceab1c5474b50147002ad8b944288e10858dd9ed8e587a473ca7b5beaaa4f84ab8a1348bddfc28860d612f676a9e46d39db5c3cd1117","href":"https://static.observableusercontent.com/files/11fd06343618be449508ceab1c5474b50147002ad8b944288e10858dd9ed8e587a473ca7b5beaaa4f84ab8a1348bddfc28860d612f676a9e46d39db5c3cd1117","name":"it.csv","type":"text/csv","lastModified":1690157516553.267,"size":1264}] 2f:{"id":"baeb8cbead1ed3d2","slug":null,"title":"Hoverable tooltips for Plot","thumbnail":"199657eea6c92ba9c65944881461554603129138ec679194a6cc228814b8d096","access_level":"public","create_time":"$D2023-07-23T23:12:26.708Z","update_time":"$D2023-08-01T21:02:26.220Z","view_time":null,"first_public_time":"$D2023-07-24T08:32:56.156Z","has_unpublished_edits":null,"fork":false,"stars":26,"starred":false,"owner":{"type":"team","id":"d771c8ae812d5130","login":"mcmcclur","name":"Mark McClure","avatar_url":"https://avatars-next.observableusercontent.com/e615e819ce83d43faef607e48c53c5ff63943aa0ba9f5848499bd02fef7396f4","tier":"starter_2024"},"version":183,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c3301e515dd08a41","login":"mcmcclur","name":"Mark McClure","avatar_url":"https://avatars-next.observableusercontent.com/e615e819ce83d43faef607e48c53c5ff63943aa0ba9f5848499bd02fef7396f4","tier":null}],"members":[{"type":"individual","id":"c3301e515dd08a41","login":"mcmcclur","name":"Mark McClure","avatar_url":"https://avatars-next.observableusercontent.com/e615e819ce83d43faef607e48c53c5ff63943aa0ba9f5848499bd02fef7396f4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":11,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Hoverable tooltips for Plot","cells":[{"id":0,"value":"# Hoverable tooltips for `Plot`\n\nPlot has recently added tooltips! While super nice, they are a bit limited. This notebook shows how to use [Tippy.js](https://atomiks.github.io/tippyjs/) to add interactive tooltips to a map generated by `Plot.geo`. If you hover over the red dots in the image below, you should see a tooltip with an `h4` header, a bulleted list, and an active link that takes you to the Wikipedia page for the corresponding city.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"// This function accepts a city name and generates the tooltip.\n// It should return raw HTML code.\nfunction tip(city) {\n let d = cities.filter((c) => c.city == city)[0];\n return `

${city}

Population: ${d.population}
Wiki Link

\n`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"## Imports and data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":148,"value":"tippy_style = html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"tippy = require(\"tippy.js@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"italy = {\n let italy = await FileAttachment(\"italy.json\").json();\n return topojson.feature(italy, italy.objects.Italy);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"cities = FileAttachment(\"it.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 30:"$2f:body"