Come mostrare, posizionare e modellare una descrizione di strumenti in HTML e CSS?

Una descrizione di strumenti viene definita un elemento che fornisce ulteriori informazioni su un elemento HTML. Questa informazione extra viene visualizzata ogni volta che l'utente porta il cursore del mouse su quel particolare elemento. Queste descrizioni di strumenti svolgono un ruolo importante nell'aggiornamento di un web design perché l'utilizzo di loro ti impedirà di visualizzare ulteriori informazioni sulla pagina Web che potrebbero non avere un bell'aspetto altrimenti. In questo articolo, illumineremo come mostrare, posizionare e modellare una descrizione di strumenti in HTML e CSS.

Prima di immergerci in altri dettagli su una descrizione di strumenti, impariamo prima come creare un titoli di strumento primario.

Come creare/mostrare una descrizione di strumenti

L'esempio seguente dimostra come creare un titoli di base.

Html

Porta il mouse su di me Testo di tooltip

Nel codice sopra, abbiamo creato un elemento Div e inserito un po 'di contenuto al suo interno e usando un elemento span, stiamo aggiungendo un testo di tooltip all'interno dell'elemento Div. Si noti che al Div è stato assegnato il titoli di classe, nel frattempo, l'elemento span è stato dato il Class ToolTipText.

CSS

.ToolTip
Posizione: relativo;
display: blocco inline;

.Tooltip .ToolTipText
Visibilità: nascosto;
Background-color: Rosybrown;
colore bianco;
raggio di confine: 7px;
imbottitura: 5px 10px;
Posizione: assoluto;
Z-INDEX: 1;

.Tooltip: Hover .ToolTipText
Visibilità: visibile;

Qui stiamo dando all'elemento Div una posizione relativa per posizionare il testo della foto di strumenti e visualizzandolo come elemento in linea in modo che il tiro sia posizionato proprio accanto all'elemento Div. Inoltre, rispetto a quel Div, stiamo regolando la posizione del tiro come assoluto. Inoltre, la visibilità della descrizione degli strumenti è nascosta ma quando il cursore del mouse viene portato sull'elemento Div, la titoli sarà visibile.

Produzione

È stato creato una descrizione di un strumento.

Ora che sappiamo come fare un titoli, esploriamo come posizionare la descrizione degli strumenti.

Come posizionare un titoli di strumento

Esistono quattro tipi di posizioni che è possibile assegnare a una descrizione di strumenti e queste sono menzionate di seguito.

1. Superiore
2. Metter il fondo a
3. Sinistra
4. Giusto

Tutte queste posizioni sono dimostrate di seguito con l'aiuto di esempi.

Come posizionare una descrizione di strumenti in alto

Ai fini del posizionamento di una descrizione di strumenti nella parte superiore useremo l'esempio soprattutto.

CSS

.ToolTip
Posizione: relativo;
display: blocco inline;

.Tooltip .ToolTipText
Visibilità: nascosto;
Background-color: Rosybrown;
colore bianco;
raggio di confine: 7px;
imbottitura: 5px 10px;
/ * Per impostare la posizione superiore del tooltip */
Posizione: assoluto;
Z-INDEX: 1;
In basso: 100%;
A sinistra: 60%;
margine -sinistra: -65px;

.Tooltip: Hover .ToolTipText
Visibilità: visibile;

Ai fini del posizionamento del tiro di strumento, stiamo usando il valore assoluto della proprietà di posizione in modo che possa essere posizionato rispetto all'elemento Div. Inoltre, per posizionarlo davanti all'elemento, gli stiamo dando un ordine di stack di 1 usando la proprietà z-indice. Inoltre, per posizionarlo esattamente sopra l'elemento abbiamo impostato le proprietà in basso, a sinistra e margine-sinistra.

Produzione

La descrizione degli strumenti è stata assegnata la posizione più alta.

Come posizionare una descrizione di strumenti in basso

Per posizionare una descrizione di strumenti in basso, considera l'esempio seguente.

CSS

.ToolTip
Posizione: relativo;
display: blocco inline;

.Tooltip .ToolTipText
Visibilità: nascosto;
Background-color: Rosybrown;
colore bianco;
raggio di confine: 7px;
imbottitura: 5px 10px;/ * per impostare la posizione inferiore del tooltip */
Posizione: assoluto;
Z-INDEX: 1;
i primi 100%;
A sinistra: 60%;
margine -sinistra: -65px;

.Tooltip: Hover .ToolTipText
Visibilità: visibile;

Il valore assoluto della proprietà di posizione posiziona il titoli rispetto all'elemento Div. Inoltre, l'ordine di pila della descrizione è impostato su 1 per posizionarlo davanti al contenitore Div. Inoltre, per posizionarlo esattamente sotto l'elemento abbiamo impostato le proprietà superiore, a sinistra e margine-sinistra.

Produzione

La descrizione degli strumenti è stata posizionata nella parte inferiore.

Come posizionare un tiro a sinistra

Se desideri posizionare la tua descrizione di strumenti a sinistra di un elemento, consulta l'esempio seguente.

CSS

.ToolTip
Posizione: relativo;
display: blocco inline;

.Tooltip .ToolTipText
Visibilità: nascosto;
Background-color: Rosybrown;
colore bianco;
raggio di confine: 7px;
imbottitura: 5px 10px;
/ * Per impostare la posizione sinistra del tooltip */
Posizione: assoluto;
Z-INDEX: 1;
Top: -6px;
A destra: 102%;

