theme: added tooltip support
This commit is contained in:
parent
106dda0fe1
commit
4fe0fe1ceb
|
@ -13,7 +13,7 @@
|
||||||
@import url("reset.css");
|
@import url("reset.css");
|
||||||
@import url("pygment.css");
|
@import url("pygment.css");
|
||||||
@import url("typogrify.css");
|
@import url("typogrify.css");
|
||||||
@import url(//fonts.googleapis.com/css?family=Yanone+Kaffeesatz&subset=latin);
|
/* @import url(//fonts.googleapis.com/css?family=Yanone+Kaffeesatz&subset=latin); */
|
||||||
|
|
||||||
/***** Global *****/
|
/***** Global *****/
|
||||||
/* Body */
|
/* Body */
|
||||||
|
|
|
@ -13,6 +13,7 @@
|
||||||
@import url("reset.css");
|
@import url("reset.css");
|
||||||
@import url("pygment.css");
|
@import url("pygment.css");
|
||||||
@import url("typogrify.css");
|
@import url("typogrify.css");
|
||||||
|
@import url("tooltip.css");
|
||||||
/* @import url(//fonts.googleapis.com/css?family=Yanone+Kaffeesatz&subset=latin); */
|
/* @import url(//fonts.googleapis.com/css?family=Yanone+Kaffeesatz&subset=latin); */
|
||||||
|
|
||||||
/***** Global *****/
|
/***** Global *****/
|
||||||
|
|
|
@ -0,0 +1,46 @@
|
||||||
|
/* Tooltip container */
|
||||||
|
.tooltip {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tooltip text */
|
||||||
|
.tooltip .tooltiptext {
|
||||||
|
visibility: hidden;
|
||||||
|
width: 120px;
|
||||||
|
background-color: #555;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
padding: 5px 0;
|
||||||
|
border-radius: 6px;
|
||||||
|
|
||||||
|
/* Position the tooltip text */
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
bottom: 125%;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -60px;
|
||||||
|
|
||||||
|
/* Fade in tooltip */
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tooltip arrow */
|
||||||
|
.tooltip .tooltiptext::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -5px;
|
||||||
|
border-width: 5px;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: #555 transparent transparent transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Show the tooltip text when you mouse over the tooltip container */
|
||||||
|
.tooltip:hover .tooltiptext {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
|
@ -4,6 +4,7 @@
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<title>{% block title %}{{ SITENAME }}{%endblock%}</title>
|
<title>{% block title %}{{ SITENAME }}{%endblock%}</title>
|
||||||
<link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/{{ CSS_FILE }}" />
|
<link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/{{ CSS_FILE }}" />
|
||||||
|
<link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/tooltip.css" />
|
||||||
{% if FEED_ALL_ATOM %}
|
{% if FEED_ALL_ATOM %}
|
||||||
<link href="{{ FEED_DOMAIN }}/{{ FEED_ALL_ATOM }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} Atom Feed" />
|
<link href="{{ FEED_DOMAIN }}/{{ FEED_ALL_ATOM }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} Atom Feed" />
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
Reference in New Issue