2

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>

0

1 respuesta 1

2

El problema no es el tamaño de la imagen, las dimensiones del elemento las tomas en el evento mousemove así que la imagen debería estar cargada cuando el evento se dispare.

El problema es que estás intentando añadir el tooltip dentro de la imagen y los elementos img no admiten hijos (childNodes), al igual que otros elementos como los input o los link. Estos elementos no son per se contenedores, es por eso que se construyen con un tag que se auto-cierra (por ejemplo: <elemento/>) ya que no albergan a otros elementos dentro de sí, cosa que sí hacen los elementos que se construyen con un tag inicial que abre y uno final que cierra (por ejemplo: <elemento>...</elemento>).

Para resolver tu problema, como siempre habrá solamente un tooltip en el DOM, añádelo a un elemento que sea padre de todos tus elementos y todo te irá bien. Por ejemplo, el body:

$(".infoTie").hover(
    function () {
        $("body").append("<div class='infoTie-data'>" + $(this).attr("data-infoTie") + "<div class='infoTie-data-arrow'></div></div>");
    },
    ...

Aquí te dejo un snippet funcional que usa el body como contenedor de los tooltips:

$(".infoTie").mousemove(function(event) {

  var iTiePageCoords = "( " + event.pageX + ", " + event.pageY + " )";
  var $infotieData = $(".infoTie-data");

  //set the actuall width
  var $iTie_Pos_top = event.pageY + 10;
  var $iTie_Pos_left = event.pageX - $infotieData.outerWidth() / 2;
  var $dataArrow = $(this).find(".infoTie-data-arrow");

  //check if left not minus
  if (event.pageY > 60) {
    $dataArrow.addClass("infoTie-data-arrow-top infotie-dr-top").removeClass("infoTie-data-arrow");
  } else {
    $dataArrow.addClass("infoTie-data-arrow").removeClass("infoTie-data-arrow-top infotie-dr-top");
  }

  if ($iTie_Pos_left < 0) {
    $dataArrow.addClass("infotie-dr-left");
  } else {
    $dataArrow.addClass("infotie-dr-right");
  }

  $infotieData.css("top", $iTie_Pos_top + "px");
  $infotieData.css("left", $iTie_Pos_left + "px");
});

$(".infoTie").hover(
  function() {
    $("body").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;
  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, ahora funciona porque el tooltip está añadido al body</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>

2
  • Oh wow, es verdad! A veces estamos tan centrados en otros aspectos del proyecto, que no vemos estas pequeñas cosas. Muchas gracias hermano :D
    – Chun
    Commented el 15 abr. 2017 a las 0:30
  • De nada amigo. Un saludo ;)
    – ElChiniNet
    Commented el 15 abr. 2017 a las 8:24

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.