Tooltips or hover pop ups

[mdykstra]

Something like this would be very helpful! It opens on hover.

[moe]

Where would you want to see these tooltips?

[mdykstra]

I think making it an option on any type of button (actions/submit/link) would be cool.

[SafetyUniversity]

I’d say anywhere that would be useable where you can add “help” text for fields. Maybe a “?” upper right corner of a field label.

[mtif]

Yep, this get my vote too

[tim.young]

Here’s 2 methods of creating tooltips if anyone is interested.

Hover text - Buttons

Data entry prompts

[mdykstra]

Thank you @tim.young These are very helpful!

[Henry]

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.

[ashnil]

@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 :

[Henry]

@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.

[SafetyUniversity]

@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

[Henry]

Hi Adam,

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

Thanks for your help!

Henry

[tim.young]

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.

[Peter]

Hi - it would be great if you make a possibility for tooltips within buttons standard.

Where to add:

It will work such that you focus your mouse pointer on a button, a small balloon will pop-up with the (short) content of the tooltip.

Big advantage: you do not need to give descriptions to your button, so it becomes big. Tooltip save a lot of space, for example in a big table component.

[mdykstra]

Great idea!

[richardch372]

It would be cool if we could add a bubble help on ‘hover’ over an action link button in a table row. So users would know what the button does.

[WilliamPorter]

I see we’ve got tooltips for forms (and maybe detail components — haven’t tried that yet). Would be great if this were possible for columns in a table, as well. Here’s an example from Airtable. As you can see, this makes it possible to keep the column title brief, but provide a fuller description of the field if the user hovers over the little ‘info’ circle.

[mdykstra]

It would be cool to be able to add pop-up help prompts on data entry pages like below.

[moe]

If you’re not scared of messing around with some JS, you can do this somewhat easily.

Example link

1. Add this to the footer of your app. :

    <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
    <script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>
   

2. Get the component ID and the field ID for each field you want to add a tooltip for:

TB.render('component_36', function(data) {

tippy('#fieldmloNLGrM8p', {
    content: 'My tooltip for the Customer Field!',
    trigger: 'focus',
    placement: 'right-start',
    arrow: true,
    animation: 'fade',
  });
  
tippy('#fieldB8qQPZr16n', {
    content: 'My tooltip for the Email Field!',
    trigger: 'focus',
    placement: 'right-start',
    arrow: true,
    animation: 'fade',
});

tippy('#field_block_field_34 input', {
    content: 'My tooltip for the Date Field!',
    trigger: 'click',
    placement: 'top',
    arrow: true,
    animation: 'fade',
});

tippy('#field_block_field_35 div', {
    content: 'My tooltip for the Radio Field!',
    trigger: 'click',
    placement: 'left-start',
    arrow: true,
    animation: 'fade',
});
});

[tim.young]

Related topic:

Hover text - Buttons