Как установить уникальный стиль для атрибута подсказки? - PullRequest
Новая
       3

Как установить уникальный стиль для атрибута подсказки?

0 голосов
/ 19 февраля 2020

У меня есть атрибут подсказки в моей таблице, я хочу установить ширину для этого атрибута, связанную с шириной моего столбца, поэтому у меня есть подсказки с разными размерами. У меня разные ширины столбцов, и я хочу установить ширину для всплывающей подсказки на основе ширины моего столбца. Я имею в виду, как я могу получить доступ к атрибуту data-md-tooptip (элемент подсказки) через JavaScript и стиль объявления, например document.querySelector([data-md-tooltip]).style.width = "000px"

[data-md-tooltip] {
  position: relative;
}

[data-md-tooltip]:before {
  content: attr(data-md-tooltip);
  position: absolute;
  
  /*width: 360px;*/
  top: 95%;
  left: 50%;
  padding: 8px;
  transform: translateX(-50%) scale(0);
  transition: transform 0.2s ease-in-out;
  transform-origin: top;
  background: #232F34;
  color: white;
  border-radius: 2px;
  font-size: 12px;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  z-index: 2;
}

[data-md-tooltip]:hover:before {
  transform: translateX(-50%) scale(1);
}
<td class="mdc-data-table__cell" data-md-tooltip="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since">
  <div class="long-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been      the industry's standard dummy text ever since,Lorem Ipsum is simply dummy text of the printing and typesetting          industry. Lorem Ipsum has been the industry's standard dummy text ever since
  </div>
</td>
<hr>
<!-- Here I want different tool tip width -->
<td class="mdc-data-table__cell" data-md-tooltip="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since,Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since">
  <div class="long-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been      the industry's standard dummy text ever since,L
  </div>
</td>

1 Ответ

0 голосов
/ 19 февраля 2020

document.querySelector требует String в качестве параметра, поэтому вам нужно написать 

document.querySelector('[data-md-tooltip]').style.width = ...

Но этот метод вернет только первый элемент, соответствующий этому селектору: если вам нужно применить стиль к более чем один [data-md-tooltip] элемент, который вам нужно использовать document.querySelectorAll и пройтись по полученной вами коллекции узлов (например, с помощью оператора распространения ...) 

[...document.querySelectorAll('[data-md-tooltip]')].forEach((tt) => {
   tt.width = ...
})
...