Question

我正在使用工具提示将图像附加到div，但是工具提示不适用于div中的图像。我在div外面有一张静态图片，为此，工具提示正在起作用。

以下是jquery函数中的一个例外：

success: function (result) {
  if (result != null) {
    var MyPics = result.MyIctures;
    $.each(MyPics, function (index, value) {
      var im = (MyPics[index].FILE_PATH);
      console.log(MyPics[index].file_date);
      var img = $("<img />");
      img.attr("id",""+ MyPics[index].file_path+"");
      img.attr("style", "height:100px;width: 100px");
      img.attr("data-toggle", "tooltip");
      img.attr("data-html", "true");
      img.attr("data-placement", "top");
      img.attr("title", "<em>Title:" + MyPics[index].file_name + "</em> <hr> <b></b>");
     img.addClass("img_preview");
     img.attr("src", im);
     $("#mypics").append(img);
     // console.log(im);
     //   
     }
   )
  }
}

此img的工具提示有效，但div附加的提示无效。

<img id="bing_img_dessc" class="img_preview" style="height:50px" data-toggle="tooltip" data-html="true" data-placement="top" title="<em>sss</em> <hr> <b>sss</b>" src="~/Resources/Images/login-user-icon.png">

任何建议都会有所帮助。谢谢。

Answer 1

问题是因为仅在页面加载时调用tooltip()，所以只有DOM中存在的元素才在悬停时显示工具提示。要解决此问题，您还需要在添加新图像时调用tooltip()：

success: function(result) {
  if (!result)
    return;

  var images = result.MyIctures.map(function(image) {
    return $('<img />', {
      'id': image.file_path,
      'data': {
        'toggle': 'tooltip',
        'html': 'true',
        'placement': 'top'
      },
      'title': '<em>Title:' + image.file_name + '</em><hr>',
      'class': 'img_preview',
      'src': image.FILE_PATH
    });
  });

  $("#mypics").append(images).find('.img_preview').tooltip();
}

请注意，我通过使用map()来构建jQuery对象数组以仅追加一次，使逻辑更加简洁。

还要注意，您同时使用了FILE_PATH和file_path属性；确保这是正确的，因为JS区分大小写。 MyIctures应该也应该是MyPictures

将img附加到div时工具提示不起作用

1 个答案: