Добавьте минимальную ширину к определенной подсказке Bootstrap с автоматически сгенерированным идентификатором

Question

У меня есть представление HTML с тимелистом. В этом html есть большая таблица с различными всплывающими подсказками со стилем, которая работает правильно, но теперь я добавлю mi-width к подсказкам в определенном столбце. Те, у кого есть идентификатор, начинающийся с commentTooltip.

Каждый сгенерированный с помощью thymeleaf имеет идентификатор, начинающийся с commentTootip.

Я пробовал множество возможных решений без успеха. Теперь я думаю, что я рядом, чтобы найти решение, но я не могу. Потому что проблема в том, как получить доступ к .tooltip - внутренняя ведьма динамически генерируется при помощи начальной загрузки после того, как de DOM готов.

Мое решение сейчас:

<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');

С этим фрагментом я могувыберите все, что я хочу изменить, но моя проблема - перейти к сгенерированным свойствам всплывающей подсказки.

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

Спасибо за вашу помощь

Answer 1

Как кто-то прокомментировал, можно использовать [id^=commentTooltip]

^ = означает «начинается с». И наоборот, $ = означает «заканчивается». - Как заставить CSS выбрать идентификатор, начинающийся со строки (не в Javascript)?

Итак, вы можете легко применить свойство minWidth CSS ко всем подсказкам, которыесодержат commentTooltip в своем идентификаторе.

Учитывая этот HTML:

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

Чтобы изменить стили всплывающей подсказки, вы должны сделать:

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

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