Add min-width to an specific tooltip of Bootstrap with autogenerated id

Question

I have an html view with thymeleaf. This html have a big table with various tooltips with style who works correctly, but now I wont to add a mi-width to the tooltips in an specific column. Those that have an id who starts with commentTooltip.

Each generated with thymeleaf has an id that starts with commentTootip.

I have tried numerous possible solutions without success. Now I think I am near to find a solution but I am unable to. Because the problem is how to acces to .tooltip-inner witch is generated dinamically by bootstrap after de DOM is ready.

My solution right now 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');

With this fragment I can select all the that I want to change, but my problem is navigate to the generated tooltip properties.

$('td')
.filter(function() {
 return this.id.match(/commentTooltip*/);
 })

Thanks for your help

there is no attribute min-width, there is an attribute style that can have a property min-width. please refer to this https://stackoverflow.com/questions/3730035/how-to-change-css-using-jquery — user254694, Oct 07 '19 at 12:33
Possible duplicate of [How to change CSS using jQuery?](https://stackoverflow.com/questions/3730035/how-to-change-css-using-jquery) — user254694, Oct 07 '19 at 12:34
Ok, yes, but this is not the problem, in this case the problem is about how to acces to tooltip-inner who is generated by boostrap — saxisaac, Oct 07 '19 at 12:35
Possible duplicate of [How to get CSS to select ID that begins with a string (not in Javascript)?](https://stackoverflow.com/questions/11496645/how-to-get-css-to-select-id-that-begins-with-a-string-not-in-javascript) — 04FS, Oct 07 '19 at 12:38
well you actually have two problems - you are trying to access the correct id - as I understand it you want to access one of these tooltips but not the other other? The other problem you have is to change the css once you have it, which you are trying to do with the .attr method - that part should use the css using Jquery methods. As for the other one I don't understand what your criteria would be for choosing one tooltip over the other one? Can you clarify? — user254694, Oct 07 '19 at 12:38
Select the relevant TD elements as explained in the mentioned duplicate, then this should not need any JS in the first place, but can be done purely in CSS. — 04FS, Oct 07 '19 at 12:38

Ivor · Answer 1 · 2019-10-07T14:30:38.463

0

As someone commented it is possible to use [id^=commentTooltip]

^= indicates "starts with". Conversely, $= indicates "ends with". - How to get CSS to select ID that begins with a string (not in Javascript)?

So, you could easily apply a minWidth CSS property to all tooltips that contain commentTooltip in their ID.

Given this HTML:

<td id="commentTooltip8RQ671S" href="#">
 <span class="tooltip">tooltip</span> 
    click
</td>

To change the styles of the tooltip you must do:

$('td[id^=commentTooltip]').on('mouseover', function() {
  let tooltip = $(this).children('.tooltip');

  tooltip.css({
   'display': 'inline-block', /* only for visualization */
   'minWidth': '300px'
  })
})

edited Oct 07 '19 at 14:30

answered Oct 07 '19 at 12:45

Ivor

590
6
21

This changes the element , but not the tooltip generated by Bootsrtap on hover this – saxisaac Oct 07 '19 at 12:53
Don´t work @Ivor. The problem is that the generated tooltip by bootstrap is not a child. When I generate the tooltip bootstrap add a random atribute `describedby="tooltip32634"` and the tooltip element is a new `
` – saxisaac Oct 08 '19 at 07:58

Add min-width to an specific tooltip of Bootstrap with autogenerated id

1 Answers1