如何为 json 键和值提供工具提示消息？答案

【问题标题】：How to give tooltip messages for json key and values?如何为 json 键和值提供工具提示消息？
【发布时间】：2016-04-18 15:11:43
【问题描述】：

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

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

        }
    }
}

【问题讨论】：

引导程序的角度指令：angular-ui.github.io/bootstrap。也有用于基础的。如果您不使用 FE 框架，则必须构建自己的框架！
这是我用纯 html/css 创建的jsfiddle.net/ahmadabdul3/9wzaoa6e/14 的工具提示
@Rob，它可以是任何东西，无论是 Bootstrap 还是任何？如果我将鼠标/光标放在每个键上，我只需要显示每个键/值的任何工具提示消息（这些消息彼此不同）。
@AbdulAhmad，感谢您的回复，但我的 json 键/值需要类似的东西，我该怎么做？（这些工具提示消息对于每个键/值都不同）。
@Dhana 类似这样的jsfiddle.net/ahmadabdul3/9wzaoa6e/15

标签： javascript jquery angularjs json twitter-bootstrap-3

【解决方案1】：

下面的代码 sn-p 将让您了解如何进一步处理您的代码。

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="angular.js@1.5.3" 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>

【讨论】：

感谢您的回复，我在这里有一个查询，例如，如果我需要 key2 的工具提示消息和 key3 的其他消息，那么我该如何实现呢？上面的解决方案仅适用于类似的消息（任何不同的不同测试消息），但我需要为每个键提供不同的不同消息，请告诉我该怎么做？提前致谢。
根据需要修改$scope.getTooltip函数。 提示：你可以使用switch函数来做这些事情。