html - Jquery dialog not working on mouseover -

i have div that, when hovered supposed transform div jquery ui dialog.

 <a href="#"><div class="btn button" id="btn button" value="">click here dialog!</></a><br><span class="tooltip">rgba(66, 222, 57, .8);</span>      <div id="are-you-sure" title="dialog">here is!<br><br></div>       <script>     $('#btn').mouseover(function(){        $('#are-you-sure').dialog();     });     </script>    

i have of necessary stylesheets , scripts linked page, dialog still doesn't work. ideas?

from mdn: https://developer.mozilla.org/en-us/docs/web/html/global_attributes/id

this attribute's value must not contain white spaces. browsers treat non-conforming ids contains white spaces if white space part of id. in contrast class attribute, allows space-separated values, elements can have 1 single id defined through id attribute. note element may have several ids, others should set means, such via script interfacing dom interface of element.

you can't set multiple ids via attribute.