CODEWITHSUNDEEP
jquery-uitooltip
Kurkula
Kurkula

Reputation: 6762

Jquery UI tool tip close icon

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.

Tried the below code to hide tooltip after 5 seconds.

var dur=5000; 
$(document).tooltip({
  show:{
      effect:'slideDown'
  },
  track:true,
  open: function( event, ui ) {
      setTimeout(function(){
      $(ui.tooltip).hide();
   }, dur);
  }
});

Tried below code to Show tooltip

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
      $(function () {
          $(document).tooltip({
              position: {
                  using: function (position, feedback) {
                      $(this).css(position);
                      $("<div>")
                        .addClass("arrow")
                        .addClass(feedback.vertical)
                        .addClass(feedback.horizontal)
                        .appendTo(this);
                  }
              }
          });
      });
  </script>
  <style>
  .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;
  }
  </style>
</head>
<body>

<p title="Sample Tool Tip Text">Tooltips</p> 

</body>
</html>

Upvotes: 2

Views: 10235

Answers (1)

Dom
Dom

Reputation: 40461

If you want to use the tooltip in this manner, you cannot use $(document).tooltip(). Instead, you would have to use $(selector).tooltip().focus(), which will force the tooltip open.

Then you would need to bind a click event and do the following: $(selector).tooltip("destroy").

Using your jsfiddle, I've done the following changes:

HTML:

<p id="p1" title="Sample Tool Tip Text">Tooltips</p>

JAVASCRIPT:

$(function () {
     $("#p1").tooltip({
       items: "p", //use this to override content - in this example, I am using "p" but you can also use classes/id's/etc
       content: function (){
        if ($(this).is("p") ) {
          var text = $(this).attr("title");
          return text + '<span style="position:absolute;top:0;right:0;" class="tooltipClose ui-icon ui-icon-circle-close"></span>';
         }
       },
       position: {
         using: function (position, feedback) {
           $(this).css(position);
           $("<div>")
           .addClass("arrow")
           .addClass(feedback.vertical)
           .addClass(feedback.horizontal)
           .appendTo(this);
         }
       }
     }).focus();

   $(".tooltipClose").click(function(){
      $("#p1").tooltip("destroy");
   });
 });

Here is a demo: http://jsfiddle.net/u8kX9/9/

Hope this is what you're looking for! Let me know if you need anything else!

Upvotes: 2

Related Questions