Spécifiez l'emplacement de l'info-bulle lors du survol d'un élément

Quand je souris sur div.divClass, le texte d'info-bulle s'affiche.

Comment puis-je y parvenir?

CSS:

.divClass {
  width: 200px;
  height: 200px;
  border: 1px solid
}

HTML:

<div class="divClass">
  <a href="#" title="Tooltip text"> test </a>
</div>

MODIFIER

En fait, je veux afficher les info-bulle en haut de l'élément d'ANCRAGE lorsque la souris sur div. Si j'ai ajouter un titre dans la Div qui signifie que je suis l'obtention de problème d'alignement.

InformationsquelleAutor Developer_29 | 2016-07-25
  1. 7

    La title attribut ne peut pas forcer une info-bulle s'affiche dans une position déterminée, indépendamment de l'endroit où le décollage se produit. Ce n'est pas normalement, la façon dont l'info-bulle des œuvres. Cependant, voici une méthode qui peut fonctionner pour vous.

    CSS:

    .divClass {
  width: 200px;
  height: 200px;
  border: 1px solid;
  position: relative;
  margin: 30px;
  cursor: pointer;
}

span { display: none; }

.divClass:hover > span {
  display: inline-block;
  position: absolute;
  top: -25px;
  left: 0;
  border: 2px solid red;
  background-color: yellow;
}

    HTML:

    <div class="divClass">
  <a href="#"  title="Tooltip text"> test </a>
  <span>Tooltip text</span>
</div>

    jsFiddle

    Références:

    InformationsquelleAutor Michael_B