Hello Reader's if you want to edit any value from db in the webpage without any text box or form, Then choosing the Angular JS will be the best option Lets see the example For this lets start with the html page. The code for this page will go like this:-

<div id="main" ng-app ng-controller="InlineEditorController" ng-click="hideTooltip()">
    <div class="tooltip" ng-click="$event.stopPropagation()" ng-show="showtooltip">
        <input type="text" ng-model="value" />
    </div>
    <p ng-click="toggleTooltip($event)">{{value}}</p>
</div>

Now in the code above there is a text box which will act as edit when we add the following JS in it. The JS will go like this:-

function InlineEditorController($scope){


    $scope.showtooltip = false;
    $scope.value = 'Click to Edit.';
    $scope.hideTooltip = function(){

        $scope.showtooltip = false;
    }
    $scope.toggleTooltip = function(e){
        e.stopPropagation();
        $scope.showtooltip = !$scope.showtooltip;
    }
}

Now the last part is to add some CSS to it. The CSS will go like this:-

*{
    margin:0;
    padding:0;
}

body{
    font:15px/1.3 'Open Sans', sans-serif;
    color: #5e5b64;
    text-align:center;
}

a, a:visited {
    outline:none;
    color:#389dc1;
}

a:hover{
    text-decoration:none;
}

section, footer, header, aside, nav{
    display: block;
}


.tooltip{
    background-color:#5c9bb7;

    background-image:-webkit-linear-gradient(top, #5c9bb7, #5392ad);
    background-image:-moz-linear-gradient(top, #5c9bb7, #5392ad);
    background-image:linear-gradient(top, #5c9bb7, #5392ad);

    box-shadow: 0 1px 1px #ccc;
    border-radius:3px;
    width: 290px;
    padding: 10px;

    position: absolute;
    left:50%;
    margin-left:-150px;
    top: 80px;
}

.tooltip:after{
    /* The tip of the tooltip */
    content:'';
    position:absolute;
    border:6px solid #5190ac;
    border-color:#5190ac transparent transparent;
    width:0;
    height:0;
    bottom:-12px;
    left:50%;
    margin-left:-6px;
}

.tooltip input{
    border: none;
    width: 100%;
    line-height: 34px;
    border-radius: 3px;
    box-shadow: 0 2px 6px #bbb inset;
    text-align: center;
    font-size: 16px;
    font-family: inherit;
    color: #8d9395;
    font-weight: bold;
    outline: none;
}

p{
    font-size:22px;
    font-weight:bold;
    color:#6d8088;
    height: 30px;
    cursor:default;
}

p b{
    color:#ffffff;
    display:inline-block;
    padding:5px 10px;
    background-color:#c4d7e0;
    border-radius:2px;
    text-transform:uppercase;
    font-size:18px;
}

p:before{
    content:'';
    display:inline-block;
    margin-right:5px;
    font-weight:normal;
    vertical-align: text-bottom;
}

#main{
    height:300px;
    position:relative;
    padding-top: 150px;
}

Now when it all load you will see the label edit me on clicking it, The editor will open and there you edit the value and save them.