I would like to style a button in such a way that when hovering over, a string of text will apear a little above the image. The image is a replacement for the default button. The idea is that you have a button as normal but now without any text just the image and when on mousover you will see the text telling what the button can do.
The problem is that I do not fully understand how to do this in the code I have to deal with. I guesse the only solution of doing this is with putting the value="Select Column Layouts" in between span elements position it a little above the button image and then only displaying when hover.
The thing is, in the first lines of code the button is made up but I do not have any idea how to incorporate span in it so that it will be printed in the second code block (which is the output users will see)
1) lines of code creating the button
return '<input type="button" class="button" onclick="document.getElementById(\'' . $this->pager_name . '_widget\').style.display=\'block\'; location.href=\'#' . $this->pager_name . '_select_columns\';" value="' . _("Select Column Layouts") . '">';
2) how the button is presented to the user
<input type="button" class="button" onclick="document.getElementById('CompanyPager_widget').style.display='block'; location.href='#CompanyPager_select_columns';" value="Select Column Layouts">