1 Answer, 1 is accepted
Hello, Abhishek,
You can achieve this by programatically setting the `title` property to the required element.
In the below example, in `React.useEffect`, I am mapping over the items with className `k-item k-tabstrip-item`, and I am setting the title to `123` to the element with `outerText` equal to `Paris`. You can set any custom title you want:
I hope this example suits you and please let me know if you have any further questions.
Regards,
Yanko
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!
Rank 2
Iron
Iron
Iron
You can wrap the TabStrip within a Tooltip component in order to display the "title" attributes with the KendoReact Tooltip.
As a side note, the "title" property of the TabStripTab accepts React Node, which means that you can add an element with a "title" attribute directly in the title. Additionally, if you want to use a state variable within the tooltip, you can set the updateInterval of the Tooltip component, so it can get the updated value every n seconds.
For your convenience, following is an example demonstrating the above approach with a dynamic state variable, React Node as a title and a KendoReact Tooltip:
Rank 2
Iron
Iron
Iron
When a Tab is disabled, it will have "pointer-events: none" from the theme styles, which will prevent the display of a tooltip. If you want to allow the tooltips for disabled elements you can use the following override for the styles:
<style>
.k-tabstrip .k-disabled{
pointer-events: all;
}
Rank 2
Iron
Iron
Iron
Hi Abhishek,
I am not sure that I understand the exact scenario that you have, but you can try setting the "parentTitle" property of the Tooltip to "true" and see if that will resolve the issue.
<Tooltip
position={'right'}
anchorElement={'target'}
updateInterval={1000}
parentTitle={true}
>If further assistance is needed, please modify the example to better demonstrate your scenario, so we can test it locally.