SharePoint 2013 Web Part ToolPane Tweak

Introduction

This is a 5 minute trick that - I think - should be done for all branded SharePoint projects, to solve the issue of Web Part Properties Tool Pane.

Instead of disturbing the page with the tool pane when editing the web part, make it fixed to the left and to slide out on hover only!

Using the Code

You only need to copy the CSS classes to your custom styles and the same for the JavaScript:

JavaScript:

$(document).ready(function(){
var IsEditMode = document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode.value;

if (IsEditMode == "1") {        
        $("form#aspnetForm").append($("<div id='editPanel'>"));
        $("#editPanel").css("height", (innerHeight - 240) + "px");
        $("#MSOTlPn_MainTD").css("width", "0");
        $("#editPanel").append($("#MSOTlPn_Tbl"));

        if ($("#MSOTlPn_Tbl").length > 0)
            $("#editPanel").css("min-width", "300px");

        $("#editPanel").animate({ "left": "-320px", "opacity": "1" }, 700);

        $("#editPanel").on("mouseenter", function () {
            $(this).stop();
            $("#MSOTlPn_Tbl").stop();
            $("#MSOTlPn_Tbl").animate({ "opacity": "1" }, 500);
            $(this).animate({ "left": "0" }, 500);
        });

        $("#editPanel").on("mouseleave", function () {
            $(this).stop();
            $("#MSOTlPn_Tbl").stop();
            $("#MSOTlPn_Tbl").animate({ "opacity": "0" }, 500);
            $(this).animate({ "left": "-320px" }, 500);
        })
    } 
}) 

CSS:

 #MSOTlPn_Tbl {
    opacity: 0;
}

#editPanel {    
    opacity: 0;
    border-radius: 5px;
	box-shadow: 0 0 50px #aaa;
	border: 4px solid #74A1FF;
	position: fixed;
	bottom: 25px;
	z-index: 9999;
	left: -320px;
	overflow-y: auto;
	padding: 20px;
	background-color: #fff;
} 

Give it a try!