title: Jquery UI tool tip close icon
body: <p>I am trying to show Jquery UI tooltip on page load with a close/cross mark icon inside tool tip content. Tooltip should be closed on clicking X icon. I dont want to use any plugins. Please suggest logic.</p>
  
  <p>Tried the below code to hide tooltip after 5 seconds.</p>
  
  <pre><code>var dur=5000; 
  $(document).tooltip({
    show:{
        effect:'slideDown'
    },
    track:true,
    open: function( event, ui ) {
        setTimeout(function(){
        $(ui.tooltip).hide();
     }, dur);
    }
  });
  </code></pre>
  
  <p>Tried below code to Show tooltip</p>
  
  <pre><code>&lt;!doctype html&gt;
  
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /&gt;
    &lt;script src="http://code.jquery.com/jquery-1.8.3.js"&gt;&lt;/script&gt;
    &lt;script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="/resources/demos/style.css" /&gt;
    &lt;script&gt;
        $(function () {
            $(document).tooltip({
                position: {
                    using: function (position, feedback) {
                        $(this).css(position);
                        $("&lt;div&gt;")
                          .addClass("arrow")
                          .addClass(feedback.vertical)
                          .addClass(feedback.horizontal)
                          .appendTo(this);
                    }
                }
            });
        });
    &lt;/script&gt;
    &lt;style&gt;
    .ui-tooltip, .arrow:after {
      background: black;
    }
    .ui-tooltip {
      padding: 10px 20px;
      color: white;
  
      font: 8px "Helvetica Neue", Sans-Serif;
      text-transform: uppercase;
    }
    .arrow {
      width: 70px;
      height: 16px;
      overflow: hidden;
      position: absolute;
      left: 50%;
      margin-left: -35px;
      bottom: -16px;
    }
    .arrow.top {
      top: -16px;
      bottom: auto;
    }
    .arrow.left {
      left: 80%;
    }
    .arrow:after {
      content: "";
      position: absolute;
      left: 20px;
      top: -20px;
      width: 25px;
      height: 25px;
      box-shadow: 6px 5px 9px -9px black;
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      tranform: rotate(45deg);
    }
    .arrow.top:after {
      bottom: -20px;
      top: auto;
    }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;p title="Sample Tool Tip Text"&gt;Tooltips&lt;/p&gt; 
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>