Popisek title v CSS

Příklad 1.

Zde se, ale objeví i původní htlm popisek.

Tento text má atribut title.

   <style>
    span[title] {position: relative; border-bottom: 3px dotted red; cursor: help}   
    span[title]:hover:after {border: 8px solid lime; color: black; border-radius: .2em; background: #00cc00; content: attr(title); position: absolute; top: -2em; left: 0; padding: 0 .2em; width: 8em}   
  </style>  
  
    <span title="Nějaký text">text</span> má atribut <code>title</code>.
    

Příklad 2

Pomocí vlastního title bez původního htlm popisku.

Tento text má atribut vlastni-title.

    <style>
    span[vlastni-title] {position: relative; border-bottom: 3px dotted red; cursor: help}
    span[vlastni-title]:hover:after {border: 8px solid #33ffff; color: black; border-radius: .8em; background: #6699ff; content: attr(vlastni-title); position: absolute; top: -2em; left: 0; padding: 0 .2em; width: 8em}
    </style> 
    
     <p style="color:#66ff00">Tento <span vlastni-title="Nějaký text">text</span> má atribut <code>vlastni-title</code>.</p>
  
      

Příklad 3

Po najetí se objeví co tu chceš.

    <style> 
    .po-najeti span1 {display: none; background: #fff; color: #000}
    .po-najeti:hover span1 {display: inline}
   </style> 
    
    <span class="po-najeti"> Po najetí se objeví <span1> co tu chceš</span1> . </span> 
    

Příklad 4

     <style>
.najeti {position: relative}
.popisek {position: absolute; color:red; left: 50%; top: 100%; display: none; margin-left: -125px; width: 250px; border: 1px solid #666; padding: 10px; background: #fff; z-index: 100; box-shadow: rgba(0, 0, 0, 0.298) 0px 3px 8px 0px; transition: opacity .5s; -webkit-transition: opacity .5s; opacity: 0}
.najeti:hover .popisek {display: block; opacity: 1}
.popisek .sipka, .popisek .sipka-obal {position: absolute; top: -10px; left: 50%; margin-left: -5px; width: 0px; height: 0px; border: solid transparent; border-width: 0 10px 10px 10px; border-bottom-color: #000}
.popisek .sipka-obal {border-bottom-color: #fff; margin: 1px 0 0 -4px; border-width: 0 9px 9px 9px}
</style>

  <div class="najeti">
    <p>Popisek se objeví po najetí. Tooltip je absolutně posicovaný a centrován následovně, stín je vytvořen CSS vlastností <code>box-shadow</code> a šipka je nakreslená v CSS.</p>
    <div class="popisek">
		<span class="sipka"></span><span class="sipka-obal"></span>
        <p>Popisek
	</p></div>
  </div>