search

Home  >  Q&A  >  body text

Why does the tooltip still work after removing the link?

Only when I remove the link I can see the div tag with the tooltip. How are the two related? The div content does not appear with the 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>

I tried using a tooltip with a div tag and using bootstrap to show the button. Only one of them appears correct at a time.

P粉323050780P粉323050780233 days ago1517

reply all(1)I'll reply

  • P粉511757848

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

    You need to change the class of the .tooltip element because bootstrap recognizes it as a bootstrap element and overrides its own value for it. 

    .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>

    reply
    0
  • Cancelreply