Tooltip mit CSS gestalten

Spawnsplitter · 18 April 2023

Hey Leute und zwar habe ich eine Frage, aktuell programmiere ich eine Website für einen Kunden. Ich habe geplant ein Hotspot Element zu verwenden und den Marker per Keyframes zu animieren. Mein Problem liegt nun darin das eben nicht nur der Marker animiert wird, sondern auch direkt der Tooltip mit, was nicht gewollt ist. Ich habe schon animation: none etc ausprobiert doch nichts führt zu dem Ergebnis das Ich möchte. Vielleicht habt Ihr ja einen Tipp für mich

HTML:

<div class="Hotspots">
  <div class="HotspotsEinleitung">
    <h3>Wohlfühlfaktor wie daheim</h3>
    <p>Von rustikal, über klassisch bis hin zu Winestyle und exklusivem Charme erfüllen unsere Häuser alle Ansprüche und Wünsche verschiedener Geschmäcker.</p>
    <button class="btnHotspot">Jetzt Buchen</button>
  </div>
  <div class="image-container-map">
    <img src="./Bilder/webp/karte_2.webp" alt="Karte" width="100%" height="auto">
    <a href="#" class="hotspot" style="top: 30%; left: 20%;" data-tooltip="Weingarten" aria-label="Weingarten"></a>
    <a href="#" class="hotspot" style="top: 30%; left: 35%;" data-tooltip="Gästehaus am Marktplatz" aria-label="Gästehaus am Marktplatz"></a>
    <a href="#" class="hotspot" style="top: 37%; left: 39%;" data-tooltip="Stammhaus Zeltinger-Hof" aria-label="Stammhaus Zeltinger-Hof"></a>
    <a href="#" class="hotspot" style="top: 42%; left: 37%;" data-tooltip="Winzerhaus" aria-label="Winzerhaus"></a>
    <a href="#" class="hotspot" style="top: 42%; left: 40%;" data-tooltip="Alte Kellerei" aria-label="Alte Kellerei"></a>
    <a href="#" class="hotspot" style="top: 49%; left: 43%;" data-tooltip="Gästehaus Weinkabinett" aria-label="Gästehaus Weinkabinett"></a>
    <a href="#" class="hotspot" style="top: 47%; left: 61%;" data-tooltip="Ratsschänke Kinkerlitzche - Tapas & Wine by Reis" aria-label="Ratsschänke Kinkerlitsche"></a>
  </div>

</div>

CSS:

.Hotspots {
  display: flex;
  flex-wrap: wrap;
  padding: 5px 5px 5px 5px;
  word-wrap: break-word;
}

@media (min-width: 768px) {
  .Hotspots {
    display: flex;
    flex-wrap: nowrap;
    padding-top: 150px;
  }
}

.Hotspots h3 {
  font-size: 1.8em;
  padding-left: 10px;
}

.Hotspots p {
  line-height: 1.4em;
  font-weight: bold;
  padding-left: 10px;
  font-family: 'Effra Refular';
}





.btnHotspot {
  display: block;
  margin-top: 30px;
  padding: 15px 23px 15px 23px;
  margin-left: 10px;
  margin-bottom: 25px;
  font-size: 0.8em;
  background-color: #455659;
  color: #fff;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: bold;
  border: solid 1px;
}




