Add "Show as Tooltip" option in Details Component

We can show tooltips in Edit Components and in Form Components. It would be helpful to have the option to do this in Details Components as well.
image

1 Like

@Henry

You can add something like below
Step 1 : Add css class to your element

Step 2 : Add css

.tooltip-css{
background: #333;
background: rgba(0,0,0,.9);
color: #fff;
content: attr(title);
width:20%;
padding: 5px;
text-align: center;
border-radius:5px;
}

Step 3 : Add code to javascript

TB.render(“component_7”, function (data) {

$(".custom-icon label .lbl").after('<i class="far fa-question-circle custom-tooltip" data-toggle="tooltip" data-placement="right"></i>');

let tooltipText = `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley`;

$(".custom-tooltip").attr('title', tooltipText);

$('[data-toggle="tooltip"]').tooltip({

    tooltipClass: "tooltip-css"

})

});

Result :

2

@ashnil
I think I’m missing something on the first step. I am editing an element in a details form, but I don’t see the CSS Class option.

@Henry -
I checked the details component on my end and I see the CSS Class filed where custom classes can be added. The field is under the “General” tab.

Are you looking at a form or a details component? You refer to both in your post.

~Adam

Hi Adam,

The Tool Tips do work in the Form component. I was referring to the Details component.

Thanks for your help!

Henry

Hey @Henry,

@SafetyUniversity’s post is correct about the location of the Custom CSS input when editing a field in a Details Component. Are you not seeing it there?

@ashnil’s code will need to be modified to work in a details component for what it’s worth.