Add tooltips for functions in home

This commit is contained in:
Andrea Cardaci 2018-10-09 15:12:34 +02:00
parent d7d463ee0c
commit c18a67547e
2 changed files with 19 additions and 1 deletions

View File

@ -3,7 +3,7 @@
{% for function_pair in site.data.functions %} {% for function_pair in site.data.functions %}
{% assign function_id = function_pair[0] %} {% assign function_id = function_pair[0] %}
{% assign function = function_pair[1] %} {% assign function = function_pair[1] %}
<li><a href="#+{{ function.label | downcase }}">{{ function.label }}</a></li> <li><a href="#+{{ function.label | downcase }}" data-title="{{ function.description | replace: '\n', ' ' }}">{{ function.label }}</a></li>
{% endfor %} {% endfor %}
</ul> </ul>

View File

@ -91,9 +91,27 @@ h2, h3, h4, h5, h5 {
#bin-search-wrapper { #bin-search-wrapper {
margin: 50px 0; margin: 50px 0;
padding: 10px 0; padding: 10px 0;
position: relative; // XXX needed for tooltip sizing
#bin-search-filters { #bin-search-filters {
text-align: center; text-align: center;
a:hover:before {
content: attr(data-title);
display: block;
position: absolute;
left: 0;
right: 0;
margin-top: 1.75em; // XXX below the button
margin-left: 10%;
margin-right: 10%;
padding: 1em;
border-radius: 1em;
color: $lighter;
background: rgba(0, 0, 0, 0.75);
z-index: 1;
pointer-events: none;
}
} }
#bin-search { #bin-search {