介绍

下面代码可以实现在html页面中添加一个小图片,鼠标移动到图片上,就会自动显示一个文字提示框,提示框中的文字可以自己定义

html代码

<img id="id" src="/image/a.png">

js代码

$(#id).tooltip({
          
   
        position : top,
        content : 提示框中的文字
    });

示例

html代码

<img id="id1" src="/image/a.png">
<img id="id2" src="/image/a.png">
<img id="id3" src="/image/a.png">
<img id="id4" src="/image/a.png">
<img id="id5" src="/image/a.png">

js代码

$.getJSON("tipContent.json", function (data) {
          
   
            tipTextAll(data);
        });
//鼠标移入提示图标后弹出气泡,显示文字提示
function tipTextAll(json) {
          
   
    for (var i=0;i<json.length;i++){
          
   
        tipTextCommon(json[i].id,json[i].tipText);
    }
}
function tipTextCommon(id,content) {
          
   
    $(#+id).tooltip({
          
   
        position : top,
        content : content
    });
}

tipContent.json文件代码

[
  {
          
   
    "id": "id1",
    "tipText": "第一个提示框中要提示的文字"
  },{
          
   
    "id": "id2",
    "tipText": "第二个提示框中要提示的文字"
  },{
          
   
    "id": "id3",
    "tipText": "第三个提示框中要提示的文字"
  },{
          
   
    "id": "id4",
    "tipText": "第四个提示框中要提示的文字"
  },{
          
   
    "id": "id5",
    "tipText": "第五个提示框中要提示的文字"
  }
]