Last Updated: 30 Apr 2021 05:47 by ADMIN
Created on: 29 Apr 2021 16:10
Type: Feature Request
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" />

Attached Files:
1 comment
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:
                    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} />

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.

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: