I append the example using the tooltip
default HTML, the% tag tittle
<div class="container">
<h3>Ejemplo de Tooltip</h3>
<p>La propiedad tittle hace el efecto de tooltip en los controles HTML.</p>
<a href="#" data-toggle="tooltip" title="Mensaje del tooltip HOLA!!!">Pon el mouse encima</a>
</div>
Another example of tooltip
using bootstrap
:
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h3>Ejemplo de Tooltip</h3>
<p>La propiedad tittle hace el efecto de tooltip en los controles HTML.</p>
<p>En este ejemplo anexo bootstrap.</p>
<a href="#" data-toggle="tooltip" title="Mensaje del tooltip HOLA!!!">Pon el mouse encima</a>
</div>
The part of increasing the size when you put the mouse
, I show you the example with jquery
:
$(document).ready(function(){
$('#botones .boton').on('mouseover',function(){ /*al hacer click en un botón*/
$('body').removeClass(); /*borre todas las clases*/
if(this.id == 'aumentar'){ /*si la clase botón tiene el ID aumentar*/
$('body').addClass('grande'); /*cargue desde el CSS la clase grande*/
}
else if(this.id == 'disminuir'){ /*si el ID es disminuir*/
$('body').addClass('chica'); /*cargue la clase chica*/
}
$('#botones .boton').removeClass('seleccion'); /*elimine la negrita del boton*/
$(this).addClass('seleccion');/*agregue la negrita al botón activo*/
});
});
/*EFECTO HOVER*/
$(document).ready(function() {
$('#botones .boton').hover(function() {
$(this).addClass('sobre'); /*agregue efecto hover*/
}, function() {
$(this).removeClass('sobre'); /*quite efecto hover*/
});
});
body{
font-size:12px;
background-color:#FFFAE6;
font-family:Arial, Helvetica, sans-serif;
}
#cuadro{
border:1px solid #CCCCCC;
width:700px;
}
/*Botones*/
#botones{
border:1px solid #CCCCCC;
padding:10px;
float:left;
margin-bottom:10px;
margin-right:30px;
}
.boton{
border:1px solid #FFFFCC;
background-color:#003366;
color:#FFFFFF;
font-size:14px;
float:left;
margin-right:10px;
padding:6px;
}
/*Tamaños de tipografías*/
.grande{
font-size:16px;
}
.chica{
font-size:9px;
}
/*Efecto de boton activo y hover*/
.seleccion{
font-weight:800;
}
.sobre{
background-color:#CC0000;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="botones">
<div class="boton" id="aumentar">Texto Grande</div>
<div class="boton">Texto Normal</div>
<div class="boton" id="disminuir">Texto Chico</div>
</div>
<div class="cuadro">
<h3>Titulo del texto</h3>
<p>In tempus lacus justo. Ut varius sagittis odio, et pretium metus mattis
at. Vivamus eleifend convallis nunc non scelerisque. Nulla tincidunt neque sed tortor
venenatis viverra. Nulla adipiscing rhoncus elit, fermentum cursus nisi ornare sit amet.
Nunc sit amet neque ut lacus adipiscing gravida vel sit amet ante.</p>
<p>In tempus lacus justo. Ut varius sagittis odio, et pretium metus mattis at.
Vivamus eleifend
convallis nunc non scelerisque. Nulla tincidunt neque sed tortor venenatis viverra.
Nulla adipiscing rhoncus elit, fermentum cursus nisi ornare sit amet. Nunc sit amet
neque ut lacus adipiscing gravida vel sit amet ante.</p>
</div>
For the previous example I base myself on this league:
Switch to change the font size with jQuery
I hope you find it useful, you could specify more your question or put some example image to help you better. Greetings.