suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Warum funktioniert der Tooltip nach dem Entfernen des Links immer noch?

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粉323050780P粉323050780233 Tage vor1519

Antworte allen(1)Ich werde antworten

  • P粉511757848

    P粉5117578482024-04-06 09:20:52

    您需要更改 .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>

    Antwort
    0
  • StornierenAntwort