Klicken Sie auf, um zu zeigen, CSS tooltip

Ich bin neu in der Arbeit mit CSS und HTML habe ich versucht ein Werkzeug zu schaffen, Tipp mit CSS und HTML war Bisher erfolgreich. Aber die wollen jetzt wissen, wenn möglich, wie das tooltip nur Angezeigt, wenn darauf geklickt wurde. Und verschwinden, wenn der Benutzer erneut darauf klickt.
Unten ist der HTML-code, den ich verwendet habe.
Wenn jemand könnte vorschlagen, einige CSS, die es mir ermöglicht, zu erstellen, die das gewünschte Ergebnis ist, das wäre Super,

HTML

class='tooltips' style ='color:#585858; text-decoration:none;'> desktop-NG Informationen

Vielen Dank im Voraus

  • OP, bitte Bearbeiten Sie die Frage mit dem vollständigen code
  • Also was haben Sie zu klicken, damit es angezeigt wird? Sie können nicht klicken Sie auf den tooltip, wenn es nicht bereits vorhanden ist. Ich denke, dass Sie haben, javascript zu verwenden, für, die.
  • ich denke dieser link könnte Ihnen helfen, jsfiddle.net/GQE4k/1
  • .fadeToggle(); hätte viel mehr smart, da Sie bereits jQuery
  • Lesen Sie diesen Artikel tympanus.net/codrops/2012/12/17/css-click-events
  • Going off von @Rohit Batham ' s Antwort (nicht als Kommentar, da meine rep ist zu niedrig), wenn Sie wollen, um es als dauerhaften QuickInfo angezeigt, wenn Sie klicken, verwenden Sie die focus selector anstelle von active.

InformationsquelleAutor user3595416 | 2014-05-02
  1. 2

    HTML-Code

    <a href="#" title="Sample tooltip" class="tooltip">Link</a>

    CSS-Code

    .tooltip{display:inline;position:relative}
.tooltip:hover{text-decoration:none}

.tooltip:hover:after{
   background:#111;
   background:rgba(0,0,0,.8);
   border-radius:5px;
   bottom:18px;
   color:#fff;
   content:attr(title);
   display:block;
   left:50%;
   padding:5px 15px;
   position:absolute;
   white-space:nowrap;
   z-index:98
  }
.tooltip:hover:before{
    border:solid;
    border-color:#111 transparent;
    border-width:6px 6px 0 6px;
    bottom:12px;
    content:"";
    display:block;
    left:75%;
    position:absolute;
    z-index:99
   }

    Versuchen, diese richtig funktionieren, und onlcik event nicht unterstützt css.

    • "onlcik event nicht unterstützt css." ich glaube, du hast vergessen :active pseudo-Klasse 😉
    • Funktioniert gut, jsfiddle.net/Z7GM6
    • Wenn Sie möchten, verwenden Sie active: jsfiddle.net/Z7GM6/1 Sie haben zu halten Sie Ihre Maustaste auf das hyperlink
    • Ich habe versucht, Ihre Geige, aber der tooltip erscheint nur, wenn Sie auf den link klicken und dann verschwindet automatisch.. wie kann das behoben?
    InformationsquelleAutor Rohit
  2. 1

    Toggle tooltip können Sie die :checked pseudo-Klasse eine checkbox.

    CSS:

    .tooltip {
  position: relative;
  border-bottom: 1px dotted black;
}
.tooltip span {
  visibility: hidden;
  width: 10em;
  background-color: #000;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 9;
  top: -1em;
  left:  100%;
  margin-left:1em;
  opacity: 0;
  transition: opacity 1s;
}
.tooltip span::after {
  content: "";
  position: absolute;
  top: 1.5em;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}
.tooltip input {
  display:none;
}
.tooltip input:checked+span {
  visibility: visible;
  opacity: 1;
}

    HTML:

    <p>Hello <label class="tooltip">world<input type="checkbox"><span>and this is the tooltip text displayed on click.</span></label>! I am greeting you.<p>

    InformationsquelleAutor Mark
Schreibe einen Kommentar