How to turn

enter image description here

show as the following style

enter image description here


Install control panel CSS plugin, and add the following style.

.field .heading{
  position: relative;

.field.tooltip-icon-append label:after{
    content: "i";
    font-style: italic;
    font-family: open-sans;
    display: inline-block;
    position: relative!important;
    top: 0!important;
    left: 0!important;
    color: #fff;
    width: 17px;
    height: 17px;
    margin-top: 0;
    margin-left: 5px!important;
    line-height: 17px;
    font-size: 13px;
    background-color: rgba(0,135,255,.7);
    border-radius: 50%;
    text-align: center;
    opacity: 1;
    -webkit-font-smoothing: auto;

.field .heading .instructions {
    visibility: hidden;
    max-width: 100vw;
    background-color: #ddd;
    color: #000;
    border-radius: 6px;
    padding: 10px;
    position: absolute;
    z-index: 1000;
    bottom: 150%;
    width: 300px;
    opacity: 0;
    box-shadow: 0 0 0 1px rgba(205,216,228,.25), 0 2px 12px rgba(205,216,228,.5);
    transition: opacity .3s;

.field .instructions::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 25px;
    border-width: 10px;
    border-style: solid;
    border-color: #ddd transparent transparent;

.field .heading:hover .instructions {
  visibility: visible;
  opacity: 1;

Install control panel JS plugin and add the following code.

        var instruction = $(this).find(".instructions");
        if(instruction.length !== 0){

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.