Show Content Pane Labels

[tpluscode]

Description

When in edit mode > hover over a module > there is a Move flyout menu with content panes listed to reposition the module on a page.

Admins need a way to easily identify the name of each content pane in order for this to be a usable feature.

[OllyHodgson]

Recently I've worked around this by making sure all of my content panes have a data-name attribute the same as the ID, e.g. <div runat="server" id="Fullwidth_Central" data-name="Fullwidth_Central"> and used CSS to show that attribute:

.dnn-mode-edit .content-areas .dnnModuleManager::before {
    content: attr(data-name);
    display: inline-block;
    padding: 2px 3px;
    border-radius: 4px;
    position: absolute;
    z-index: 1;
    top: 12px;
    left: 12px;
    font-size: 11px;
    color: $white;
    background: rgba(0,0,0,0.3);
}

It shows up like this when editing the page (extra icons are because it's an Evoq install):