БЛОГ НА HUSL


Помогите задать таймер на закрытие тултипа и решить вопросик

Автор вопроса: Hedonist

Господа-хорошие,

  1. Есть тултип, как сделать на JS, чтобы он закрывался самостоятельно через 2 секунды?;
  2. Обратите внимание, что этот тултип открывается со второго клика, почему так происходит, и как сделать, чтобы срабатывало с 1 клика?

const infoIcon = document.querySelector('#info__top-info');
infoIcon.addEventListener('click', () => {
    const infoBlock = document.querySelector('.desc-1');
    if (infoBlock.style.visibility === 'hidden') {
        infoBlock.style.visibility = 'visible';
        infoBlock.style.opacity = '1';
    } else {
        infoBlock.style.visibility = 'hidden';
        infoBlock.style.opacity = '0';
    }

});
#info__top-info {
    position: relative;
    top: 1.2rem;
    right: -.8rem;
    width: 3rem;
    height: 3rem;

}
.tooltip-1 {
    position: relative;
}

.desc-1 {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    background-color: #333;
    right: 1.1rem;
    top: 5rem;
    width: 18rem;
    transition-duration: .3s;
    border-radius: 1rem;
    text-align: center;
    font-family: 'robotoLight', sans-serif;
    font-size: 1.2em;
    color: aliceblue;
    margin: 0 auto;
    padding: 1.5rem;

    
}
<div class="tooltip-1">
                            <svg  id="info__top-info"  viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="15" cy="15" r="14.5" stroke="#47093E"/>
                                <path d="M14.624 10.648C14.24 10.648 13.936 10.536 13.712 10.312C13.488 10.088 13.376 9.8 13.376 9.448C13.376 9.04267 13.504 8.70667 13.76 8.44C14.016 8.17333 14.3573 8.04 14.784 8.04C15.2107 8.04 15.536 8.15733 15.76 8.392C15.984 8.616 16.096 8.89867 16.096 9.24C16.096 9.66667 15.968 10.008 15.712 10.264C15.456 10.52 15.0987 10.648 14.64 10.648H14.624ZM13.776 13.624L12.64 13.32V12.248L15.568 11.896H15.6L16.048 12.216V19.912L17.12 20.04V21H12.656V20.04L13.776 19.896V13.624Z" fill="#47093E"/>
                                </svg>
                                <div class="desc-1"><p>Для более подробной информации необходимо проконсультироваться с врачом</p></div>
                        </div>


Источник

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

Автор решения: Алексей Шиманский 

const infoIcon = document.querySelector('#info__top-info');
infoIcon.addEventListener('click', () => {
    const infoBlock = document.querySelector('.desc-1');
    let infoBlockStyles = getComputedStyle(document.querySelector('.desc-1'));
    
    if (infoBlockStyles.visibility === 'hidden') {
        infoBlock.style.visibility = 'visible';
        infoBlock.style.opacity = '1';
        
        setTimeout(() => {
            infoBlock.style.visibility = 'hidden';
            infoBlock.style.opacity = '0';
        }, 2000)        
    } else {
        infoBlock.style.visibility = 'hidden';
        infoBlock.style.opacity = '0';
    }
});
#info__top-info {
    position: relative;
    top: 1.2rem;
    right: -.8rem;
    width: 3rem;
    height: 3rem;

}
.tooltip-1 {
    position: relative;
}

.desc-1 {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    background-color: #333;
    right: 1.1rem;
    top: 5rem;
    width: 18rem;
    transition-duration: .3s;
    border-radius: 1rem;
    text-align: center;
    font-family: 'robotoLight', sans-serif;
    font-size: 1.2em;
    color: aliceblue;
    margin: 0 auto;
    padding: 1.5rem;

    
}
<div class="tooltip-1">
                            <svg  id="info__top-info"  viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="15" cy="15" r="14.5" stroke="#47093E"/>
                                <path d="M14.624 10.648C14.24 10.648 13.936 10.536 13.712 10.312C13.488 10.088 13.376 9.8 13.376 9.448C13.376 9.04267 13.504 8.70667 13.76 8.44C14.016 8.17333 14.3573 8.04 14.784 8.04C15.2107 8.04 15.536 8.15733 15.76 8.392C15.984 8.616 16.096 8.89867 16.096 9.24C16.096 9.66667 15.968 10.008 15.712 10.264C15.456 10.52 15.0987 10.648 14.64 10.648H14.624ZM13.776 13.624L12.64 13.32V12.248L15.568 11.896H15.6L16.048 12.216V19.912L17.12 20.04V21H12.656V20.04L13.776 19.896V13.624Z" fill="#47093E"/>
                                </svg>
                                <div class="desc-1"><p>Для более подробной информации необходимо проконсультироваться с врачом</p></div>
                        </div>

тултип открывается со второго клика, почему так происходит, и как сделать, чтобы срабатывало с 1 клика?

Если я правильно понимаю то атрибута style в элементе в самом начале загрузки ещё нет. Поэтому в первый раз он добавляется, но скрывает элемент по условию (срабатывает else), а на второй раз уже работает if. Я использовать вычисляемые свойства, которые JS берёт из свойств DOM объекта.

→ Ссылка
Автор решения: soledar10

Еще как вариант

const infoIcon = document.querySelector('#info__top-info');
const infoBlock = document.querySelector('.desc-1');

infoIcon.addEventListener('click', () => {  
  infoBlock.classList.toggle('is-open');
  setTimeout(hideTooltip, 2000);
});

function hideTooltip() {
  infoBlock.classList.remove('is-open');
}
#info__top-info {
  position: relative;
  top: 1.2rem;
  right: -.8rem;
  width: 3rem;
  height: 3rem;
}

.tooltip-1 {
  position: relative;
}

.desc-1 {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  background-color: #333;
  right: 1.1rem;
  top: 5rem;
  width: 18rem;
  transition-duration: .3s;
  border-radius: 1rem;
  text-align: center;
  font-family: 'robotoLight', sans-serif;
  font-size: 1.2em;
  color: aliceblue;
  margin: 0 auto;
  padding: 1.5rem;
}

.is-open {
  visibility: visible;
  opacity: 1;
}
<div class="tooltip-1">
  <svg id="info__top-info" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
    <circle cx="15" cy="15" r="14.5" stroke="#47093E"/>
    <path d="M14.624 10.648C14.24 10.648 13.936 10.536 13.712 10.312C13.488 10.088 13.376 9.8 13.376 9.448C13.376 9.04267 13.504 8.70667 13.76 8.44C14.016 8.17333 14.3573 8.04 14.784 8.04C15.2107 8.04 15.536 8.15733 15.76 8.392C15.984 8.616 16.096 8.89867 16.096 9.24C16.096 9.66667 15.968 10.008 15.712 10.264C15.456 10.52 15.0987 10.648 14.64 10.648H14.624ZM13.776 13.624L12.64 13.32V12.248L15.568 11.896H15.6L16.048 12.216V19.912L17.12 20.04V21H12.656V20.04L13.776 19.896V13.624Z" fill="#47093E"/>
  </svg>
  <div class="desc-1">
    <p>Для более подробной информации необходимо проконсультироваться с врачом</p>
  </div>
</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.