如何给json键和值提供工具提示消息？

我有一个类似于下面的json，我从数据库中获取它，并在我的html查看页面上显示它（使用ng-repeat并显示如表单输入字段，就像key1是字段名，然后10是我们在文本框中输入的对应值）。在这里，我需要，如果我把光标/鼠标放在key1字段上，那么它应该显示一些工具提示信息（如：it's a key1 field），对于所有字段也是如此。请让我知道我该怎么做？有没有可用的例子？提前致谢。如何给json键和值提供工具提示消息？

test = { 
    "tests": { 
     "testjson": { 
      "key1": 10, 
      "key2": "second", 
      "key3": 20 

     } 
    } 
}

来源

2016-04-18 Dhana

引导提示？ – Rob

bootstrap的角度指令：https：//angular-ui.github.io/bootstrap/。也有基础的。如果你不使用FE框架，你必须建立自己的！ – panzhuli

这里是一个工具提示，我创建了https://jsfiddle.net/ahmadabdul3/9wzaoa6e/14/与纯html/css –

下面的代码片段会给你一个关于如何进一步处理你的代码的想法。

var app = angular.module('app', []); 
 

 
app.controller('indexCtrl', function ($scope) { 
 
    
 
    $scope.test = { 
 
    "tests": { 
 
     "testjson": { 
 
      "key1": 10, 
 
      "key2": "second", 
 
      "key3": 20 
 

 
     } 
 
    } 
 
    }; 
 
    
 
    $scope.getTooltip = function(key) { 
 
    return "It's a " + key + " field"; 
 
    }; 
 

 
});

<html> 
 

 
    <head> 
 
    <script data-require="[email protected]" data-semver="1.5.3" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body ng-app="app" ng-controller="indexCtrl"> 
 
    <div ng-repeat="(k,v) in test['tests']['testjson']"> 
 
     <label>{{k}}</label> 
 
     <input type="text" value="{{v}}" title={{getTooltip(k)}}><br/> 
 
    </div> 
 
    </body> 
 

 
</html>

来源

2016-04-18 15:54:16

感谢您的回复，我在这里有一个查询，例如，如果我需要tooltip消息为key2和其他一些key3的消息不同的东西，那我该如何执行？上面的解决方案仅适用于类似的消息（任何不同的测试消息），但我需要为每个密钥提供不同的消息，请让我知道如何执行此操作？提前致谢。 – Dhana

根据您的需要修改* $ scope.getTooltip *函数。 **提示：**你可以使用*开关*功能做这个东西。 –

如何给json键和值提供工具提示消息？

回答

相关问题