dialog is not a function – TypeError – Blancer.com Tutorials and projects

I’m trying to implement a mouse hover functionality and below is my jsp;

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<%@ include file="/include/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <title>hover example</title>
</head>





<script>
    $(document).ready(function () {

        $(".hover").each(function () {

            $(this).mouseover(function() {
                console.log('in');

                $("#popup").dialog({
                    autoOpen: true,
                    title: 'Title',
                    width: '100px',
                    height: '100px',
                    modal: true
                });

            })
                    .mouseout(function() {
                        console.log('out');
                    });


        });
    });
</script>

    <div class="hover">
        this is the test hover...

    </div>


    <div id="popup" style="display:none; width: 100px; height:100px;">
        <b>yasgfshdfhsdhf</b>
        <b>yasgfshdfhsdhf</b>
        <b>yasgfshdfhsdhf</b>
    </div>

</html>

But I keep getting a .dialog is not a function error. I have tried many solutions from stackoverflow but still can’t get rid of the error. Can someone please point out what is causing the error.