Hi Omid,
With the help of Simon's code above please find your problem specific code below. You can use any one of the code below which will solve your issue.
<a href="javascript:void()" title="View Document"><img src="/ui/images/icons/ModuleName$pdf.png"/></a>
or if you just want to add the image and hover text you can use the code below
<img src = "ui/images/icons/ModuleName$pdf.png" alt="View Document" title = "View Document"/>
Note: Please change the ModuleName to the name of your project module where image is saved. Hope this might sort your issue.
If you want to use an alt tag you can simply use the html snippet or format string like so:
<a href="https://forum.mendix.com"><img src="http://upload.wikimedia.org/wikipedia/commons/9/9b/Adobe_PDF_icon.png" width="10%" alt="Download PDF"/> Download my document</a>
Then you can replace the href with the download link to your document and also replace the src with the image you want.
Regards
If you select the button and then look in the properties there is an option called tooltip. This will provide the functionality that you need. Just enter the text you need and voila!