Ho caricato un'immagine nella mia pagina HTML e vorrei aprire un popover da Twitter Bootstrap proprio sopra la posizione del clic del mouse. Quello che ho fatto finora è aprire il popover sul lato dell'immagine. Ma quello che voglio davvero è aprire il popover ovunque io abbia cliccato sull'immagine.Come aprire un popover nella posizione del clic del mouse
Come posso ottenere questo risultato?
È necessario ottenere le coordinate del mouse e utilizzare il proprio script per posizionare il popover al clic. Se stai usando jQuery questo potrebbe aiutare:
$('#yourimage').click(function(){
$('#popover').css('left', pageX-(popover width)+'px');
$('#popover').css('top', pageY-(popover height)+'px');
})
--- EDIT ---
Here's a demo di quello che stai cercando.
Inoltre, devi impostare 'position: absolute' sul tuo' # popover'. – otinanai
position: absolute è già impostato nel file css bootstrap principale e non è necessario reimpostarlo nei nuovi stili, in quanto gli elementi di posizione resetteranno solo quelli menzionati negli ultimi – Shail
Non avevo una foto del tuo CSS quindi ero solo assicurandoti di averlo impostato correttamente. – otinanai
Prova sopra la scrittura della classe .popover utilizzando le coordinate della vostra scelta
.popover {
top: 20px !important;/*put your position */
left: 20px !important;/*put your position*/
}
Proprio il ripristino degli elementi di posizione manterrà intatta nel bootstrap.css principale tutti gli altri stili.
Sì, ma come posso farlo in base alla posizione del clic del mouse? Dovrei inserire questo codice in un file .js –
Devi inserire questo codice nel file css. – Shail
Cosa hai provato finora? qualsiasi codice di esempio aiuterà gli altri a rispondere al tuo problema. – shabeer90