.Tooltip: Hover .ToolTipText
Visibilità: visibile;

Oltre alla posizione e alle proprietà Z-indice stiamo usando la parte superiore e le proprietà di destra, anche per posizionare la descrizione degli strumenti esattamente a sinistra dell'elemento specificato.

Produzione

Posizionato con successo la foto di strumenti a sinistra.

Come posizionare un tiro a destra

Qui abbiamo dimostrato come è possibile posizionare un tiro a destra di un elemento.

CSS

.ToolTip
Posizione: relativo;
display: blocco inline;

.Tooltip .ToolTipText
Visibilità: nascosto;
Background-color: Rosybrown;
colore bianco;
raggio di confine: 7px;
imbottitura: 5px 10px;/ * per impostare la posizione giusta del tooltip */
Posizione: assoluto;
Z-INDEX: 1;
Top: -6px;
A sinistra: 102%;

.Tooltip: Hover .ToolTipText
Visibilità: visibile;

Qui stiamo usando le proprietà superiore e sinistra per impostare la posizione della descrizione di strumenti a destra di un elemento.

Produzione

La descrizione degli strumenti è stata regolata a destra.

Come modellare una descrizione di strumenti

Negli esempi di cui sopra abbiamo disegnato la descrizione degli strumenti utilizzando alcune proprietà CSS di base come colore di sfondo, colore, allineamento del testo, radia di bordo e imbottitura. Tuttavia, ci sono altri modi per modellare anche una descrizione. Qui ti abbiamo mostrato alcuni di loro.

Aggiunta di una freccia al titoli

Allo scopo di aggiungere una freccia, come un discorso a bolle, considera l'esempio seguente.

CSS

.ToolTip
Posizione: relativo;
display: blocco inline;

.Tooltip .ToolTipText
Visibilità: nascosto;
Background-color: Rosybrown;
colore bianco;
raggio di confine: 7px;
imbottitura: 5px 10px;
Posizione: assoluto;
Z-INDEX: 1;
In basso: 150%;
A sinistra: 50%;
margine -sinistra: -60px;

.Tooltip .ToolTipText :: After
contenuto: "";
Posizione: assoluta;/ * per posizionare la titoli */
i primi 100%;
A sinistra: 50%;
margine -sinistra: -6px;
/ * Per aggiungere una freccia */
bordo: 6px solido;
Border-color: trasparente trasparente trasparente trasparente di Rosybrown;

.Tooltip: Hover .ToolTipText
Visibilità: visibile;

Qui stiamo usando il: dopo lo pseudo-elemento per visualizzare la freccia da un particolare lato del tooltip, quindi il contenuto dopo la descrizione del strumento viene lasciato vuoto. Tuttavia, per creare la freccia, viene utilizzata la proprietà del bordo. Per mantenere la freccia al centro della descrizione degli utensili, le proprietà della larghezza del confine e del margine-sinistra dovrebbero essere somministrate lo stesso ancora opposto nei valori dei segni.

Stiamo usando la proprietà bordo-colore per dare colore a ciascun bordo della freccia. Solo il bordo superiore è dato il colore rosybrown e il resto è impostato su trasparente. Se a tutti questi avessero avuto un po 'di colore, la freccia apparirebbe come un quadrato.

Infine, il titoli e la freccia sono stati posizionati sopra l'elemento. Se si desidera posizionare la descrizione degli strumenti insieme a una freccia in qualsiasi altra posizione, consultare gli esempi sopra riportati.

Produzione

Aggiunta correttamente una freccia al titoli.

Come aggiungere un effetto di dissolvenza al tiro

Al fine di dare un certo effetto, ad esempio un effetto di dissolvenza sulla descrizione di strumenti, considera l'esempio seguente.

CSS

.ToolTip
Posizione: relativo;
display: blocco inline;

.Tooltip .ToolTipText
Visibilità: nascosto;
Background-color: Rosybrown;
colore bianco;
raggio di confine: 7px;
imbottitura: 5px 10px;
Posizione: assoluto;
Z-INDEX: 1;
In basso: 150%;
A sinistra: 50%;
margine-sinistra: -60px;/ * per aggiungere un effetto dissolvenza al tooltip */
opacità: 0;
transizione: opacità 2s;

.Tooltip: Hover .ToolTipText
Visibilità: visibile;
opacità: 1;

Nel codice sopra, al fine di far svanire la descrizione di strumenti quando il mouse si libra sull'elemento, la proprietà di transizione viene utilizzata insieme alla proprietà opacità. La durata della transizione è stata impostata su 2 secondi, il che significa che ci vorranno 2 secondi perché la descrizione degli strumenti passino dall'essere invisibile a completamente visibile.

Produzione

L'effetto dissolvenza funziona correttamente.

Conclusione

Una descrizione di strumenti viene definita un elemento che fornisce ulteriori informazioni su un elemento ogni volta che un cursore del mouse viene portato su quell'elemento. Per aggiungere una descrizione di strumenti su un elemento, la proprietà di posizione viene utilizzata in base alla posizione in cui si desidera mostrare la descrizione degli strumenti. Oltre a questo, puoi aggiungere una freccia o un effetto di dissolvenza al tooltip per dargli un po 'di stile. In questo articolo, abbiamo illuminato su come mostrare, posizionare e modellare una descrizione di strumenti usando HTML e CSS.