Можно ли как-то сделать для объекта div свойства такие же как у input type color. React/Html

Question

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

Answer 1

У меня есть примерный образец того, что вам нужно:

const container = document.querySelector('.container');
const inputs = document.querySelectorAll('.input');

const handleFocus = (event) => {
  const tooltip = event.target.closest('.inner').querySelector('.tooltip');
  tooltip.classList.add('active');
  tooltip.style.left = event.target.offsetLeft + 'px';
  const fitsWidth = event.target.getBoundingClientRect().left + tooltip.clientWidth < container.clientWidth;
  const fitsHeight = event.target.getBoundingClientRect().top - event.target.clientHeight - tooltip.clientHeight > 0;
            
  if (fitsWidth) {
    tooltip.style.right = 'auto';
        tooltip.style.left = event.target.offsetLeft + 'px';
  } else {
      tooltip.style.left = 'auto';
        tooltip.style.right = '0px';
  }

  if (fitsHeight) {
    tooltip.style.top = 'auto';
    tooltip.style.bottom = event.target.offsetTop + event.target.clientHeight + 'px';
  } else {
    tooltip.style.bottom = 'auto';
    tooltip.style.top = event.target.offsetTop + event.target.clientHeight + 'px';
  }
}

const handleBlur = () => {
  const tooltips = document.querySelectorAll('.tooltip');
            
  tooltips.forEach((tooltip) => {
      tooltip.classList.remove('active');
  });
};

inputs.forEach((input) => {
  input.addEventListener('focus', handleFocus);
  input.addEventListener('blur', handleBlur);
});

* {
    margin: 0;
    padding: 0;
}

input:focus {
  outline: 0;
}

.container {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.inner {
    display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 33%;
    position: relative
}

.inner:nth-child(2) {
  justify-content: center;
}

.inner:nth-child(3) {
  justify-content: flex-end;
}

.tooltip {
  display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 300px;
    height: 150px;
  z-index: 1;
  background-color: white;
    border: 1px solid red;
}

.active {
    display: flex;
}

<div class="container">
    <div class="inner">
        <input type="text" class="input">
        <div class="tooltip">First input tooltip</div>
    </div>
    <div class="inner">
        <input type="text" class="input">
        <div class="tooltip">Second input tooltip</div>
    </div>
    <div class="inner">
        <input type="text" class="input">
        <div class="tooltip">Third input tooltip</div> 
    </div>
</div>

БЛОГ НА HUSL

Можно ли как-то сделать для объекта div свойства такие же как у input type color. React/Html

Ответы (1 шт):