Ng-Mouseover-5

In this example of Ng-Mouseover, It will display the tooltip on mouseover.

See the code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<style type="text/css">
    .tooltip {
        border: 1px solid black;
        width: 230px;
        margin-left: 58px;
        margin-top: -35px;
        background-color: darkcyan;
        border-radius: 4px;
        height: 20px;
        color: white;
    }
</style>
</head>
<body ng-app="">
    <div ng-init="tooltip=false">
        <br />
        <br />
        <button ng-mouseover="tooltip=true" ng-mouseleave="tooltip=false">
            Tooltip
        </button>
        <div class="tooltip" ng-show="tooltip">Hi..Welcome to Angular JS World.</div>
    </div>
</body>
</html>

Output