简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Warum funktioniert der Tooltip nach dem Entfernen des Links immer noch?
P粉323050780
P粉323050780 2024-04-05 09:51:08
0
1
1498

Nur wenn ich den Link entferne, kann ich den div-Tag mit dem Tooltip sehen. Wie hängen die beiden zusammen? Der Div-Inhalt erscheint nicht mit dem Link. 

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  border-radius: 6px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

div#tdemo1 {
  animation-name: animate;
  animation-duration: 3s;
  width: 100px;
  height: 100px;
  background-color: red;
}

@keyframes animate {
  0% {
    background-color: red;
  }
  33% {
    background-color: yellow;
  }
  66% {
    background-color: blue;
  }
  99% {
    background-color: white;
  }
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">

<body style="background-image:linear-gradient(180deg,blue,violet);">

  <div id="tdemo1" class="tooltip">Hover over me
    <span class="tooltiptext">Tooltip text</span>
  </div>
  <div id="bdemo1" class="container">
    <h1>types of buttons in bootstrap:</h1>

    <button type="button" class="btn btn-outline-primary">Primary</button>
    <button type="button" class="btn btn-outline-secondary">Secondary</button>
    <button type="button" class="btn btn-outline-success">Success</button>
    <button type="button" class="btn btn-outline-info">Info</button>
    <button type="button" class="btn btn-outline-warning">Warning</button>
    <button type="button" class="btn btn-outline-danger">Danger</button>
    <button type="button" class="btn btn-outline-dark">Dark</button>
    <button type="button" class="btn btn-outline-light text-dark">Light</button>

  </div>

Ich habe versucht, einen Tooltip mit einem div-Tag zu verwenden und Bootstrap zu verwenden, um die Schaltfläche anzuzeigen. Es scheint jeweils nur einer von ihnen korrekt zu sein.

P粉323050780
P粉323050780

Antworte allen(1)
P粉511757848
P粉5117578482024-04-06 09:20:52 1 Etage

您需要更改 .tooltip 元素的类，因为 bootstrap 将其识别为 bootstrap 元素并重写其自己的值它。

.tooltipp {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltipp .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  border-radius: 6px;
}

.tooltipp:hover .tooltiptext {
  visibility: visible;
}

div#tdemo1 {
  animation-name: animate;
  animation-duration: 3s;
  width: 100px;
  height: 100px;
  background-color: red;
}

@keyframes animate {
  0% {
    background-color: red;
  }
  33% {
    background-color: yellow;
  }
  66% {
    background-color: blue;
  }
  99% {
    background-color: white;
  }
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">

<body style="background-image:linear-gradient(180deg,blue,violet);">

  <div id="tdemo1" class="tooltipp">Hover over me
    <span class="tooltiptext">Tooltip text</span>
  </div>
  <div id="bdemo1" class="container">
    <h1>types of buttons in bootstrap:</h1>

    <button type="button" class="btn btn-outline-primary">Primary</button>
    <button type="button" class="btn btn-outline-secondary">Secondary</button>
    <button type="button" class="btn btn-outline-success">Success</button>
    <button type="button" class="btn btn-outline-info">Info</button>
    <button type="button" class="btn btn-outline-warning">Warning</button>
    <button type="button" class="btn btn-outline-danger">Danger</button>
    <button type="button" class="btn btn-outline-dark">Dark</button>
    <button type="button" class="btn btn-outline-light text-dark">Light</button>

  </div>
Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！