Sunday

css "tooltips" for both mouse hover & keyboard focus

2:11 PM accessibility, css, css-selectors, html No comments

Issue

I have a website where I document a list of installed Pythonic libraries.

For each library, I want to have available:

The name of the library
A link to the documentation for the library
A brief description of the library
The currently installed version

My current solution is to use the name as the text of a link, href'd to its documentation, and accept that the version & description are supplementary information, and can be made available to the user using a tool-tip - so they can sit in a title attribute

Example:

Data Visualization tools&#58; 
<a href='https://docs.bokeh.org/en/latest/docs/user_guide.html'
   title='Interactive Web Plotting for Python - version: 2.3.3'>bokeh</a>,
<a href='https://graphviz.gitlab.io/documentation/'
   title='creation and rendering of graph descriptions in the DOT language of the Graphviz graph
          drawing software - version: 2.48.0'>graphviz</a>,

This keeps the UI succinct: it's just a list of libraries, which I can group by functional type, and provides the information for the majority of users.

This works nicely, however it has two problems:

It's not wonderful for accessibility - the supplementary information is hidden from non-visual readers
The tooltips do not show if the item is selected using the keyboard

I'm looking to make whatever toggles the supplementary information work for both mouse hover and keyboard focus

.... but I just cannot figure out how to make the :focus work! I'm not sure if it's an element order/placement thing, or a selector thing...

<html lang="en">

<head>
  <title>Hack</title>
  <style>
    /* * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            } */
    
    html {
      --darkgrey: #333333;
      --lightgrey: #cccccc;
      --darkblue: #041e42;
      --lightblue: #0099ff;
      --red: #a50034;
      --yellow: #f4aa00;
      --pastel: #fff0e8;
      --white: #ffffff;
      --green: #00A611;
      --ff-title: "Poppins", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
      --ff-body: -system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Arial, sans-serif;
      font-size: 18px;
      font-weight: 400;
      line-height: 1.35;
      font-family: var(--ff-body);
      background: var(--white);
      color: var(--darkgrey);
    }
    
    *:focus {
      outline: 4px solid var(--lightblue) !important;
      outline-offset: 3px;
    }
    
    .side-padding {
      padding-left: 10%;
      padding-right: 10%;
    }
    
    a,
    a:hover,
    a:visited {
      text-decoration: none;
      color: inherit;
      border-bottom: 1px dotted #004b6b;
      border-radius: 5px;
    }
    
    #policy ul {
      margin-left: 3rem;
      margin-bottom: 1rem;
    }
    
    #policy li a,
    #policy li a:hover,
    #policy li a:visited {
      text-decoration: none;
      border-bottom: 1px dotted #004b6b;
      color: var(--darkblue);
    }
    
    #policy li span {
      color: var(--darkblue);
    }
    
    .set_of_libs {
      position: relative;
    }
    
    .set_of_libs span span {
      display: none;
      position: absolute;
      border: 1px solid var(--darkblue);
      border-radius: 0.5rem;
      background-color: var(--darkblue);
      color: var(--pastel) !important;
      padding: 0.5rem;
      transform: translate(-50%, 50%);
      z-index: 10;
      max-width: 50%;
    }
    
    .set_of_libs span:hover span,
    .set_of_libs span:focus span {
      display: inline;
    }
  </style>
</head>

<body>
  <header aria-label="Header section`">
    <h1>Obligatory h1 Heading</h1>
  </header>
  <main id="policy" class="side-padding" aria-label="The Notebooks">
    <h2>A main heading</h2>

    <section aria-labelledby="standard_notebook_h3">
      <h3 id="standard_notebook_h3">Standard Notebook</h3>
      <p>Standard Notebook is the default python 3 notebook, with a wide selection of libraries includes.</p>
      <ul>

        <li class="set_of_libs">
          Based on the <span><a href="https://github.com/jupyter/docker-stacks/tree/master/minimal-notebook" >jupyter/minimal-notebook</a> <span>(Jupyter's minimal notebook)</span></span> image.
        </li>

        <li class="set_of_libs">
          Includes <span><a href="https://nbgrader.readthedocs.io/en/stable/" >nbgrader</a> <span>(A system for assigning and grading Jupyter notebooks)</span></span> and <span><a href="https://github.com/edina/plusGitRepo" >+GitRepo</a> <span>(+GitRepo lets your students collect content from a git repository.)</span></span>
          tools for document sharing.
        </li>

        <li class="set_of_libs">
          Provide <span><a href="https://github.com/ipython-contrib/jupyter_contrib_nbextensions/blob/master/src/jupyter_contrib_nbextensions/nbextensions/rubberband/readme.md" >rubberband</a> <span>(Multi-Cell selection using a rubberband.)</span></span>,
          <span><a href="https://github.com/ipython-contrib/jupyter_contrib_nbextensions/blob/master/src/jupyter_contrib_nbextensions/nbextensions/exercise/readme.md" >exercise</a> <span>(Extension for hiding/showing solutions cells)</span></span>, and
          <span><a href="https://github.com/ipython-contrib/jupyter_contrib_nbextensions/blob/master/src/jupyter_contrib_nbextensions/nbextensions/exercise2/readme.md" >exercise-2</a> <span>(Extension for hiding/showing solutions cells)</span></span>
          extensions. <strong>Note</strong> these are not related to nbgrader in any way.
        </li>

        <li class="set_of_libs">
          Data Access libraries&#58; <span><a href='https://www.crummy.com/software/BeautifulSoup/bs4/doc/' >beautifulsoup4</a> <span>(Python library designed for screen-scraping - version: 4.9.3)</span></span>, <span><a href='https://pypi.org/project/dill/' >dill</a> <span>(Serialize all of python (almost) - version: 0.3.4)</span></span>,
          <span><a href='https://github.com/gitpython-developers/gitdb' >gitdb2</a> <span>(GitDB allows you to access bare git repositories for reading and writing - version: 4.0.2)</span></span>, <span><a href='http://xmlsoft.org/html/index.html' >libxml2</a> <span>(The XML C parser and toolkit of Gnome - version: 2.9.12)</span></span>,
          <span><a href='https://lxml.de/' >lxml</a> <span>(Pythonic binding for the C libraries libxml2 and libxslt - version: 4.6.3)</span></span>, <span><a href='https://dev.mysql.com/doc/connector-python/en/' >mysql-connector-python</a> <span>(Enables Python programs to access MySQL databases, using an API that is compliant with the Python Database API Specification v2.0 (PEP 249) - version: 8.0.25)</span></span>,
          <span><a href='https://openpyxl.readthedocs.io/en/stable/' >openpyxl</a> <span>(a Python library to read/write Excel 2010 xlsx/xlsm/xltx/xltm files - version: 3.0.7)</span></span>, <span><a href='https://developers.google.com/protocol-buffers/docs/pythontutorial' >protobuf</a> <span>(Protocol Buffers - Googles data interchange format - version: 3.16.0)</span></span>,
          <span><a href='https://github.com/willtrnr/pyxlsb' >pyxlsb</a> <span>(an Excel 2007-2010 Binary Workbook (xlsb) parser for Python - version: 1.0.8)</span></span>, <span><a href='https://docs.sqlalchemy.org/en/13/' >sqlalchemy</a> <span>(Database Abstraction Library - version: 1.4.22)</span></span>,
          <span><a href='https://anaconda.org/conda-forge/sqlite' >sqlite</a> <span>(SQLite darabase engine/server - version: 3.35.5)</span></span>, <span><a href='https://textblob.readthedocs.io/en/dev/' >textblob</a> <span>(Simple, Pythonic text processing. Sentiment analysis, part-of-speech tagging, noun phrase parsing, and more - version: 0.15.3)</span></span>,
          <span><a href='http://www.unixodbc.org/' >unixodbc</a> <span>(ODBC on non MS Windows platforms - version: 2.3.9)</span></span>, <span><a href='https://xlrd.readthedocs.io/en/latest/' >xlrd</a> <span>(Library for developers to extract data from Microsoft Excel (tm) spreadsheet files - version: 2.0.1)</span></span>,
          <span><a href='https://xlwt.readthedocs.io/en/latest/' >xlwt</a> <span>(a library for developers to use to generate spreadsheet files compatible with Microsoft Excel versions 95 to 2003 - version: 1.3.0)</span></span>, <span><a href='https://xlsxwriter.readthedocs.io/' >xlsxwriter</a> <span>(a Python module for creating Excel XLSX files - version: 1.4.4)</span></span>,
          and <span><a href='https://xmlschema.readthedocs.io/en/latest/' >xmlschema</a> <span>(An implementation of XML Schema for Python - version: 1.6.4)</span></span>
        </li>

        <li>
          Data Visualization tools&#58; <a href='https://docs.bokeh.org/en/latest/docs/user_guide.html' title='Interactive Web Plotting for Python - version: 2.3.3'>bokeh</a>, <a href='https://graphviz.gitlab.io/documentation/' title='creation and rendering of graph descriptions in the DOT language of the Graphviz graph drawing software - version: 2.48.0'>graphviz</a>,
          <a href='https://hvplot.holoviz.org/' title='0.7.3'>hvplot</a>, <a href='https://ipywidgets.readthedocs.io/en/latest/' title='Jupyter interactive widgets - version: 7.6.3'>ipywidgets</a>, <a href='https://github.com/matplotlib/ipympl' title='Matplotlib Jupyter Extension - version: 0.7.0'>ipympl</a>,
          <a href='https://github.com/K3D-tools/K3D-jupyter' title='K3D lets you create 3D plots backed by WebGL with high-level API (surfaces, isosurfaces, voxels, mesh, cloud points, vtk objects, volume renderer, colormaps, etc) - version: 2.9.7'>k3d</a>,
          <a href='https://matplotlib.org/contents.html' title='Publication quality features in Python - version: 3.4.2'>matplotlib-base</a>, <a href='https://mpld3.github.io/' title='D3 Viewer for matplotlib - version: 0.5.5'>mpld3</a>, <a href='https://jiffyclub.github.io/palettable/'
            title='Palettable (formerly brewer2mpl) is a library of color palettes for Python - version: 3.3.0'>palettable</a>, <a href='https://plotly.com/python/' title='An interactive, browser-based graphing library for Python - version: 5.1.0'>plotly</a>,
          <a href='https://geostat-framework.readthedocs.io/projects/pykrige/en/stable/' title='Supports 2D and 3D ordinary and universal kriging - version: 1.6.0'>pykrige</a>, <a href='https://docs.pymc.io/' title='PyMC3 allows you to write down models using an intuitive syntax to describe a data generating process - version: 3.11.2'>pymc3</a>,
          <a href='https://seaborn.pydata.org/' title='Statistical data visualization - version: 0.11.1'>seaborn</a>, <a href='https://pypi.org/project/widgetsnbextension/' title='Interactive HTML Widgets for Jupyter - version: 3.5.1'>widgetsnbextension</a>,
          and <a href='http://amueller.github.io/word_cloud/' title='A little word cloud generator in Python - version: 1.8.1'>wordcloud</a>
        </li>

      </ul>
    </section>
  </main>
</body>

</html>

See my demo in CodePen: https://codepen.io/perllaghu/pen/NWgdgJb

Solution

Use focus-within rather than focus

.set_of_libs span:hover span,
.set_of_libs span:focus-within span {
    display: inline;
}

html {
  --darkgrey: #333333;
  --lightgrey: #cccccc;
  --darkblue: #041e42;
  --lightblue: #0099ff;
  --red: #a50034;
  --yellow: #f4aa00;
  --pastel: #fff0e8;
  --white: #ffffff;
  --green: #00A611;
  --ff-title: "Poppins", "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
  --ff-body: -system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.35;
  font-family: var(--ff-body);
  background: var(--white);
  color: var(--darkgrey);
}

*:focus {
  outline: 4px solid var(--lightblue) !important;
  outline-offset: 3px;
}

.side-padding {
  padding-left: 10%;
  padding-right: 10%;
}

a,
a:hover,
a:visited {
  text-decoration: none;
  color: inherit;
  border-bottom: 1px dotted #004b6b;
  border-radius: 5px;
}

#policy ul {
  margin-left: 3rem;
  margin-bottom: 1rem;
}

