30:T58b,## CSS Customisation We can also use CSS to customise the tooltip. Here is the example tooltip Markup. We will change the `light-theme` to a `custom-theme` by passing ```html ```31:[] 2e:{"title":"Custom Tooltip","cells":[{"id":0,"value":"# Custom Tooltip","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"Vega Embed provides a built in basic toolip functionality using the `Vega Tooltip` plugin. Read more here at https://github.com/vega/vega-tooltip/\n\nWe will walk through a few ways to customise the tooltip. You can hover over the example to see the modified tooltip.","pinned":false,"hidden":false,"mode":"md"},{"id":503,"value":"vegaEmbed(customTooltipSpec, { tooltip: { theme: \"card\" } })","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"## Using Tooltip Channel \n\nWe can specify the tooltip channel, by providing the fields.\n- Specify the fields Array to add them to the tooltip\n- There are two special fields which can make the default look better.\n - `title` : will show as title for the tooltip\n - `image` : will be displayed as an embeddded image","pinned":false,"hidden":false,"mode":"md"},{"id":207,"value":"tooltipFields = [\n { field: \"title\", type: \"nominal\" },\n { field: \"image\", type: \"nominal\" },\n { field: \"extract\", type: \"nominal\", title: \"About\" },\n { field: \"industry\", type: \"nominal\", title: \"Industry\" },\n { field: \"cause\", type: \"nominal\", title: \"Cause of Death\" }\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":187,"value":"// Add tooltip field and Change the title of the Spec\nbasicTooltipSpec = {\n let spec = _.cloneDeep(baseSpec);\n spec.encoding.tooltip = tooltipFields;\n spec.title = \"Basic Tooltip\";\n return spec;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":639,"value":"vegaEmbed(basicTooltipSpec)","pinned":true,"hidden":false,"mode":"ojs"},{"id":630,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":745,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":651,"value":"// Change the title of the Spec\ncustomTooltipSpec = {\n let spec = _.cloneDeep(basicTooltipSpec);\n spec.title = \"Custom CSS Tooltip\";\n spec.padding = { bottom: 150, top: 10 };\n return spec;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":474,"value":"vegaEmbed(customTooltipSpec, {\n tooltip: { theme: \"card\" }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":610,"value":"## More Options\n\nFor further customisation of the tooltip - look at the API https://github.com/vega/vega-tooltip/blob/next/docs/APIs.md","pinned":false,"hidden":false,"mode":"md"},{"id":26,"value":"## Spec, Data & Libraries","pinned":false,"hidden":false,"mode":"md"},{"id":337,"value":"### Base Spec\n\nNo tooltip is exposed.","pinned":false,"hidden":false,"mode":"md"},{"id":727,"value":"vegaEmbed(baseSpec)","pinned":true,"hidden":false,"mode":"ojs"},{"id":177,"value":"baseSpec = ({\n width: 600,\n height: 100,\n padding: { bottom: 20, top: 20 },\n title: \"No Tooltip\",\n mark: { type: \"circle\" },\n transform: [\n {\n window: [{ op: \"row_number\", as: \"unit\" }],\n sort: [{ field: \"profession\" }]\n },\n { calculate: \"ceil(datum.unit/ 4)\", as: \"unitX\" },\n { calculate: \"datum.unit - (datum.unitX - 1) * 4\", as: \"unitY\" }\n ],\n encoding: {\n x: { field: \"unitX\", type: \"nominal\", axis: null },\n y: { field: \"unitY\", type: \"nominal\", axis: null },\n color: { field: \"profession\", legend: null },\n opacity: { value: 0.7 },\n size: { value: 600 }\n },\n config: { view: { stroke: null }, title: { offset: 20 } },\n data: { values: peopleData }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":333,"value":"### Data & Libraries","pinned":false,"hidden":false,"mode":"md"},{"id":302,"value":"Inputs.table(peopleData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":293,"value":"peopleData = peopleRawData\n .select(\n \"name\",\n \"death_views_adjusted_1\",\n \"industry\",\n \"cause\",\n \"thumbnail_source\",\n \"extract\"\n )\n .rename({\n death_views_adjusted_1: \"views\",\n thumbnail_source: \"image\"\n })\n .derive({\n title: (d) => aq.op.upper(d.name),\n profession: (d) => aq.op.split(d.industry, \",\", 1)\n })\n .objects()","pinned":true,"hidden":false,"mode":"ojs"},{"id":321,"value":"peopleRawData = aq.loadCSV(peopleUrl)","pinned":true,"hidden":false,"mode":"ojs"},{"id":248,"value":"peopleUrl = \"https://raw.githubusercontent.com/the-pudding/wiki-death-data/master/web-data/people.csv\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"vegaEmbed = require(\"vega-embed\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}

Industry:	Film/TV
Cause of Death:	Accident
About::	Sridevi was an Indian actress and film producer, who starred in Tamil, Telugu, Hindi, Malayalam, and Kannada films. She was referred to as Indian cinema's first female superstar. She was also the recipient of a National Film Award, two Filmfare Awards and three Filmfare Awards South. In a career that spanned five decades, she was known for her sensitive portrayals of women thrown into challenging situations and appeared in a range of genres, from slapstick comedy to melodrama. Sridevi ranked as the highest-paid woman in the Indian entertainment industry in the 1980s and 1990s and is widely regarded as one of the greatest and most influential actresses in the history of Indian cinema.

Sridevi