Add a tool tip for an image you create in CSS

My golden site design coding rule is site design supporting images are only referenced through the CSS.  This would include logos, header images, gradation bars, decorative backgrounds, etc.  Content supporting images (like Bob and Joe hanging at the company picnic) are content supporting images and therefore can end up in other places outside of CSS.

A question that often comes up when I teach this is “what about the ALT text value for the image?”. For some image types, you don’t need it.  ALT text on the IMG element is there for accessibility and to provide more detail about the info/action behind the image.  So for example ALT text is available for the help icon that tells you “Help (new window)”. I don’t need ALT text for supporting site images like gradations and decorative bits that just embellish your design and aren’t providing any type of true content or functionality.

Many of the CSS tricks I do in SharePoint hides the default text for an element and shows an image instead.  Since this is all done with CSS, the text is still present (even though it is hidden from the page view) and therefore you don’t need to provide ALT text for the image.

However, there are still cases where you want to show an image (via CSS) and still include ALT text on hover to show more info.  No need to move your image to the HTML, you can fake the ALT text hover (a.k.a. tool tip) with CSS. The below code is built to add the ALT text for the logo image that is inserted in place of the SharePoint site title. You can modify the selectors to apply this to other web site elements.

A good precursor to this post that you may want to check out first is Create a dynamic, linked logo that goes to your root site.

  1. Open your custom CSS file in your editor of choice.
  2. Paste in the following style statement and make modifications as needed. There is more detail about this under the statement.
    /* Create fake tool tip/alt text box for image used in the site title */
    .s4-titletext h1 a:after,
    .s4-titletext h1 a:link:after,
    .s4-titletext h1 a:visited:after   {
    	content: "Company Name Home"; /* Tool tip/alt text */
    	position:absolute; /* Remove from content flow */
    	background: #FEFFCD; /* Match light yellow tool tip background color */
    	display: block; /* Required to create box */
    	text-indent: 0px; /* Reset the text-indent that was negatively set in the original statement */
    	border: 1px solid #8C8C8C; /* Match gray tool tip border color */
    	padding: 3px; /*Create spacing between text and box border */
    	margin-left: 10px; /* Offset box placement */
    	font-size: 11px; /* Match tool tip font size */
    	color: #1F1E16; /* Match tool tip font color */
    	opacity: 0; /* Hide the box */
        /* Below properties are CSS3 */
    	/* Match tool tip drop shadow */
    	   -moz-box-shadow: -4px 5px 10px rgba(0,0,0,0.26);
    	   -webkit-box-shadow: -4px 5px 10px rgba(0,0,0,0.26);
    	   box-shadow: -4px 5px 10px rgba(0,0,0,0.26);
    	/* Prep for transition on hover */
    	   -moz-transition: 0s opacity;
    	   -webkit-transition: 0s opacity;
    	   transition: 0s opacity;
    }
    
    /* Show fake tool tip/alt text box on hover */
    .s4-titletext h1 a:hover:after {
    	opacity:1; /* Show the box */
        /* Below properties are CSS3 */
    	/* Delay display of hover by 1 second */
    	   -moz-transition-delay:1s;
    	   -webkit-transition-delay:1s;
    	   transition-delay:1s;
    }
  3. Code modifications:
    • .s4-titletext h1 a:after – This selector is based on the out-of-the-box SharePoint master page and targets the site title hyperlink. Your selector may need to be different based on your custom master page. For example: form > header h1 a:after. The :after is a pseudo selector that inserts content after an element.
    • content: “Company Name Home”; – Update the contents inside of the quotes to be the text you want to show on the hover.
    • transition and transition-delay – This creates a display delay for the tool tip box, much like a regular tool tip does. Please note this is not supported in IE9 and below. Check out browser support for transitions here.
  4. Once you have this implemented, you may notice that the tool tip box has underlined text. You can remove the underline by modifying the style statement that converts the HTML element to an image. Since this example is targeting an anchor, we need to make one more modification.
    .s4-titletext h1 a,
    .s4-titletext h1 a:link,
    .s4-titletext h1 a:visited {
    	text-decoration:none; /* Required for delayed tool tip effect  */
    }
  5. Save your CSS file and check out your changes in the browser.

Here is a screenshot of the final effect:

Sample of CSS generated tool tip