it-swarm.com.de

Tooltip mit HTML-Inhalten ohne JavaScript

Es gibt viele JavaScript-basierte Bibliotheken, in denen QuickInfos angezeigt werden, wenn Sie mit der Maus über einen bestimmten Bereich einer Webseite fahren. Einige sind eher schlicht, andere ermöglichen es dem Tooltip, mit CSS gestalteten HTML-Inhalt anzuzeigen.

Aber gibt es eine Möglichkeit, einen gestalteten Tooltip ohne Verwendung von JavaScript anzuzeigen? Wenn Sie nur das Attribut title verwenden, werden Tags nicht verarbeitet (z. B. foo<br />bar erzeugt keinen Zeilenumbruch). Ich suche nach einer Lösung, mit der man gestalteten HTML-Inhalt ohne Verwendung von JavaScript anzeigen kann.

54
gaetanm

Ich habe ein kleines Beispiel mit css gemacht

.hover {
  position: relative;
  top: 50px;
  left: 50px;
}

.tooltip {
  /* hide and position tooltip */
  top: -10px;
  background-color: black;
  color: white;
  border-radius: 5px;
  opacity: 0;
  position: absolute;
  -webkit-transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  -ms-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

.hover:hover .tooltip {
  /* display tooltip on hover */
  opacity: 1;
}
<div class="hover">hover
  <div class="tooltip">asdadasd
  </div>
</div>

[~ # ~] Geige [~ # ~]

http://jsfiddle.net/8gC3D/471/

68
koningdavid

Verwenden Sie das title Attribut:

<a href="#" title="Tooltip here">Link</a>
15
heytools

Ähnlich wie bei koningdavid, funktioniert jedoch auf dem Display: none und block, und fügt zusätzliches Styling hinzu.

div.tooltip {
  position: relative;
  /*  DO NOT include below two lines, as they were added so that the text that
        is hovered over is offset from top of page*/
  top: 10em;
  left: 10em;
  /* if want hover over icon instead of text based, uncomment below */
  /*    background-image: url("../images/info_tooltip.svg");
            /!* width and height of svg *!/
            width: 16px;
            height: 16px;*/
}


/* hide tooltip */

div.tooltip span {
  display: none;
}


/* show and style tooltip */

div.tooltip:hover span {
  /* show tooltip */
  display: block;
  /* position relative to container div.tooltip */
  position: absolute;
  bottom: 1em;
  /* prettify */
  padding: 0.5em;
  color: #000000;
  background: #ebf4fb;
  border: 0.1em solid #b7ddf2;
  /* round the corners */
  border-radius: 0.5em;
  /* prevent too wide tooltip */
  max-width: 10em;
}
<div class="tooltip">
  hover_over_me
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis purus dui. Sed at orci. </span>
</div>
7
Pawel

Dieser ist sehr interessant,

Nur HTML und CSS

.help-tip {
  position: absolute;
  top: 18px;
  left: 18px;
  text-align: center;
  background-color: #BCDBEA;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 14px;
  line-height: 26px;
  cursor: default;
}

.help-tip:before {
  content: '?';
  font-weight: bold;
  color: #fff;
}

.help-tip:hover span {
  display: block;
  transform-Origin: 100% 0%;
  -webkit-animation: fadeIn 0.3s ease-in-out;
  animation: fadeIn 0.3s ease-in-out;
}

.help-tip span {
  display: none;
  text-align: left;
  background-color: #1E2021;
  padding: 5px;
  width: 200px;
  position: absolute;
  border-radius: 3px;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
  left: -4px;
  color: #FFF;
  font-size: 13px;
  line-height: 1.4;
}

.help-tip span:before {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-bottom-color: #1E2021;
  left: 10px;
  top: -12px;
}

.help-tip span:after {
  width: 100%;
  height: 40px;
  content: '';
  position: absolute;
  top: -40px;
  left: 0;
}
<span class="help-tip">
        <span > This is the inline help tip! </span>
</span>
5
Charan Ghate

Reines CSS:

.app-tooltip {
  position: relative;
}

.app-tooltip:before {
  content: attr(data-title);
  background-color: rgba(97, 97, 97, 0.9);
  color: #fff;
  font-size: 12px;
  padding: 10px;
  position: absolute;
  bottom: -50px;
  opacity: 0;
  transition: all 0.4s ease;
  font-weight: 500;
  z-index: 2;
}

.app-tooltip:after {
  content: '';
  position: absolute;
  opacity: 0;
  left: 5px;
  bottom: -16px;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent rgba(97, 97, 97, 0.9) transparent;
  transition: all 0.4s ease;
}

.app-tooltip:hover:after,
.app-tooltip:hover:before {
  opacity: 1;
}
<div href="#" class="app-tooltip" data-title="Your message here"> Test here</div>
5
Marina

Sie können das title-Attribut verwenden, z. Wenn Sie einen Tooltip über einen Text haben möchten, machen Sie einfach:

<span title="This is a Tooltip">This is a text</span>
3
contradictioned

Ein anderer ähnlicher Weg, dies mit CSS zu tun:

#img {  }
#img:hover {visibility:hidden}
#thistext {font-size:22px;color:white }
#thistext:hover {color:black;}
#hoverme {width:50px;height:50px;}

#hoverme:hover { 
background-color:green;
position:absolute ;
left:300px;
top:100px;
width:40%;
height:20%;
}
<p id="hoverme"><img id="img" src="http://a.deviantart.net/avatars/l/o/lol-cat.jpg"></img><span id="thistext">LOCATZ!!!!</span></p>

Probieren Sie es aus: http://jsfiddle.net/FdBu7/

Und hier einige Links zu Übergängen und neuen Möglichkeiten: http://www.w3schools.com/css3/css3_transitions.asphttp://dev.opera.com/ articles/view/css3-show-and-hide /

3
NVRM

Das ist meine Lösung dafür:

https://Gist.github.com/BryanMoslo/808f7acb1dafcd049a1aebbeef8c2755

Das Element erhält ein "tooltip-title" -Attribut mit dem Tooltip-Text und wird beim Hover mit CSS angezeigt. Ich bevorzuge diese Lösung, da ich den Tooltip-Text nicht als HTML-Element einfügen muss!

0
Bryan Algutria