I am working on an html view using Thymeleaf. The view contains a large table with various tooltips that have a style applied which is functioning correctly. However, I am now facing the challenge of adding a min-width specifically to the tooltips within a particular column. These tooltips have ids that start with "commentTooltip".
Each tooltip generated by Thymeleaf has an id starting with "commentTooltip".
I have attempted several possible solutions without success so far. I feel like I am close to finding a solution, but struggling to access the .tooltip-inner element which is dynamically generated by Bootstrap after the DOM is ready.
My current approach is:
<td id="commentTooltip6H78SHF data-html="true" data-toggle="tooltip" data-original-title='Tooltip Text One'>
<td id="commentTooltip8RQ671S data-html="true" data-toggle="tooltip" data-original-title='Tooltip Text two'>
$('td')
.filter(function() {
return this.id.match(/commentTooltip*/);
}).next($('.tooltip > .tooltip-inner')).attr('min-width','400px');
This code snippet allows me to select all the td elements that I want to modify, but I am encountering difficulties in accessing the properties of the generated tooltips.
$('td')
.filter(function() {
return this.id.match(/commentTooltip*/);
})
Any assistance with this issue would be greatly appreciated. Thank you!