@keyframes pulsate {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(0, 0, 0 ,0 );
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 0, 0 ,0);
  }
}

  .HotspotsEinleitung {
    line-height: 2.6em;
    position: relative;
    padding-right: 10px;
  }

  .HotspotsEinleitung p {
    font-weight: bolder;
    font-family: 'effra regular';
  }



  @media (min-width: 768px) {
    .HotspotsEinleitung {
      width: 15%;
      line-height: 1.3;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-left: 150px;
      padding-right: 50px;
    }
  }

  @media (min-width: 768px) {
    .HotspotsEinleitung button {
      width: 70%;
    }
  }

  @media (min-width: 768px) {
    .HotspotsEinleitung h3 {
      font-size: 2.625rem;
    }
  }

  @media (min-width: 768px) {
    .HotspotsEinleitung p {
      font-size: 1.1rem;
      font-weight: bold;
    
      margin-top: -20px;
    }
  }

  .image-container-map {
    position: relative;
    width: 100%;
    object-fit: cover;
  }

  .image-container-map a {
    animation: pulsate 2.5s ease-out;
    animation-iteration-count: infinite;
  }

  .image-container-map img {
    width: 100%;
  }

 

 
  .hotspot {
    width: 25px;
    height: 25px;
    position: absolute;
    display: block;
    border-radius: 50%;
    background-color: #45575A;
    
  }


  .hotspot:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    width: 120px;
    padding: 28px;
    font-size: 12px;
    color: black;
    background-color: #E4E4E6;
    border-radius: 5px;
    text-align: center;
    z-index: 9999;
    text-transform: uppercase;
    font-weight: 900;
    font-family: "Effra Regular";
    
    }

AndreasB · 18 April 2023

Hallo @Spawnsplitter

Dein Problem ist, dass du den Tooltip als after Element an den Link (Hotspot) hängst.
Diesen animierst du und dadurch werden die Kinder (Was ja in deinem Fall der Tooltip ist) mit animiert.
Eine mögliche Lösung bestände zum Beispiel darin, den Hotspot in einen Container zu packen, der nicht animiert wird und dann den Tooltip an diesen Container zu hängen.
Der Hotspot wird dann animiert und der Tooltip bleibt stabil.

So ein Container würde dann z.B so aussehen:

HTML:

<div class="hotspot-container">
    <a href="" class="Hotspot"></a> <!-- Der Hotspot bekommt die Animation -->
    <!-- Hier würde dann der Tooltip landen und daher nicht mit animiert werden. -->
</div>

Spawnsplitter · 19 April 2023

Leider funktioniert diese Lösung nicht so wie gedacht, da ich den tooltip nicht auslagern kann

AndreasB · 19 April 2023

Spawnsplitter schrieb:
[...] da ich den tooltip nicht auslagern kann

Was ist der Grund dafür?

Spawnsplitter · 20 April 2023

Weil er abhängig von der hotspot klasse ist

Oliver77 · 21 April 2023

Hallo, hab mal was kleines in Javascript gebaut, womit der Tool-Tip wie gewünscht funktioniert:
https://codepen.io/Oliver7777/pen/YzJpvMR

AndreasB · 21 April 2023

Spawnsplitter schrieb:
Weil er abhängig von der hotspot klasse ist

Aber man kann den Tooltip doch auch an den Hotspot Container hängen.

Ich habe mal die Lösung, die ich meinte skizziert:

html:

HTML:

<div class="image-container-map">
    <div class="hotspot-container" style="top: 30%; left: 20%;" data-tooltip="Weingarten">
        <a class="hotspot" aria-label="Weingarten"></a>
    </div>
    <div class="hotspot-container" style="top: 30%; left: 35%;" data-tooltip="Gästehaus am Marktplatz">
        <a class="hotspot" aria-label="Gästehaus am Marktplatz"></a>
    </div>
</div>

css:

CSS:

.image-container-map a {
    animation: pulsate 2.5s ease-out;
    animation-iteration-count: infinite;
}

@keyframes pulsate {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

.hotspot-container {
    position: absolute;
}

.hotspot-container:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    width: 120px;
    background-color: #E4E4E6;
    z-index: 9999;
}

.hotspot {
    width: 25px;
    height: 25px;
    display: block;
    border-radius: 50%;
    background-color: #45575A;
}

Spawnsplitter · 21 April 2023

AndreasB schrieb:

Aber man kann den Tooltip doch auch an den Hotspot Container hängen.

Ich habe mal die Lösung, die ich meinte skizziert:

html:

HTML:

<div class="image-container-map">
    <div class="hotspot-container" style="top: 30%; left: 20%;" data-tooltip="Weingarten">
        <a class="hotspot" aria-label="Weingarten"></a>
    </div>
    <div class="hotspot-container" style="top: 30%; left: 35%;" data-tooltip="Gästehaus am Marktplatz">
        <a class="hotspot" aria-label="Gästehaus am Marktplatz"></a>
    </div>
</div>

css:

CSS:

.image-container-map a {
    animation: pulsate 2.5s ease-out;
    animation-iteration-count: infinite;
}

@keyframes pulsate {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

.hotspot-container {
    position: absolute;
}

.hotspot-container:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    width: 120px;
    background-color: #E4E4E6;
    z-index: 9999;
}

.hotspot {
    width: 25px;
    height: 25px;
    display: block;
    border-radius: 50%;
    background-color: #45575A;
}

Ja normalerweise schon, das ist ja auch das was ich mir dachte. Aber leider funktioniert es so nicht. Die Hotspots sind dann komplett zerschossen und werden nicht mehr angezeigt

Spawnsplitter · 21 April 2023

Oliver77 schrieb:
Hallo, hab mal was kleines in Javascript gebaut, womit der Tool-Tip wie gewünscht funktioniert:
https://codepen.io/Oliver7777/pen/YzJpvMR

Was ich hier mega mega faszinierend finde, ist das es eigentlich auch funktionieren müsste, so wie es der pen ja auch darstellt, jedoch sobald ich das skript einbaue, funktioniert es wieder nicht mehr sondern stellt nur einen kleinen text-container unterhalb des image dar.

Hier auch mal der Link zu meiner Seite vllt könnt ihr euch dann es besser vorstellen was ich meine. https://kr-wp.bejoynt.de/zeltinger/zeltingerHof.html

Oliver77 · 21 April 2023

Hast du das drin?

CSS:

#toolTipId {
    position: absolute;
     background-color: #E4E4E6;
    border-radius: 5px;
    text-align: center;
    z-index: 9999;
    text-transform: uppercase;
    font-weight: 900;
    font-family: "Effra Regular";
    background:#E4E4E6;
    padding: 20px;
}

Spawnsplitter · 21 April 2023

Ja ist drinne

Oliver77 · 21 April 2023

Und geht nicht? komisch...

Spawnsplitter · 21 April 2023

Ja eben, das wundert mich ja auch so sehr.

Oliver77 · 21 April 2023

Wie hast du denn das Script eingebunden? Vor dem schließenden body tag?

AndreasB · 21 April 2023

Spawnsplitter schrieb:
Die Hotspots sind dann komplett zerschossen und werden nicht mehr angezeigt

Bei mir sieht diese reine CSS Lösung dann so aus:

Wie sieht es denn bei dir aus?

PS:
Auf der Seite, die du verlinkt hast, fehlt der style den Oliver77in #10 erwäht.

Oliver77 · 21 April 2023

AndreasB schrieb:
Auf der Seite, die du verlinkt hast, fehlt der style den Oliver77in #10 erwäht.

Ja im Quelltext sehe ich das Javascript, aber im CSS nicht "#toolTipId".
Hab's mal im Browser getestet es geht, wenn du das

CSS:

#toolTipId {
    position: absolute;
     background-color: #E4E4E6;
    border-radius: 5px;
    text-align: center;
    z-index: 9999;
    text-transform: uppercase;
    font-weight: 900;
    font-family: "Effra Regular";
    background:#E4E4E6;
    padding: 20px;
}

einfügst!

Tooltip mit CSS gestalten

Spawnsplitter

Mitglied

AndreasB

Mitglied

Spawnsplitter

Mitglied

AndreasB

Mitglied

Spawnsplitter

Mitglied

Oliver77

Mitglied

AndreasB

Mitglied

Spawnsplitter

Mitglied

Spawnsplitter

Mitglied

Oliver77

Mitglied

Spawnsplitter

Mitglied

Oliver77

Mitglied

Spawnsplitter

Mitglied

Oliver77

Mitglied

AndreasB

Mitglied

Oliver77

Mitglied

Neueste Beiträge