Estoy desarrollando un "plugin tooltip" gratuito en jQuery
que subiré a GitHub
para cualquier persona que quiera pueda usarlo, y todo estaba funcionando muy bien.
El problema es que, cuando traté de probar la "información sobre un elemento (tooltip)" en una imagen usando la etiqueta <img>
, no funciona.
Incluso traté de usar "clientWidth
", porque todo el mundo dice que el tamaño de una imagen se define después de que la página se haya cargado completamente, de lo contrario se devolverá 0
.
$('.elementoImg').width($(this)[0].clientWidth);
// No funciona
Pero el "elemento tooltip" se crea en el DOM, simplemente no funciona o no se muestra en la pantalla cuando hago hover
.
Aquí está el código que tengo hasta ahora:
$(".infoTie").mousemove(function ( event ) {
var iTiePageCoords = "( " + event.pageX + ", " + event.pageY + " )";
var $infotieData = $(".infoTie-data");
//set the actuall width
var $iTie_Pos_top = event.pageY;
var $iTie_Pos_left = event.pageX - 60;
var $iTie_Data_width = $("body").width() - $infotieData.width();
var $dataArrow = $(".infoTie-data-arrow");
//check if left not minus
if (event.pageY > 60) {
$iTie_Pos_top = $iTie_Pos_top - 55;
jQuery(this).find($dataArrow).addClass("infoTie-data-arrow-top infotie-dr-top").removeClass("infoTie-data-arrow");
} else {
$iTie_Pos_top = $iTie_Pos_top + 15;
jQuery(this).find(".infoTie-data-arrow-top").addClass("infoTie-data-arrow").removeClass("infoTie-data-arrow-top infotie-dr-top");
}
if ($iTie_Pos_left < 0) {
$iTie_Pos_left = 10;
jQuery(this).find($dataArrow).addClass("infotie-dr-left");
} else if ($iTie_Pos_left > $iTie_Data_width) {
$iTie_Pos_left = $iTie_Data_width - 25;
jQuery(this).find($dataArrow).addClass("infotie-dr-right");
} else {
//fix for now, too lazy and too late for this shit
$infotieData.css("margin-left", "-25px");
}
$infotieData.css("top", $iTie_Pos_top + "px");
$infotieData.css("left", $iTie_Pos_left + "px");
});
$(".infoTie").hover(
function () {
$(this).append("<div class='infoTie-data'>" + $(this).attr("data-infoTie") + "<div class='infoTie-data-arrow'></div></div>");
},
function () {
$(".infoTie-data").remove();
}
);
.infoTie {display:inline-block;}
.bgimg{
background-image:url(https://lorempixel.com/400/200/sports/1);
height:200px;
width:200px;
}
.infoTie-data {
width : auto;
height : auto;
font-family: sans-serif;
font-size: 13px;
font-weight:normal;
padding:7px 10px;
border-radius : 3px;
background-color : #1a1a1a;
color:#fff;
position: absolute;
pointer-events: none;
opacity:0;
white-space: nowrap;
margin-top:8px;
}
.infoTie:hover .infoTie-data {
opacity:1;
}
.infoTie-data-arrow {
content: "";
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 8px solid #1a1a1a;
position: absolute;
top: -8px;
left: 50%;
margin-left:-10px;
}
.infoTie-data-arrow-top {
content: "";
border-top: 8px solid #1a1a1a;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
position: absolute;
bottom: -8px;
left: 50%;
margin-left:-10px;
}
.infotie-dr-top {
margin-left:-10px;
bottom: -8px;
left: 50%;
}
.infotie-dr-left {
top: -8px;
left: initial;
margin-left:initial;
}
.infotie-dr-right {
top: -8px;
left: initial;
right: 10px;
margin-left:initial;
}
/* If tooltip's on top */
.infoTie-data-arrow-top.infotie-dr-top.infotie-dr-left {
top: initial;
bottom: -8px;
left: initial;
margin-left:initial;
}
.infoTie-data-arrow-top.infotie-dr-top.infotie-dr-right {
top: initial;
bottom: -8px;
left: initial;
right: 10px;
margin-left:initial;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div class="infoTie" data-infoTie="Mouse encima del texto.">Pasar el mouse encima de este texto</div>
<h3>En la etiqueta "img" con la pequeña imagen abajo, no pasa nada.......</h3>
<img class="midImage infoTie" data-infoTie="Click drag to draw the area" src="https://lorempixel.com/400/200/sports/1" width="100" height="50"/>
<h3>El siguiente con la imagen de fondo funciona bien</h3>
<div class="bgimg infoTie" data-infoTie="Esta es una imagen background de Béisbol"></div>