Customizing how a ToolTip is displayed using CSS

I was messing around with various ways to customize the look of a tooltip and happened to stumble across an incredibly simple solution utilizing CSS.  In this particular instance, the "tooltip" will appear to the immediate right of the anchor tag's text in a nice, friendly-looking blue box.  Nothing fancy, but something you could easily build on if you like.

Here's the code:

<style>
        .toolTip:hover {
            text-decoration: none;
        }

        .toolTip:hover:after {
            content: attr(data-tooltip);
            text-decoration:none;
            position: absolute;
            background: #40ABF0;
            padding: 3px 7px;
            margin-left: 7px;
            margin-top: -3px;
            color: #FFF;
            border-radius: 3px;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
        }
</style>




...



<a href='urlOfSite' target='_blank' class='toolTip' data-tooltip='Text to show in the custom tooltip!'>

Using CSS to cause an image to "expand" when hovered over

I just stumbled across some interesting code written by one of my co-workers that utilizes CSS to cause an image to expand slightly when the user of the web page hovers over it.  As you might guess, this would be perfect for highlighting clickable components such as buttons and the like.  This idea was so clever that I thought I'd share:

<style>
        .imgButton {
          display: inline-block;
          vertical-align: middle;
          -webkit-transform: perspective(1px) translateZ(0);
          transform: perspective(1px) translateZ(0);
          box-shadow: 0 0 1px transparent;
          -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
          -webkit-transition-property: transform;
          transition-property: transform;
        }
        .imgButton:hover, .imgButton:active, .imgButton:focus {
          -webkit-transform: scale(1.1);
          transform: scale(1.1);
        }

</style>

...

<img src="pathToImageFile" class="imgButton" />

Making sure the Time Component is accounted for in a DateTime CAML Query

The key to making certain that the time component is leveraged when you're performing a datetime comparison in a CAML Query is to include the IncludeTimeValue attribute in your query with a value set to "TRUE".

In the following example, I leveraged a javascript CSOM CAML query to only return items in my image library called "Banners" in which the current datetime falls within the boundaries specified in my custom StartDate and EndDate datetime fields of the image library:

<View>
 <Query>
  <Where>
   <And>
    <Leq>
     <FieldRef Name=\'StartDate\'/><Value IncludeTimeValue=\'TRUE\' Type=\'DateTime\'><Today /></Value>
    </Leq>
    <Geq>
     <FieldRef Name=\'EndDate\'/><Value IncludeTimeValue=\'TRUE\' Type=\'DateTime\'><Today /></Value>
    </Geq>
   </And>
  </Where>
 </Query>
</View>

Here is a more complete version of the code that I used:

function execRequest_Banner() {
     var ctx_Banner = SP.ClientContext.get_current();
     var camlQuery_Banner = new SP.CamlQuery();
     // Filter the image to display based on the following criteria:
     // 1) Only display images in which today's date falls within the Start and End Date range
     // specified

     camlQuery_Banner.set_viewXml('<View><Query><Where><And><Leq><FieldRef Name=\'StartDate\'/>
<Value Type=\'DateTime\'><Today /></Value></Leq><Geq><FieldRef Name=\'EndDate\'/>
<Value IncludeTimeValue=\'TRUE\' Type=\'DateTime\'><Today /></Value></Geq></And>
</Where></Query></View>');
     this.items_Banner = 
     ctx_Banner.get_web().get_lists().getByTitle('Banners').getItems(camlQuery_Banner);
     ctx_Banner.load(items_Banner);
     ctx_Banner.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded_Banner),
     Function.createDelegate(this, this.onQueryFailed_Banner));
}