Styling for Tooltip:
.mainButtonContainer button:hover:after
{
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.7);
border-color: #093466;
border-radius: 5px 5px 5px 5px;
border-style: solid;
border-width: 7px 2px 2px;
bottom: -5px;
color: #093466;
padding: 5px 15px;
position: absolute;
width: 113px;
z-index: -1;
}
Sample HTML Code:
<button id=mgf_main1 type="button" onclick="loadData(1)">
<img src="Images/Magof-Icon.png" width="68" height="68"/>
</button>
The tooltip displays correctly in browsers like Firefox and Chrome.
However, the issue arises on Internet Explorer (version 10).
In IE, the tooltip is confined to the size of the button. How can this be resolved?