{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import pandas as pd\n",
    "import holoviews as hv\n",
    "\n",
    "hv.extension(\"bokeh\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This demo demonstrates how to build custom hover tooltips using HTML. The\n",
    "tooltips are displayed when the user hovers over a point in the plot."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Declare data"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "df = pd.DataFrame(\n",
    "    dict(\n",
    "        x=[1, 2, 3, 4, 5],\n",
    "        y=[2, 5, 8, 2, 7],\n",
    "        desc=[\"A\", \"b\", \"C\", \"d\", \"E\"],\n",
    "        imgs=[\n",
    "            \"https://docs.bokeh.org/static/snake.jpg\",\n",
    "            \"https://docs.bokeh.org/static/snake2.png\",\n",
    "            \"https://docs.bokeh.org/static/snake3D.png\",\n",
    "            \"https://docs.bokeh.org/static/snake4_TheRevenge.png\",\n",
    "            \"https://docs.bokeh.org/static/snakebite.jpg\",\n",
    "        ],\n",
    "        fonts=[\n",
    "            \"<i>italics</i>\",\n",
    "            \"<pre>pre</pre>\",\n",
    "            \"<b>bold</b>\",\n",
    "            \"<small>small</small>\",\n",
    "            \"<del>del</del>\",\n",
    "        ],\n",
    "    )\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Declare plot\n",
    "\n",
    "Having declared the tooltips' columns, we can reference them in the tooltips with `@`. Just be sure to pass *all the relevant columns* as extra `vdims` ."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "\n",
    "TOOLTIPS = \"\"\"\n",
    "    <div>\n",
    "        $label\n",
    "        <div>\n",
    "            <img\n",
    "                src=\"@imgs\" height=\"42\" alt=\"@imgs\" width=\"42\"\n",
    "                style=\"float: left; margin: 0px 15px 15px 0px;\"\n",
    "                border=\"2\"\n",
    "            ></img>\n",
    "        </div>\n",
    "        <div>\n",
    "            <span style=\"font-size: 17px; font-weight: bold;\">@desc</span>\n",
    "            <span style=\"font-size: 15px; color: #966;\">[$index]</span>\n",
    "        </div>\n",
    "        <div>\n",
    "            <span>@fonts{safe}</span>\n",
    "        </div>\n",
    "        <div>\n",
    "            <span style=\"font-size: 15px;\">Location</span>\n",
    "            <span style=\"font-size: 10px; color: #696;\">($x, $y)</span>\n",
    "        </div>\n",
    "    </div>\n",
    "\"\"\"\n",
    "\n",
    "hv.Scatter(df, kdims=[\"x\"], vdims=[\"y\", \"desc\", \"imgs\", \"fonts\"], label=\"Pictures\").opts(\n",
    "    hover_tooltips=TOOLTIPS, size=20\n",
    ")"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}