.. DO NOT EDIT.
.. THIS FILE WAS AUTOMATICALLY GENERATED BY SPHINX-GALLERY.
.. TO MAKE CHANGES, EDIT THE SOURCE PYTHON FILE:
.. "gallery/user_interfaces/svg_tooltip_sgskip.py"
.. LINE NUMBERS ARE GIVEN BELOW.

.. only:: html

    .. meta::
        :keywords: codex

    .. note::
        :class: sphx-glr-download-link-note

        :ref:`Go to the end <sphx_glr_download_gallery_user_interfaces_svg_tooltip_sgskip.py>`
        to download the full example code

.. rst-class:: sphx-glr-example-title

.. _sphx_glr_gallery_user_interfaces_svg_tooltip_sgskip.py:


===========
SVG Tooltip
===========

This example shows how to create a tooltip that will show up when
hovering over a matplotlib patch.

Although it is possible to create the tooltip from CSS or javascript,
here we create it in matplotlib and simply toggle its visibility on
when hovering over the patch. This approach provides total control over
the tooltip placement and appearance, at the expense of more code up
front.

The alternative approach would be to put the tooltip content in ``title``
attributes of SVG objects. Then, using an existing js/CSS library, it
would be relatively straightforward to create the tooltip in the
browser. The content would be dictated by the ``title`` attribute, and
the appearance by the CSS.


:author: David Huard

.. GENERATED FROM PYTHON SOURCE LINES 24-110

.. code-block:: Python



    from io import BytesIO
    import xml.etree.ElementTree as ET

    import matplotlib.pyplot as plt

    ET.register_namespace("", "http://www.w3.org/2000/svg")

    fig, ax = plt.subplots()

    # Create patches to which tooltips will be assigned.
    rect1 = plt.Rectangle((10, -20), 10, 5, fc='blue')
    rect2 = plt.Rectangle((-20, 15), 10, 5, fc='green')

    shapes = [rect1, rect2]
    labels = ['This is a blue rectangle.', 'This is a green rectangle']

    for i, (item, label) in enumerate(zip(shapes, labels)):
        patch = ax.add_patch(item)
        annotate = ax.annotate(labels[i], xy=item.get_xy(), xytext=(0, 0),
                               textcoords='offset points', color='w', ha='center',
                               fontsize=8, bbox=dict(boxstyle='round, pad=.5',
                                                     fc=(.1, .1, .1, .92),
                                                     ec=(1., 1., 1.), lw=1,
                                                     zorder=1))

        ax.add_patch(patch)
        patch.set_gid(f'mypatch_{i:03d}')
        annotate.set_gid(f'mytooltip_{i:03d}')

    # Save the figure in a fake file object
    ax.set_xlim(-30, 30)
    ax.set_ylim(-30, 30)
    ax.set_aspect('equal')

    f = BytesIO()
    plt.savefig(f, format="svg")

    # --- Add interactivity ---

    # Create XML tree from the SVG file.
    tree, xmlid = ET.XMLID(f.getvalue())
    tree.set('onload', 'init(event)')

    for i in shapes:
        # Get the index of the shape
        index = shapes.index(i)
        # Hide the tooltips
        tooltip = xmlid[f'mytooltip_{index:03d}']
        tooltip.set('visibility', 'hidden')
        # Assign onmouseover and onmouseout callbacks to patches.
        mypatch = xmlid[f'mypatch_{index:03d}']
        mypatch.set('onmouseover', "ShowTooltip(this)")
        mypatch.set('onmouseout', "HideTooltip(this)")

    # This is the script defining the ShowTooltip and HideTooltip functions.
    script = """
        <script type="text/ecmascript">
        <![CDATA[

        function init(event) {
            if ( window.svgDocument == null ) {
                svgDocument = event.target.ownerDocument;
                }
            }

        function ShowTooltip(obj) {
            var cur = obj.id.split("_")[1];
            var tip = svgDocument.getElementById('mytooltip_' + cur);
            tip.setAttribute('visibility', "visible")
            }

        function HideTooltip(obj) {
            var cur = obj.id.split("_")[1];
            var tip = svgDocument.getElementById('mytooltip_' + cur);
            tip.setAttribute('visibility', "hidden")
            }

        ]]>
        </script>
        """

    # Insert the script at the top of the file and save it.
    tree.insert(0, ET.XML(script))
    ET.ElementTree(tree).write('svg_tooltip.svg')


.. _sphx_glr_download_gallery_user_interfaces_svg_tooltip_sgskip.py:

.. only:: html

  .. container:: sphx-glr-footer sphx-glr-footer-example

    .. container:: sphx-glr-download sphx-glr-download-jupyter

      :download:`Download Jupyter notebook: svg_tooltip_sgskip.ipynb <svg_tooltip_sgskip.ipynb>`

    .. container:: sphx-glr-download sphx-glr-download-python

      :download:`Download Python source code: svg_tooltip_sgskip.py <svg_tooltip_sgskip.py>`


.. only:: html

 .. rst-class:: sphx-glr-signature

    `Gallery generated by Sphinx-Gallery <https://sphinx-gallery.github.io>`_