Comment ouvrir une fenêtre pop-over sur la souris, cliquez sur emplacement

J'ai chargé une image sur ma page HTML et je voudrais ouvrir une liste de Twitter Bootstrap droit sur la souris, cliquez sur position.
Ce que j'ai fait jusqu'à présent est d'ouvrir la liste sur le côté de l'image. Mais ce que je veux vraiment faire est d'ouvrir la fenêtre pop-over, où j'ai cliqué sur l'image.

Comment puis-je y parvenir?

  • Qu'avez-vous essayé jusqu'à présent? tout exemple de code aideront les autres à répondre à votre problème.
InformationsquelleAutor Felipe Mosso | 2013-02-20
  1. 19

    Vous avez besoin pour obtenir les coordonnées de la souris et faire de votre script à utiliser pour positionner la fenêtre pop-over sur cliquez sur. Si vous êtes à l'aide de jQuery, ce qui pourrait aider:

    $('#yourimage').click(function(){
      $('#popover').css('left', pageX-(popover width)+'px');
      $('#popover').css('top', pageY-(popover height)+'px');
})

    ---EDIT---

    Voici une démo de ce que vous êtes après.

    • Aussi, vous devez définir position:absolute à votre #popover.
    • position:absolute est déjà dans le fichier css de bootstrap et n'a pas besoin d'être mis à nouveau dans les nouveaux styles comme la position des éléments de la réinitialisation de ceux mentionnés dans la plus tard
    • Je n'ai pas eu une image de votre CSS, donc j'étais juste assurez-vous correctement.
    • Je suis en train de faire ce que vous avez dit, mais la liste de la position ne change pas. Je l'ai ajouté dans mon fichier js: $('.ImgMapa').cliquez sur(function(){ $('.liste').css('left', '275px'); $('.liste').css('top', '275px'); $('.ImgMapa').liste('show'); }); j'ai utilisé 275px juste pour le test.. mais ça ne fonctionne pas. Où puis-je tort?
    • pouvez-vous s'il vous plaît poster connexes, le CSS et le HTML de la partie afin que je vous faire une démo? Au premier coup d'oeil, $('.ImgMapa').popover('show'); ce n'est pas une fonction valide. Il doit être: $('.popover').show();
    • Bien sûr, il y nous allons avec la solution que j'ai trouvé: jsfiddle.net/HhpnN
    • Jetez un oeil à ma réponse de modifier et laissez-moi savoir.
    • Il fonctionne parfaitement!!! Merci! 🙂
    • Est-il possible de la position de la liste dynamiquement? par exemple. Dans votre violon si vous cliquez sur le droit de la plupart de la partie, la liste est coupée, dans ce cas, est-il possible d'afficher la liste vers la gauche?? (Est-il possible de faire ce genre de fonctionnalité automatiquement)
    • Est-ce que vous êtes après? jsfiddle.net/otinanaipali/25vrh5bu/2
    • Ouais, très proche! Est-il possible de le faire parfaitement, autres que l'aide de PopperJS plugin?
    • Ayant à l'esprit l'instruction conditionnelle if (stageWidth - left < theWidth) vous pouvez ajuster les règles dans tous les cas de positionnement comme lors du défilement, lorsque la hauteur ne correspond pas à la fenêtre, etc. La logique est assez simple. L'essayer...
    • Oh ok. Merci pour le heads up! @otinanai 🙂
    • Est-il possible de faire apparaître ci-dessous/dans le bas de la souris?
    • Oui, il est. Cochez cette démo: jsfiddle.net/2EBGE/239 . Il vous suffit d'éditer le script js (en gras) et ajuster la position du curseur: $('.liste').css('left', (gauche+20) + 'px'); $('.liste').css('top', (haut+10) + 'px');
    • De se! Merci!!!!

    InformationsquelleAutor otinanai
  2. -3

    Essayer sur l'écriture de l' .liste de classe en utilisant les coordonnées de votre choix

    .popover {
top: 20px !important;/*put your position */
left: 20px !important;/*put your position*/
}

    Juste la réinitialisation de la position des éléments gardera tous les autres styles intacte dans les principaux bootstrap.css.

    • Ouais, mais comment puis-je le faire en fonction de la souris, cliquez sur position? Je dois mettre ce code dans un .fichier js
    • Vous devez mettre ce code dans le fichier css.
    InformationsquelleAutor Shail