Styles für die Anzeige von data-title

edit | delete

Autor: Marc Haunschild

eingetragen: Dienstag, 17. Januar 2012 um 11:54 Uhr (3/2012 Kalenderwoche)

geändert: Montag, 09. Juli 2012 um 14:51 Uhr (28/2012 Kalenderwoche)

Keywords: Layout Linkbeschreibung title titel

Kategorien: Browser, CSS, HTML,

Text:

Styles für die Anzeige von data-title, eine Art von html-title-Tag


Version 1:
Glücklich Einkaufen


Version 2:
Das ist der Eltern-Text und ich bin das versteckte Kind.

Quellcode:   

<style type="text/css">
[data-title] {
    display: block;
    position: relative;
}
[data-title]:focus:before,
[data-title]:hover:before {
    content: attr(data-title);
    display:block;
    position: absolute;
    top: 1em;
    left: 2em;
    max-width: 17em;
    border: .0625em solid #333;
    padding: .25em;
    color:black;

  -webkit-border-radius: .125em; /* Saf3-4, iOS 1-3.2, Android <e;1.6 */
     -moz-border-radius: .125em; /* FF1-3.6 */
          border-radius: .125em; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

  /* useful if you don't want a bg color from leaking outside the border: */
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;


  -webkit-box-shadow: 4px 4px 6px #aaa; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
     -moz-box-shadow: 4px 4px 6px #aaa; /* FF3.5 - 3.6 */
          box-shadow: 4px 4px 6px #aaa; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */



  background-color: #eeeeee;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#aaaaaa)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #eeeeee, #aaaaaa); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image:    -moz-linear-gradient(top, #eeeeee, #aaaaaa); /* FF3.6 */
  background-image:     -ms-linear-gradient(top, #eeeeee, #aaaaaa); /* IE10 */
  background-image:      -o-linear-gradient(top, #eeeeee, #aaaaaa); /* Opera 11.10+ */
  background-image:         linear-gradient(top, #eeeeee, #aaaaaa);
} 
</style>

Beispiel für Version 1:
<a data-title="In neuem Fenster öffnen ..." target="_blank" href="http://shop.website-vdm.de">Glücklich Einkaufen</a>

######################################################

Version 2:

<style type="text/css">
.tooltip:hover {
    position:relative;
    z-index: 10;
    cursor: help;
    
}
.tooltip span {
    display: none;
}
.tooltip:focus span,
.tooltip:hover span {
    position: absolute;
    top: 1.25em;
    left: 0;
    display: block;
    min-width: 22em;
    max-width: 33em;
    max-height: 20em;
    overflow: auto;
    border: .125em outset #990000;
    padding: .25em;
    color:#333;
    z-index: 101;
  -webkit-border-radius: .25em; /* Saf3-4, iOS 1-3.2, Android <e;1.6 */
     -moz-border-radius: .25em; /* FF1-3.6 */
          border-radius: .25em; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */

  /* useful if you don't want a bg color from leaking outside the border: */
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;

  -webkit-box-shadow: 4px 4px 6px #aaa; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
     -moz-box-shadow: 4px 4px 6px #aaa; /* FF3.5 - 3.6 */
          box-shadow: 4px 4px 6px #aaa; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */

  background-color: #eeeeee;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#aaaaaa)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #f2f2f2, #cccccc); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image:    -moz-linear-gradient(top, #f2f2f2, #cccccc); /* FF3.6 */
  background-image:     -ms-linear-gradient(top, #f2f2f2, #cccccc); /* IE10 */
  background-image:      -o-linear-gradient(top, #f2f2f2, #cccccc); /* Opera 11.10+ */
  background-image:         linear-gradient(top, #f2f2f2, #cccccc);

/* CSS-Animation für weiches Einblenden - bei Nichtgefallen einfach auskommentieren oder löschen */
  -webkit-animation: myanim 0.3s; /* Saf5, Chrome */
     -moz-animation: myanim 0.3s; /* FF5+ */
      -ms-animation: myanim 0.3s; /* IE10pp3 */
}

@-webkit-keyframes myanim {
  0%   { opacity: 0.0; }
  50%  { opacity: 0.5; }
  100% { opacity: 1.0; }
}
@-moz-keyframes myanim {
  0%   { opacity: 0.0; }
  50%  { opacity: 0.5; }
  100% { opacity: 1.0; }
}
@-ms-keyframes myanim {
  0%   { opacity: 0.0; }
  50%  { opacity: 0.5; }
  100% { opacity: 1.0; }
}
</style>


Beispiel für Version 2:
<span class="tooltip">Das ist der Eltern-Text <span>und ich bin das versteckte Kind.</span></span>
######################################################