28172 sujets

CSS et mise en forme, CSS3

Element background "hors cadre" : création d'une bulle simple

Bonsoir,

Je souhaite créer des titres en forme de "bulle" soit un encadré simple qui sera flexible notamment en hauteur.

Pour lui donner cette idée de bulle, je souhaite ajouter une pointe en dessous et au centre de cet encadré.

Bien entendu il faudrait que la pointe dépasse de en dessous de cet encadré mais comment faire ? Smiley confus

J'ai défini :
.bulle {
	margin-top: 150px;
	background-color: #fce300;
	background-image: url(/img/pointe-bulle.png);
	background-repeat: no-repeat;
	background-position: center;
}


Comment définir le background-position de l'image de la pointe au dessous de l'encadré ? Smiley ohwell
Génial !!!!, c'est exactement ce que je cherche (avec la flèche en dessous Smiley cligne .

Cela dit, mes limites technique ne me permettent pas de reproduire cet effet dans un fichier classique html. Smiley confus

Si tu peux y jeter un œil, ce sera très sympa !!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<style type="text/css">
.tooltip {
  position relative;
  top 2.5rem;
  left 0;
  z-index 20;
  min-width 10rem;
  max-width 15rem;
  padding .5rem;
  text-align center;
  word-wrap break-word;
  color #000;
  background Orange;
  border-radius .5rem
}
.tooltip::before {
  content '';
  position absolute;
  top -1.5rem;
  left 2rem;
  z-index 19;
  border 1rem solid transparent;
  border-bottom-color Orange;
  }
  
body {
  height 100%
}

body {
  display flex
  background-color #333
}

body * {
  top 0 !important
  margin auto
}
</style>
</head>

<body class="tooltip">
 Texte de ma bulle
</body>
</html>



Et je ne connaissais pas tooltip Smiley rolleyes
Désolé pour ma réponse précipitée, il suffisait de copier-coller le code, ça fonctionne donc, merci beaucoup ! Smiley cligne

Cela dit, j'ai quelques contraintes supplémentaires et je vais tenter de l'adapter : Smiley ohwell

- la bulle doit être flexible sur les côtés car elle s'adapte à la largeur des écrans (responsive)
- la pointe doit se placer en dessous et au centre
Administrateur
Bonjour,

il y a peut-être moyen d'adapter les tooltips de Bootstrap ? Juste le JS tooltip.js, pas toute la CSS de Bootstrap ni les autres JS hein Smiley lol
http://getbootstrap.com/javascript/#tooltips
J'ai eu à implémenter un cas qui graphiquement est simple mais en fait a tous les écueils possibles quand tu essaies d'implémenter et toutes (TOUTES) les options dont j'avais besoin étaient déjà prévues.
Ça s'adapte à la position de l'infobulle pour qu'elle sorte pas de l'écran ("auto right" par exemple et il va essayer de l'afficher à droite mais si ça va pas il fait au mieux), se déclenche au clic ou au survol, la tooltip peut être un élément HTML créé à côté du bouton ou lien qui l'affiche ou dans un élément HTML de ton choix (ça m'a sauvé), etc etc
Merci, je découvre les les tooltips de Bootstrap et, si je suis impressionné par le résultat, je me sens un peu light techniquement pour étudier cette solution dès à présent, je ne connais rien à Bootstrap même si j'ai conscience que c'est une tare. Smiley confused

Mon besoin est malgré tout très modeste : je dispose déja d'un bandeau qui se redimensionne parfaitement en fonction des contrainte responsives, il faut juste que je rajoute en pied et au centre un petit triangle de la même couleur. Smiley ohwell

Est-ce qu'il y aurait donc une solution hyper basique qui me permette de répondre à ce besoin dans l'immédiat ?
...Pour tout dire, je suis un peu contraint par le css de mon thème et pour l'instant, je vois bien s'afficher ma flèche en bas de mon bandeau :

- elle ne déborde pas du cadre, elle reste à l'intérieur
- elle n'est pas centrée

Mon code actuel :
/*Mon bandeau*/
.bandeau-bulle {
background-color: #fce300;
}
/*Ma pointe*/
.bandeau-bulle::before{
content: '';
position: absolute;
z-index: 1500;
bottom: -2rem;
border: 1.5rem solid transparent;
border-top-color: Orange;
}


Smiley ohwell
Bonsoir,

Je ne suis pas chez moi mais, rapidement, pour répondre à la question sur le centrage du triangle, un peu de code vaut mieux qu'un long discours : CodePen
Super ! Smiley smile Il ne reste plus qu'à sortir la flèche du cadre et c'est gagné. Mais j'ai comme l'impression que ça va se corser à se niveau Smiley ohwell

Mon code
.fleche-bulle::before{
	content: '';
	position: absolute;
	z-index: 1500;
	bottom: -2rem;
	left: calc(50% - 1rem);
	border: 1.5rem solid transparent;
	border-top-color: Orange;
}
upload/16785-Capturedae.png
Si je disposais de la ligne de code qui me permette juste de faire dépasser la flèche du cadre, ce sera vraiment parfait !
Peut-être la semaine prochaine Smiley smile
Si la flèche n'est pas assez basse il faut jouer sur la valeur de la position... bottom, tout simplement.

PS : à voir l'image il semble qu'il y ait un overflow:hidden sur la boite principale. A supprimer, sinon on ne verra pas la pointe.
Merci pour ce suivi !
J'ai ajouté un overflow: visible!important; mais la flèche reste toujours à l'intérieur du bloc Smiley ohwell
Sujet clos
Aller à