Corso di base Bootstrap4

Bootstrap4 Finestra a Sfocatura Bootstrap4 Finestra Modale

Bootstrap4 Casella di Informazione

Una finestra di suggerimento è una piccola finestra a comparsa che si visualizza quando il mouse è sopra un elemento e scompare quando il mouse è al di fuori dell'elemento.

Come creare una finestra di suggerimento

Aggiungendo 'data-toggle="tooltip"' all'elemento Creiamo una finestra di suggerimento.

Il contenuto dell'attributo 'title' è il testo visualizzato nella finestra di suggerimento:

<a href="#" data-toggle="tooltip" title="Contenuto del suggerimento!">Muovi il mouse qui</a>

Attenzione: La finestra di suggerimento deve essere scritta nel codice di inizializzazione di jQuery: quindi chiamare il metodo tooltip() sull'elemento specificato.

Esempi di finestre di suggerimento possono essere utilizzati in qualsiasi parte del documento:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Esempio di finestra di suggerimento</h2><br>
　　<a href="#" data-toggle="tooltip" title="Contenuto del suggerimento!">Muovi il mouse qui</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="tooltip"]').tooltip();　　　
});
</script>
</body>
</html>

Prova a vedere ‹/›

Ecco l'effetto dopo l'esecuzione:

Specificare la posizione della finestra di suggerimento

Per impostazione predefinita, la finestra di suggerimento viene visualizzata sopra l'elemento.

Puoi impostare la direzione di visualizzazione della finestra di suggerimento utilizzando l'attributo data-placement: top, bottom, left o right:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<h2>Esempio di finestra di suggerimento</h2><br>
　　<a href="#" data-toggle="tooltip" data-placement="top" title="Contenuto del suggerimento!">Muovi il mouse qui</a>
　　<a href="#" data-toggle="tooltip" data-placement="bottom" title="Contenuto del suggerimento!">Muovi il mouse qui</a>
　　<a href="#" data-toggle="tooltip" data-placement="left" title="Contenuto del suggerimento!">Muovi il mouse qui</a>
　　<a href="#" data-toggle="tooltip" data-placement="right" title="Contenuto del suggerimento!">Muovi il mouse qui</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="tooltip"]').tooltip();　　　
});
</script>
</body>
</html>

Prova a vedere ‹/›

Ecco l'effetto dopo l'esecuzione:

Usare nel pulsante:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
	<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Suggerimento in alto">
	　　Suggerimento in alto
	</button>
	<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Suggerimento in destra">
	　　Suggerimento in destra
	</button>
	<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Suggerimento in basso">
	　　Tooltip in basso
	</button>
	<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip a sinistra">
	　　Tooltip a sinistra
	</button>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="tooltip"]').tooltip();　　　
});
</script>
</body>
</html>

Prova a vedere ‹/›

Ecco l'effetto dopo l'esecuzione:

Aggiungi etichette HTML al contenuto dell'indicazione, imposta data-html="true", e metti il contenuto all'interno dell'etichetta title:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>con</u> <b>HTML</b>">
　　Tooltip con HTML
</button>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="tooltip"]').tooltip();　　　
});
</script>
</body>
</html>

Prova a vedere ‹/›

Ecco l'effetto dopo l'esecuzione:

Pulsante disabilitato:

Esempio

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap esempio</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
	<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Tooltip Disabilitato">
	　　<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Button Disabilitato</button>
	</span>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="tooltip"]').tooltip();　　　
});
</script>
</body>
</html>

Prova a vedere ‹/›

Ecco l'effetto dopo l'esecuzione:

Bootstrap4 Finestra a Sfocatura Bootstrap4 Finestra Modale