TOOLTIP
Eina de descripció de conceptes

Passa el "ratolí" per sobre de qualsevol paraula de color blau per veure l'efecte del TOOLTIP. Un tooltip és un petit quadre de text que apareix quan l’usuari passa el cursor per sobre d’un element

El SEO Search Engine Optimization: tècniques per millorar la visibilitat als cercadors. és essencial per millorar el posicionament web. El llenguatge HTML HyperText Markup Language: llenguatge base per estructurar pàgines web. s’utilitza juntament amb CSS Cascading Style Sheets: estilització visual d’una pàgina web. per definir l’aspecte. Amb JavaScript Llenguatge de programació que dona interactivitat a les pàgines web. pots fer que el contingut reaccioni a l’usuari. El disseny responsive Disseny que s’adapta a diferents mides de pantalla (mòbil, tauleta, ordinador). és clau per a una bona experiència. El back-end Part del web que no veu l’usuari: gestió de dades, servidors, etc. treballa conjuntament amb el front-end Part visual i interactiva del web que l’usuari veu i utilitza. . Un CMS Content Management System: sistema per gestionar contingut web (ex: WordPress). facilita la creació de webs sense programar. L’URL Uniform Resource Locator: l’adreça d’una pàgina web. identifica cada recurs a Internet. Una API Application Programming Interface: canal per connectar aplicacions entre si. permet que sistemes diferents treballin junts. El hosting Servei que allotja el teu web perquè sigui accessible a Internet. i el domini Nom únic que identifica el teu web (ex: www.elmeusite.cat). són imprescindibles per publicar-lo.

🧭 Què és un Tooltip i per què serveix

Un tooltip és un petit quadre de text que apareix quan l’usuari passa el cursor per sobre d’un element (com un botó, una icona o una paraula). Serveix per donar informació addicional sense saturar la pàgina, com ara:

• Definicions breus
• Explicacions de funcions
• Pistes o consells contextuals

És molt útil per millorar l’accessibilitat i l’experiència d’usuari, ja que permet mostrar contingut extra només quan cal. Això ajuda a mantenir la interfície neta i fàcil de navegar.

En resum, els tooltips són una manera senzilla i efectiva de proporcionar informació addicional sense sobrecarregar la pàgina.

📋 Codi CSS del Tooltip

.tooltip { /* Contenidor del tooltip */
  position: relative; /* Necessari per al posicionament del tooltip */
  display: inline-block; /* Permet que el tooltip estigui en línia amb el text */
  cursor: help; /* Canvia el cursor quan es passa per sobre amb un ? */
  color: #0077cc; /* Color del text */
  font-weight: bold; /* Text en negreta */
}

.tooltip .tooltip-text { /* Estil del tooltip */
  visibility: hidden; /* Ocult per defecte */
  width: 220px; /* Amplada del tooltip */
  background-color: #0a41f5; /* Color de fons */
  color: #fff; /* Color del text */
  text-align: left; /* Text alineat a l'esquerra */
  border-radius: 6px; /* Cantons arrodonits */
  padding: 8px; /* Espaiat intern */
  position: absolute; /* Posicionament absolut */
  z-index: 1; /* Assegura que el tooltip estigui per sobre d'altres elements */
  bottom: 125%; /* Posiciona el tooltip per sobre del text */
  left: 50%; /* Centrat horitzontalment */
  transform: translateX(-50%); /* Ajusta la posició per centrar */
  opacity: 0;   /* Transparència inicial */
  transition: opacity 0.3s; /* Transició suau */
  font-size: 0.9em; /* Mida de la font */
}

.tooltip:hover .tooltip-text { /* Mostra el tooltip quan es passa el cursor per sobre */
  visibility: visible; /* Fes visible el tooltip */
  opacity: 1; /* Opacitat completa */
}

.tooltip .tooltip-text::after { /* Fletxa del tooltip */
  content: ""; /* Contingut buit */
  position: absolute; /* Posicionament absolut */
  top: 100%; /* A la part inferior del tooltip */
  left: 50%; /* Centrat horitzontalment */
  margin-left: -5px; /* Ajusta la posició per centrar */
  border-width: 5px; /* Mida de la fletxa */
  border-style: solid; /* Estil de la fletxa */
  border-color: #f10404 transparent transparent transparent; /* Color de la fletxa */
}
        

<p>
  El <span class="tooltip">SEO
    <span class="tooltip-text">Search Engine Optimization: tècniques per millorar la visibilitat als cercadors.</span>
  </span> és essencial per millorar el posicionament web.

  El llenguatge <span class="tooltip">HTML
    <span class="tooltip-text">HyperText Markup Language: llenguatge base per estructurar pàgines web.</span>
  </span> s’utilitza juntament amb <span class="tooltip">CSS
    <span class="tooltip-text">Cascading Style Sheets: estilització visual d’una pàgina web.</span>
  </span> per definir l’aspecte.

  Amb <span class="tooltip">JavaScript
    <span class="tooltip-text">Llenguatge de programació que dona interactivitat a les pàgines web.</span>
  </span> pots fer que el contingut reaccioni a l’usuari.

  El disseny <span class="tooltip">responsive
    <span class="tooltip-text">Disseny que s’adapta a diferents mides de pantalla (mòbil, tauleta, ordinador).</span>
  </span> és clau per a una bona experiència.

  El <span class="tooltip">back-end
    <span class="tooltip-text">Part del web que no veu l’usuari: gestió de dades, servidors, etc.</span>
  </span> treballa conjuntament amb el <span class="tooltip">front-end
    <span class="tooltip-text">Part visual i interactiva del web que l’usuari veu i utilitza.</span>
  </span>....
   <-- CONTINUA AMB LA MATEIXA DINÀMICA PRIMER class "tooltip" després "tooltip-text" -->

        

Comparteix aquest recurs:

WhatsApp X Facebook Correu