Info-bulle utilisant Prototype.js

Question

Il semble si difficile de trouver une info-bulle facile à utiliser pour la bibliothèque Prototype. Ceux qui sont là-bas sont tellement gonflés. Ce que je cherche est quelque chose d'aussi simple que cela.

<a class="tooltip">This is my sentence<span>Tooltip is here</span> that ends in sorrow.</a> <a class="tooltip">How can I make this happen <span>like how?</span> without killing people.</a> 

J'ai une solution CSS mais le problème est une fois l'info-bulle est près du bord du navigateur, il va du bord. Je l'aime pour être intelligent et ne pas aller au large de la fenêtre du navigateur.

De toute façon? Je pensais utiliser Prototype pour trouver les coordonnées x-y de pop-up et le déplacer. Mais comment le faire?

C'est ce que je suis en utilisant CSS

.date_info a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/ 
.date_info a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:200px;} 
.date_info a.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #555; color:#6c6c6c;} 

Answer 1

Il y a un bon projet de infobulle de prototype appelé prototip2, avez-vous vérifié cela? Même si vous ne finissez pas par l'utiliser, il peut être utile de creuser un peu dans le code pour avoir des idées, ou est-ce l'un de ceux dont vous avez parlé? Si cela vous aide, voici un extrait du prototype js que j'ai mis en place qui détecte si un élément est dans la fenêtre d'affichage ou non ce qui pourrait vous aider à démarrer si vous n'êtes pas satisfait de l'autre solution.

function withinViewport(el) { 
    var elOffset = $(el).cumulativeOffset(el); 
    vpOffset = document.viewport.getScrollOffsets(); 
    elDim = $(el).getDimensions(); 
    vpDim = document.viewport.getDimensions(); 
    if (elOffset[1] + elDim.height < vpOffset[1] || elOffset[1] > vpOffset[1] + vpDim.height || 
     elOffset[0] + elDim.width < vpOffset[0] || elOffset[0] > vpOffset[0] + vpDim.width) { 
     return false; 
    } 
    return true; 
} 

vous pouvez utiliser ce quelque chose comme:

if(!withinViewport($(el)){ 
    // move me - add padding/margin or something like that 
} 

Answer 2

CoolTips semble jusqu'à votre allée.

Answer 3

Vous pouvez affiner ci-dessous liens comme de bonnes ressources pour les infobulles Prototype:

1] Prototip

2] Prototip2

3] Cooltips

Ce sont trois ressources que j'ai trouvé très intéressant et utile.

Answer 4

Je ne l'ai pas encore vérifié. Je pense que vous pouvez utiliser Opentip qui est un cadre de pointe d'outil. Vous pouvez en choisir un pour votre cadre. Il est là pour le prototype aussi. Si vous n'êtes pas destiné à supporter IE8, vous n'avez pas besoin d'utiliser le fichier -excanvas. Si vous n'êtes pas destiné à déboguer, vous serez un utilisateur heureux avec 'min.js'