Progress® KendoReact Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 28 Jul 2023 12:53 by ADMIN
Ryan
Created on: 29 Apr 2021 16:10
Category: KendoReact
Type: Feature Request
0
Tooltip component's className property does not appear to apply the specified class names

The Tooltip component has a className property. Providing a class name there does not seem to apply the class to the DOM element. See my below code and attached screenshot ...

            <div className="col">
              <label className="d-block">Name</label>
              <Input value={name} required={true} onChange={handleNameChange} />
              <Tooltip className="d-inline">
                <i className="k-icon k-i-info" title="The name of the Taxonomy" />
              </Tooltip>
            </div>

Attached Files:
1 comment
ADMIN
Stefan
Posted on: 30 Apr 2021 05:47

Hello, Ryan,

This is expected as the className is set to the Tooltip DOM, where the div in the screenshot is the DIV that we render around to elements in order to attach the events.

This can be resolved by making an instance of the Tooltip and attaching its hander to any custom DIV element where the developer has full control to style it:

https://www.telerik.com/kendo-react-ui/components/tooltip/tooltip-customization/
                <div
                    onMouseOver={event => tooltip && tooltip.handleMouseOver(event)}
                    onMouseOut={event => tooltip && tooltip.handleMouseOut(event)}
                    // add the class here
                >
                    <button className="k-button" title="Tooltip message">I also the same KendoReact Tooltip</button>
                    <Tooltip ref={(el) => tooltip = el} anchorElement="target" position="right" openDelay={300} />
                </div>

We need to render a DIV in order to attach the DOM events that will handle the events. We are also considering exposing the style and className prop of that element, so the developer the easily style them in those cases.


Regards,
Stefan
Progress Telerik

Тhe web is about to get a bit better! 

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.

Create an account Log In
View
Type
Status
Category