前端页面添加气泡文字提示

介绍

下面代码可以实现在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": "第五个提示框中要提示的文字"
  }
]