Reine CSS-Implementierung (kein Skript) Tooltip-Textaufforderungseffekt im HTML-Befehlsstil

<button tooltip='Ich bin eine Content-Ente' effect='light' placement='top-left'>Oben links</button>

<div Klasse="Container">
  <div Klasse="oben">
    <button tooltip="Oben" placement="oben links" effect="hell">Oben links</button>
    <button tooltip="Oben Links Oben Links" placement="top">Oben</button>
    <button tooltip="Oben rechts" placement="oben rechts">Oben rechts</button>
  </div>
  <div Klasse="links">
    <button tooltip="Oben links oben links oben links oben links oben links oben links oben links oben links oben links" placement="left-top">Oben links</button>
    <button tooltip="Links" placement="links" effect="light">Links</button>
    <button tooltip="Links-rechts" placement="links-unten">Unten links</button>
  </div>
  <div Klasse="rechts">
    <button tooltip="Oben rechts oben rechts oben rechts oben rechts oben rechts oben rechts oben rechts oben rechts" placement="right-top">Oben rechts</button>
    <button tooltip="Rechts" placement="rechts" effect="light">Rechts</button>
    <button tooltip="Unten rechts" placement="right-bottom">Unten rechts</button>
  </div>
  <div Klasse="unten">
    <button tooltip="Unten links" placement="unten links">Unten links</button>
    <button tooltip="unten" placement="unten" effect="licht">Unten</button>
    <button tooltip="Unten rechts" placement="unten rechts">Unten rechts</button>
  </div>
</div>

/* Stimmt mit Elementen mit einem Tooltip-Attribut überein */
[Tooltip]
  Position: relativ;
  /* Standard-Blasenstil */
  &::nach {
    Anzeige: keine;
    Inhalt: Attr (Tooltip);
  }
  /* Dreieck-Standardstil*/
  &::vor {
    Anzeige: keine;
    Inhalt: '';
  }
  /* Bewegen Sie die Maus in dieses Element, um Blasen und Dreiecke anzuzeigen*/
  &:schweben {
    &::nach {
      Anzeige: Block;
    }
    &::vor {
      Anzeige: Block;
    }
  }
}

/* Standard-Blasenstil */
&::nach {
  Anzeige: Block;
  Inhalt: Attr (Tooltip);
}

/* Dreieck-Standardstil*/
&::vor {
  Anzeige: Block;
  Inhalt: '';
}

/* Standard-Blasenstil */
&::nach {
  Anzeige: Block;
  Inhalt: Attr (Tooltip);
  Position: absolut;
  Leerzeichen: Nowrap;
  Überlauf: versteckt;
  Textüberlauf: Auslassungspunkte;
  Polsterung: 8px 15px;
  maximale Breite: 200px;
  Rahmenradius: 4px;
  Kastenschatten: 0 10px 20px -5px rgba (0, 0, 0, 0,4);
  Z-Index: 100;
  @extend .tooltip-theme-dark; /* Standarddesign übernehmen (schwarzer Hintergrund und weißer Text) */
 }

/* Dreieck-Standardstil*/
&::vor {
  Anzeige: Block;
  Inhalt: '';
  Position: absolut;
  Rand: 5px durchgehend transparent;
  Z-Index: 100;
  @extend .triangle-theme-dark; /* Standarddesign übernehmen (schwarzer Hintergrund) */
}

$weiß: #fff;
$schwarz: #313131;

/* Blasenthema */
.tooltip-theme-dunkel {
  Farbe: $weiß;
  Hintergrundfarbe: $schwarz;
}

.tooltip-theme-light {
  Farbe: $schwarz;
  Hintergrundfarbe: $weiß;
  Rand: 1px durchgezogen $schwarz;
}

/* Dreiecksthema*/
.dreieck-thema-dunkel {
  Rahmenoberseitefarbe: $schwarz;
}

.dreieck-thema-licht {
  border-top-color: $black; /* Im Moment dasselbe wie dunkel*/
}

/* Blasenposition */

/*----Vorgesetzter----*/
.tooltip-placement-top {
  unten: berechnet (100 % + 10 Pixel);
  links: 50%;
  transformieren: übersetzen(-50 %, 0);
}

.tooltip-placement-top-right {
  unten: berechnet (100 % + 10 Pixel);
  links: 100 %;
  transformieren: übersetzen(-100%, 0)
}

.tooltip-placement-top-left {
  unten: berechnet (100 % + 10 Pixel);
  links: 0;
  transformieren: übersetzen(0, 0)
}

/* Dreiecksposition */

/*----Vorgesetzter----*/
.dreieck-platzierung-oben {
  unten: berechnet (100 % + 5 Pixel);
  links: 50%;
  transformieren: übersetzen(-50 %, 0);
}

.dreieck-platzierung-oben-links {
  unten: berechnet (100 % + 5 Pixel);
  links: 10px;
}

.dreieck-platzierung-oben-rechts {
  unten: berechnet (100 % + 5 Pixel);
  rechts: 10px;
}

&[Effekt="Licht"] {
  &::nach {
    @erweitern .tooltip-theme-light;
  }

  &::vor {
    @erweitern .triangle-theme-light;
  }
}

@each $placement oben, oben rechts, oben links,
rechts, rechts oben, rechts unten,
unten, unten rechts, unten links,
links, links-oben, links-unten {
  &[Platzierung="#{$placement}"] {
    &::nach {
      @extend .tooltip-placement-#{$placement};
    }

    &::vor {
      @extend .triangle-placement-#{$placement};
    }
  }
}

&:nicht([Platzierung]),
&[Platzierung=""] {
  &::nach {
    @erweitern .tooltip-placement-top;
  }

  &::vor {
    @erweitern .triangle-placement-top;
  }
}

@keyframes anime-top {
  aus {
    Deckkraft: .5;
    unten: 150 %;
  }
}

@keyframes anime-bottom {
  aus {
    Deckkraft: .5;
    oben: 150 %;
  }
}

@keyframes anime-links {
  aus {
    Deckkraft: .5;
    rechts: 150%;
  }
}

@keyframes anime-rechts {
  aus {
    Deckkraft: .5;
    links: 150 %;
  }
}

/* Animation einrichten */
@each $placement oben,
 Rechts,
unten,
links
  &[Platzierung^="#{$placement}"] {

    &::nach,
    &::vor {
      Animation: Anime-#{$placement} 300 ms Vorwärts-Auslaufen;
    }
  }
}