month-picker

css month-picker

by polinux

HTML

Now, let's have a look at the basic
<a href="http://www.w3.org/Style/CSS/" class="info">css
    <span>cascade style sheets, the 
separation from content and presentation
    </span>
</a> code for the tooltip:
<p>
Now, let's have a look at the basic
<a href="http://www.w3.org/Style/CSS/" class="info">css
    <span>
        		<select>
		<option selected="selected" value="2013">2013</option>
		<option value="2018">2018</option>
		<option value="2019">2019</option>
		<option value="2020">2020</option>
		</select>
		<table>
			<tbody>
				<tr>
					<td data-month="1">Jan</td>
				<td data-month="2">Fév</td>
				<td data-month="3">Mar</td>
				</tr>
			</tbody>
		</table>

    </span>
</a> code for the tooltip:
</p>
<p>
Now, let's have a look at the basic
<a href="http://www.w3.org/Style/CSS/" class="info">css
    <span>
        		<select>
		<option selected="selected" value="2013">2013</option>
		<option value="2018">2018</option>
		<option value="2019">2019</option>
		<option value="2020">2020</option>
        </select><br/>

        <button style="width: 32px; height: 32px;" value="Jan" name="bt-a"
type="button">Jan</button>

        <button style="width: 32px; height: 32px;" value="Jan" name="bt-a"
type="button">Fév</button>
        <button style="width: 32px; height: 32px;" value="Jan" name="bt-a"
type="button">Mar</button>

        <button style="width: 32px; height: 32px;" value="Jan" name="bt-a"
type="button">Avr</button>

        
    </span>
</a> code for the tooltip:
</p>

CSS

a.info{
    position:relative; /*this is the key*/
    z-index:24; background-color:#ccc;
    color:#000;
    text-decoration:none}

a.info:hover{z-index:25; background-color:#ff0}

a.info span{display: none}

a.info:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    width:120px;
    top:2em;
    left:-.8em;
    border:1px solid #0cf;
    background-color:#cff; color:#000;
    text-align: center
}
a.info span button {
    text-align:center;
}