Agregar tooltips anychart a tus enlaces, aplicable a blogger wordpress

poner enlaces es bueno pero con una descripcion flotante aun mas ya que provees informacion descriptiva y personalizada de este

bueno la forma de aplicarlo es agregando una clase al enlace y con css y un bloque span manipularlode tal forma que al pasar el raton se muestre el bloque span
 lo priimero clreamos la clase en est e caso tooltip
asemos una referencia al bloque span desde el css   con el metodo hover aremos visible el bloque span
para lograr  que este bloque span se aline al pasar el raton, y flote  le agregamos una posicion absoluta y display inline
 codigo iria asi:

el bloque span debe estar fuera de pantalla si no se pasado el raton soble el enlace
A.tooltip SPAN {
  border-radius: 5px;
  BORDER-BOTTOM: #053138 1px solid;
  POSITION: absolute;
  overflow: hidden;
  BORDER-LEFT: #053138 1px solid;
  PADDING-BOTTOM: 5px;
  background: rgba(255,255,255,0.9) ;
  MARGIN: 0px 0px 0px 0px; PADDING-LEFT: 5px; WIDTH: 200px; PADDING-RIGHT: 5px; DISPLAY: none; COLOR: black;
  BORDER-TOP: #053138 1px solid; FONT-WEIGHT: normal; BORDER-RIGHT: #053138 1px solid; PADDING-TOP: 5px
}

cuando pasemos el raton por el enlace
es cuando debe mostrarse el bloque span con display: inline
A.tooltip:hover SPAN {
 DISPLAY: inline
}

aora para el enlace agregamos dentro y junto con el texto la etiqueta span y entre esta la descripcion del enlace

<a  class="tooltip" href="#"> enlace <span>descripcion del enlace</span></a>

mira el ejemplo corriendo abajo

acontinuacion el codigo css:

<style> A.tooltip SPAN { border-radius: 5px; BORDER-BOTTOM: #053138 1px solid; POSITION: absolute; overflow: hidden; BORDER-LEFT: #053138 1px solid; PADDING-BOTTOM: 5px; background: rgba(255,255,255,0.9) ; MARGIN: 0px 0px 0px 0px; PADDING-LEFT: 5px; WIDTH: 200px; PADDING-RIGHT: 5px; DISPLAY: none; COLOR: black; BORDER-TOP: #053138 1px solid; FONT-WEIGHT: normal; BORDER-RIGHT: #053138 1px solid; PADDING-TOP: 5px } A.tooltip:hover SPAN { DISPLAY: inline } </style>

aqui les dejamos un demo del codigo corriendo
kpop noticias sitio de noticias kpop y fanfics y mucho mas








....