Je propose ici deux types de bulles, avec icône. (mais on peut en ajouter d'autres si besoin.):    

  icône pour une invite à cliquer           icône pour une simple info      

AOUT 2018
L	M	M	J	V	S	D
	1	2	3le 3 Août on fête les Lydie	4	5	6Voir les odonymes de ce jour (utilisant cette date  comme nom de rues)
7	8	9	10Saint Laurent partage l'été par le milieu.	11	12	13
14Infos sur les feux d'artifice en Vendée	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31> Fin des vacances d'été, mais début d'un week-end

► Principe de base des bulles:   http://gerer-mon-blog.eklablog.fr/-a107359018→

► Modifications au principe pour incorporer des liens http://gerer-mon-blog.eklablog.fr/-a107359018#comment-84118100

 Dans l'éditeur le tableau agenda Août ci-dessus apparaitra comme cela :

Dans le code source html < >,  il apparaitra avec cette écriture :
<tr> déclarant une rangée de cellules
<td> déclarant une cellule

<!-- LE HTML DE CET AGENDA -->
<div class="bulleperso">
<table style="width: 190px; height: 190px; margin-left: auto; margin-right: auto;" cellspacing="1" cellpadding="1">
<tbody>
<tr>
<td style="text-align: center;" colspan="7"><strong>AOUT 2018</strong></td>
</tr>
<tr>
<td>L</td>
<td>M</td>
<td>M</td>
<td>J</td>
<td>V</td>
<td>S</td>
<td>D</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>1</td>
<td>2</td>
<td><a href="https://fr.wikipedia.org/wiki/Lydie_%28pr%C3%A9nom%29"> 3</a><sub>le 3 Ao&ucirc;t on f&ecirc;te <br />les Lydie</sub></td>
<td>4</td>
<td>5</td>
<td><a href="https://fr.wikipedia.org/wiki/Six-Ao&ucirc;t">6</a><sub>Voir les odonymes de ce jour</sub></td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
<td><a href="#mabulle">10</a><sub>Saint Laurent partage l'&eacute;t&eacute; par le milieu.</sub></td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td><a href="http://www.vendee-tourisme.com/actualites/2067-les-feux-d-artifice-en-vendee.html">14</a><sub>Infos sur les feux d'artifice en Vend&eacute;e <br /></sub></td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td><a style="color: #ff0000;" onmouseover="Help.bubble(this, 'Journ&eacute;e Couleurs d\'Automne dans le Parc Beaulieu de Riorges avec animation en plein air par les artistes de l\'association ')" href="#Help">23</a></td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
</tr>
<tr>
<td>28</td>
<td>29</td>
<td>30</td>
<td><a href="#mabulle">31</a><sub>&gt; Fin des vacances d'&eacute;t&eacute;, mais d&eacute;but d'un week-end <img src="/images/emoticons/cool.gif" alt="cool" width="22" height="22" /><br /></sub></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>
</div>

--

Les bulles de cet agenda utilisent le principe du code css de -Thierry- .

Code que j'ai adapté pour permettre d'intégrer des liens dans les bulles (voir ce commentaire)

Le css ci-dessous est celui utilisé ici en exemple. Il est applicable pour d'autres "info-bulles" du blog.

nota: dans un code css, tout ce qui figure entre  /* et */ n'est pas fonctionnel, il s'agit d’annotations ou de commentaires personnels

/* ====== LE CSS DE CET AGENDA ====== */
/* --- Début CSS info-bulles, simple adaptation du codage de -thierry-  --- */
/* ➀ */
.bulleperso a          /*  ▇  sélecteur texte du lien */
{
text-decoration:none;         /* pas de soulignement */
background-color:#FFFFAA;     /* couleur surlignée */
color:red;         /* ✔ couleur du texte */
font-weight : bold;   /* ✔ caractères texte en gras  */  
}
/* ➁  */
.bulleperso a:hover    /*  ▇  sélecteur texte du lien survolé */
{
    cursor:help;        /* curseur souris */
}
/* ➂ */
.bulleperso a + sub       /* ▇ sélecteur texte d'info en indice après le lien */
{  
bottom:auto;         /* Corrige le positionnement du sub */
line-height:inherit;         /* Corrige la taille de ligne du sub */
display:none;        /* pas d'affichage avant le survol */
position:absolute;        /* position absolue pour que la bulle soit positionnée hors du texte */
font-size:14px;        /* ✔ taille du texte du lien */
color:darkblue;        /* couleur du texte d'info */
text-align:left;        /* alignement du texte */
-moz-border-radius:10px;    /* bordure arrondie 10px de rayon */
-webkit-border-radius:10px;
border-radius:10px;
margin:20px 10px 0px -200px;    /*  ✔ décale l'info-bulle */
padding:10px;            /* marge intérieure de 10px */
padding-left:50px;            /* marge intérieure gauche de 50px pour laisser de la place à l'image */
border:1px solid #0000AA;        /* taille, style et couleur de la bordure */
/* ↴ fond de la bulle couleur #ddd avec image non répétée décalée de 5px à droite, centrée verticalement */ 
background:#e3f6ce url(http://ekladata.com/0wT1YjuASovWeuiczt-ZZ2I3ADs/Cliquez25.png) no-repeat 5px center;
}
/* ➃ */
.bulleperso a:hover + sub      /*  ▇   sélecteur texte en indice sur survol du lien */
{
display: inline;        /* affichage de la bulle */
}
/* ➄  ajout pour fond simple bulle (icone info si clic non actif) */
 a[href="#mabulle"] +sub {
background:#eee url(http://ekladata.com/gerer-mon-blog.eklablog.fr/perso/cadre-icons/info.png) no-repeat 5px 
center;
text-align:left;        /* alignement du texte */
}

/* --- Fin CSS info-bulles --- */