#policy li a,
#policy li a:hover,
#policy li a:visited {
  text-decoration: none;
  border-bottom: 1px dotted #004b6b;
  color: var(--darkblue);
}

#policy li span {
  color: var(--darkblue);
}

.set_of_libs {
  position: relative;
}

.set_of_libs span span {
  display: none;
  position: absolute;
  border: 1px solid var(--darkblue);
  border-radius: 0.5rem;
  background-color: var(--darkblue);
  color: var(--pastel) !important;
  padding: 0.5rem;
  transform: translate(-50%, 50%);
  z-index: 10;
  max-width: 50%;
}

.set_of_libs span:hover span,
.set_of_libs span:focus-within span {
  display: inline;
}

<header aria-label="Header section`">
  <h1>Obligatory h1 Heading</h1>
</header>
<main id="policy" class="side-padding" aria-label="The Notebooks">
  <h2>A main heading</h2>

  <section aria-labelledby="standard_notebook_h3">
    <h3 id="standard_notebook_h3">Standard Notebook</h3>
    <p>Standard Notebook is the default python 3 notebook, with a wide selection of libraries includes.</p>
    <ul>

      <li class="set_of_libs">
        Based on the <span><a href="https://github.com/jupyter/docker-stacks/tree/master/minimal-notebook">jupyter/minimal-notebook</a> <span>(Jupyter's minimal notebook)</span></span> image.
      </li>

      <li class="set_of_libs">
        Includes <span><a href="https://nbgrader.readthedocs.io/en/stable/">nbgrader</a> <span>(A system for assigning and grading Jupyter notebooks)</span></span> and <span><a href="https://github.com/edina/plusGitRepo">+GitRepo</a> <span>(+GitRepo lets your students collect content from a git repository.)</span></span>
        tools for document sharing.
      </li>

      <li class="set_of_libs">
        Provide <span><a href="https://github.com/ipython-contrib/jupyter_contrib_nbextensions/blob/master/src/jupyter_contrib_nbextensions/nbextensions/rubberband/readme.md">rubberband</a> <span>(Multi-Cell selection using a rubberband.)</span></span>,
        <span><a href="https://github.com/ipython-contrib/jupyter_contrib_nbextensions/blob/master/src/jupyter_contrib_nbextensions/nbextensions/exercise/readme.md">exercise</a> <span>(Extension for hiding/showing solutions cells)</span></span>, and
        <span><a href="https://github.com/ipython-contrib/jupyter_contrib_nbextensions/blob/master/src/jupyter_contrib_nbextensions/nbextensions/exercise2/readme.md">exercise-2</a> <span>(Extension for hiding/showing solutions cells)</span></span> extensions.
        <strong>Note</strong> these are not related to nbgrader in any way.
      </li>

      <li class="set_of_libs">
        Data Access libraries&#58; <span><a href='https://www.crummy.com/software/BeautifulSoup/bs4/doc/'>beautifulsoup4</a> <span>(Python library designed for screen-scraping - version: 4.9.3)</span></span>, <span><a href='https://pypi.org/project/dill/'>dill</a> <span>(Serialize all of python (almost) - version: 0.3.4)</span></span>,
        <span><a href='https://github.com/gitpython-developers/gitdb'>gitdb2</a> <span>(GitDB allows you to access bare git repositories for reading and writing - version: 4.0.2)</span></span>, <span><a href='http://xmlsoft.org/html/index.html'>libxml2</a> <span>(The XML C parser and toolkit of Gnome - version: 2.9.12)</span></span>,
        <span><a href='https://lxml.de/'>lxml</a> <span>(Pythonic binding for the C libraries libxml2 and libxslt - version: 4.6.3)</span></span>, <span><a href='https://dev.mysql.com/doc/connector-python/en/'>mysql-connector-python</a> <span>(Enables Python programs to access MySQL databases, using an API that is compliant with the Python Database API Specification v2.0 (PEP 249) - version: 8.0.25)</span></span>,
        <span><a href='https://openpyxl.readthedocs.io/en/stable/'>openpyxl</a> <span>(a Python library to read/write Excel 2010 xlsx/xlsm/xltx/xltm files - version: 3.0.7)</span></span>, <span><a href='https://developers.google.com/protocol-buffers/docs/pythontutorial'>protobuf</a> <span>(Protocol Buffers - Googles data interchange format - version: 3.16.0)</span></span>,
        <span><a href='https://github.com/willtrnr/pyxlsb'>pyxlsb</a> <span>(an Excel 2007-2010 Binary Workbook (xlsb) parser for Python - version: 1.0.8)</span></span>, <span><a href='https://docs.sqlalchemy.org/en/13/'>sqlalchemy</a> <span>(Database Abstraction Library - version: 1.4.22)</span></span>,
        <span><a href='https://anaconda.org/conda-forge/sqlite'>sqlite</a> <span>(SQLite darabase engine/server - version: 3.35.5)</span></span>, <span><a href='https://textblob.readthedocs.io/en/dev/'>textblob</a> <span>(Simple, Pythonic text processing. Sentiment analysis, part-of-speech tagging, noun phrase parsing, and more - version: 0.15.3)</span></span>,
        <span><a href='http://www.unixodbc.org/'>unixodbc</a> <span>(ODBC on non MS Windows platforms - version: 2.3.9)</span></span>, <span><a href='https://xlrd.readthedocs.io/en/latest/'>xlrd</a> <span>(Library for developers to extract data from Microsoft Excel (tm) spreadsheet files - version: 2.0.1)</span></span>,
        <span><a href='https://xlwt.readthedocs.io/en/latest/'>xlwt</a> <span>(a library for developers to use to generate spreadsheet files compatible with Microsoft Excel versions 95 to 2003 - version: 1.3.0)</span></span>, <span><a href='https://xlsxwriter.readthedocs.io/'>xlsxwriter</a> <span>(a Python module for creating Excel XLSX files - version: 1.4.4)</span></span>,
        and <span><a href='https://xmlschema.readthedocs.io/en/latest/'>xmlschema</a> <span>(An implementation of XML Schema for Python - version: 1.6.4)</span></span>
      </li>

      <li>
        Data Visualization tools&#58; <a href='https://docs.bokeh.org/en/latest/docs/user_guide.html' title='Interactive Web Plotting for Python - version: 2.3.3'>bokeh</a>, <a href='https://graphviz.gitlab.io/documentation/' title='creation and rendering of graph descriptions in the DOT language of the Graphviz graph drawing software - version: 2.48.0'>graphviz</a>,
        <a href='https://hvplot.holoviz.org/' title='0.7.3'>hvplot</a>, <a href='https://ipywidgets.readthedocs.io/en/latest/' title='Jupyter interactive widgets - version: 7.6.3'>ipywidgets</a>, <a href='https://github.com/matplotlib/ipympl' title='Matplotlib Jupyter Extension - version: 0.7.0'>ipympl</a>,
        <a href='https://github.com/K3D-tools/K3D-jupyter' title='K3D lets you create 3D plots backed by WebGL with high-level API (surfaces, isosurfaces, voxels, mesh, cloud points, vtk objects, volume renderer, colormaps, etc) - version: 2.9.7'>k3d</a>,
        <a href='https://matplotlib.org/contents.html' title='Publication quality features in Python - version: 3.4.2'>matplotlib-base</a>, <a href='https://mpld3.github.io/' title='D3 Viewer for matplotlib - version: 0.5.5'>mpld3</a>, <a href='https://jiffyclub.github.io/palettable/'
          title='Palettable (formerly brewer2mpl) is a library of color palettes for Python - version: 3.3.0'>palettable</a>, <a href='https://plotly.com/python/' title='An interactive, browser-based graphing library for Python - version: 5.1.0'>plotly</a>,
        <a href='https://geostat-framework.readthedocs.io/projects/pykrige/en/stable/' title='Supports 2D and 3D ordinary and universal kriging - version: 1.6.0'>pykrige</a>, <a href='https://docs.pymc.io/' title='PyMC3 allows you to write down models using an intuitive syntax to describe a data generating process - version: 3.11.2'>pymc3</a>,
        <a href='https://seaborn.pydata.org/' title='Statistical data visualization - version: 0.11.1'>seaborn</a>, <a href='https://pypi.org/project/widgetsnbextension/' title='Interactive HTML Widgets for Jupyter - version: 3.5.1'>widgetsnbextension</a>,
        and <a href='http://amueller.github.io/word_cloud/' title='A little word cloud generator in Python - version: 1.8.1'>wordcloud</a>
      </li>

    </ul>
  </section>
</main>

Answered By - Alexandre Elshobokshy

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Sunday

css "tooltips" for both mouse hover & keyboard focus

Issue

Solution

0 comments:

Post a Comment

Popular Posts

Labels