Fix for jQuery UI Button with only images issue

Yesterday, while using jQuery UI Button I encounter an strange issue. The functionality was to display the button with only image, no text. But my button was looking quite odd. See below image,


After few minutes, I realized that I was doing 2 mistakes. As soon as I fixed it, the button was looking good. So the fix was,
  • First, assign some text to the button. The text assigned to button will be displayed as tooltip. You can't have a button with no text. My code was,
    <button id="btnClose" class="Close"></button>
    
  • Second, while creating button with only images, set "text: false". So that the button value displayed as tooltip.
$("#btnClose1").button({
   icons: {
      primary: "ui-icon-closethick"
   }, text: false
});
See result below.


See Complete Code
Feel free to contact me for any help related to jQuery, I will gladly help you.
SHARE

Nothing shocks me, I'm a Software Engineer. And I am not young enough to know everything. I live in World Wide Web and from there take care of this website. This website communicates about my work, learning and experience. I believe life is short, and it is for loving, sharing, learning and connecting. So lets connect..