Dev Faq
2
votes

Effet d'info-bulle personnalisée CSS / SCSS

Bonjour les gars, j'essaie de créer une info-bulle personnalisée, avec un effet de survol sympa. J'ai trouvé un code sur Internet qui fait presque ce que je veux. Ci-dessous le code 

.tooltip {
  position: relative;

  &__item {
    position: absolute;
    min-width: 100px;
    padding: 20px;
    visibility: hidden;
    opacity: 0;
    background: white;
    transition: all .250s cubic-bezier(0, 0, 0.2, 1);
    color: #484848;
    border: 1px solid #cecece;
    border-radius: 3px;
    font-weight: 500;
    box-shadow: 0 2px 1px #bcbcbc;
    z-index: 4;
    &:after {
      content: "";
      display: block;
      position: absolute;
      width: 0;
      height: 0;
      border-style: solid;
    }
  }

  &__initiator {
    cursor: pointer;
    z-index: 5;
  }

  &[data-direction="bottom"] {

    .tooltip__initiator:hover ~ .tooltip__item {
      transform: translate3d(-50%, 0, 0);
      visibility: visible;
      opacity: 1;
    }

    .tooltip__item {
      top: calc(100% + 1em);
      left: 50%; 
      transform: translate3d(-50%, -15px, 0);

      &:after {
        top: -0.5em;
        left: 50%;
        transform: translate3d(-50%, 0, 0);
        border-width: 0 0.5em 0.5em 0.5em;
        border-color: transparent transparent white transparent;
        -webkit-filter: drop-shadow(1px 2px 1px #bcbcbc);
        filter: drop-shadow(1px -1px 1px #bcbcbc);
      }
    }
  }
}

et voici le résultat Résultat de l'info-bulle

Ce que je souhaite, c'est que l'info-bulle personnalisée soit affichée au-dessus du composant PAS en dessous . Je suis nouveau sur css / scss, alors une personne aimable peut-elle modifier le code pour moi afin d'obtenir cet effet?

MISE À JOUR
Ce lien est l'endroit d'où j'ai obtenu le code. Il a un exemple fonctionnel.

2 commentaires

Veuillez fournir un exemple fonctionnel afin que nous puissions jouer avec. Il semble que vous deviez changer le top: calc (100% + 1em); en une valeur négative

@Itay Gal J'ai fourni un lien vers un exemple fonctionnel.

3 Réponses :

1
votes

Terminé.

Copiez et collez ce CSS 

   &[data-direction="bottom"] {

    .tooltip__initiator:hover ~ .tooltip__item {
      transform: translate3d(-50%, 0, 0);
      visibility: visible;
      opacity: 1;
    }

    .tooltip__item {
      bottom: 50px;
      left: 50%; 
      transform: translate3d(-50%, -15px, 0);

      &:after {
        top: 100%;
        left: 45%;
        transform: translate3d(-40%, 0, 0);
        border-width: 0 0.5em 0.5em 0.5em;
        border-color: transparent transparent white transparent;
        transform:rotate(180deg);
        -webkit-filter: drop-shadow(1px 2px 1px #bcbcbc);
        filter: drop-shadow(1px -1px 1px #bcbcbc);
      }
    }
  }

1 commentaires

Ce n'est pas du CSS, mais du SCSS, et cela réécrirait également le bas du cas en haut du cas. Il vaudrait mieux ajouter un top case au bottom case existant

1
votes

J'ajouterais "top" data-directio. Vous devez changer l'emplacement de l'info-bulle en modifiant la valeur top . Vous devez également changer la direction et l'emplacement de la petite flèche en changeant le :after

&[data-direction="top"] {
    .tooltip__initiator:hover ~ .tooltip__item {
      transform: translate3d(-50%, 0, 0);
      visibility: visible;
      opacity: 1;
    }

    .tooltip__item {
      top: calc(-200% - 2em);
      left: 50%; 
      transform: translate3d(-50%, -15px, 0);

      &:after {
        bottom: -0.5em;
        left: 50%;
        transform: translate3d(-50%, 0, 0);
        border-width: 0.5em 0.5em 0 0.5em;
        border-color: white transparent white transparent;
        -webkit-filter: drop-shadow(1px 2px 1px #bcbcbc);
        filter: drop-shadow(-1px 1px 1px #bcbcbc);
      }
    }
  }

et les couleurs de la bordure 

filter: drop-shadow(-1px 1px 1px #bcbcbc);

0 commentaires
3
votes 

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<main>
  
  <!-- tooltip block -->
  <div class="tooltip" data-direction="top">
    <div class="tooltip__initiator">
      <!-- element with tooltip hover call -->
      <i class="fa fa-info-circle"></i>
    </div>
    <div class="tooltip__item">
      Hello! I'm a pure css tooltip going up
    </div>
  </div>
  
  <!-- tooltip block -->
  <div class="tooltip" data-direction="bottom">
    <div class="tooltip__initiator">
      <!-- element with tooltip hover call -->
      <i class="fa fa-info-circle"></i>
    </div>
    <div class="tooltip__item">
      Hello! I'm a pure css tooltip going down
    </div>
  </div>
  
  
</main>
.tooltip {
  position: relative;
}
.tooltip__item {
  position: absolute;
  min-width: 100px;
  padding: 20px;
  visibility: hidden;
  opacity: 0;
  background: white;
  transition: all 0.25s cubic-bezier(0, 0, 0.2, 1);
  color: #484848;
  border: 1px solid #cecece;
  border-radius: 3px;
  font-weight: 500;
  box-shadow: 0 2px 1px #bcbcbc;
  z-index: 4;
}
.tooltip__item:after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}
.tooltip__initiator {
  cursor: pointer;
  z-index: 5;
}
.tooltip[data-direction="left"] .tooltip__initiator:hover ~ .tooltip__item {
  transform: translate3d(0, -50%, 0);
  visibility: visible;
  opacity: 1;
}
.tooltip[data-direction="left"] .tooltip__item {
  top: 50%;
  right: calc(100% + 1em);
  transform: translate3d(15px, -50%, 0);
}
.tooltip[data-direction="left"] .tooltip__item:after {
  top: 50%;
  right: -0.5em;
  transform: translate3d(0, -50%, 0);
  border-width: 0.5em 0 0.5em 0.5em;
  border-color: transparent transparent transparent white;
  -webkit-filter: drop-shadow(0px 2px 1px #bcbcbc);
  filter: drop-shadow(0px 2px 1px #bcbcbc);
}
.tooltip[data-direction="top"] .tooltip__initiator:hover ~ .tooltip__item, .tooltip[data-direction="bottom"] .tooltip__initiator:hover ~ .tooltip__item {
  transform: translate3d(-50%, 0, 0);
  visibility: visible;
  opacity: 1;
}
.tooltip[data-direction="top"] .tooltip__item, .tooltip[data-direction="bottom"] .tooltip__item {
  left: 50%;
  transform: translate3d(-50%, -15px, 0);
}
.tooltip[data-direction="top"] .tooltip__item:after, .tooltip[data-direction="bottom"] .tooltip__item:after {
  left: 50%;
  transform: translate3d(-50%, 0, 0);
}
.tooltip[data-direction="top"] .tooltip__item {
  bottom: calc(100% + 1em);
}
.tooltip[data-direction="top"] .tooltip__item:after {
  bottom: -0.5em;
  border-width: 0.5em 0.5em 0 0.5em;
  border-color: white transparent transparent transparent;
  filter: drop-shadow(0px 2px 1px #bcbcbc);
  -webkit-filter: drop-shadow(0px 2px 1px #bcbcbc);
}
.tooltip[data-direction="bottom"] .tooltip__item {
  top: calc(100% + 1em);
}
.tooltip[data-direction="bottom"] .tooltip__item:after {
  top: -0.5em;
  border-width: 0 0.5em 0.5em 0.5em;
  border-color: transparent transparent white transparent;
  filter: drop-shadow(0px -1px 1px #bcbcbc);
  -webkit-filter: drop-shadow(0px -1px 1px #bcbcbc);
}

.fa.fa-info-circle {
  font-size: 38px;
  color: #21606b;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: sans-serif;
  background: #dadada;
  font-family: 'Roboto', sans-serif;
}

main {
  flex: 1 1 100vh;
  min-height: 100vh;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

1 commentaires

J'aurais aimé pouvoir voter 4 fois. Merci pour votre réponse homme! Cela fonctionne comme un vrai charme :)

Articles qui pourrait vous intéresser :

Le bootstrap de Twitter a-t-il des classes utilitaires de taille de police?
Mettez en surbrillance l'élément d'étiquette après avoir cliqué sur la case à cocher
Changer la direction de défilement de la page Web sur la version mobile
Target first-child css styled-components