点击移动设备时隐藏工具提示

Question

我有以下 HTML：

<div class="gb-headline gb-headline-3f4a2ae2 gb-headline-text disc-tooltip" id="togl">Advertiser Disclosure
<div class="arrow"></div>
<p class="disc-tooltiptext">Disclosure text goes here. Read our <a target="_blank" href="/#" rel="noopener">disclosure</a></p>
</div>

我正在使用一些 CSS 来定位和显示工具提示，同时将鼠标悬停在 Disclosure 文本上：

/* Disclosure tooltip */
.disc-tooltip {
    position: relative;
    display: inline-block;
    padding-bottom: 20px;
}

.disc-tooltip a {
    color: #575760;
}

.disc-tooltip:hover {
    cursor: pointer;
}

.disc-tooltip .disc-tooltiptext {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s;
    text-align: left;
    font-size: 14px;
    max-width: 500px;
    width: 86vw;
    box-shadow: 0 0 18px rgb(0 0 0 / 18%);
    background-color: #FFF;
    color: #303030;
    padding: 20px 30px;
    margin-bottom: 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 40px;
  right: 0;
}

.disc-tooltip {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.disc-tooltip .disc-tooltiptext a {
    color: #303030;
    text-decoration: underline;
}

.disc-tooltip .disc-tooltiptext a:hover {
    color: #7e7e7e;
}

.disc-tooltip:hover .disc-tooltiptext {
    visibility: visible;
    opacity: 1;
}


.disc-tooltip .arrow {
    position: relative;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s;
    display: block;
    top: 10px;
    margin-left: 60px;
    width: 14px;
    height: 14px;
    background-color: #FFF;
    transform: rotate(45deg);
    box-shadow: -10px -10px 18px rgb(0 0 0 / 8%);
    z-index: 2;
}

.disc-tooltip:hover .arrow {
    visibility: visible;
    opacity: 1;
}


@media(max-width: 768px) {
    .disc-tooltip .arrow {
        top: 15px;
    }
}

在移动设备上，工具提示在单击时打开并在单击外部时关闭，但我正在寻找方法让这些设备也能够在单击 Advertiser Disclosure 文本时关闭工具提示。

无法让它工作。这是example page。广告商披露可以在内容的右上角找到。

更新：我尝试了@Ibrahim Sharaf 的示例，它对我不起作用，也许我做错了什么：

function _isMobile() {
var ___isMobileDevice;
const isMobileDeviceCheck = () => {
    if(screen.width < 500 || navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) {
        ___isMobileDevice = true;
    }
    if (___isMobileDevice) {
        if (typeof window.orientation === "undefined") {
            ___isMobileDevice = false; 
        }
    }
    if (typeof navigator.userAgentData != "undefined" && !navigator.userAgentData.mobile) {
        ___isMobileDevice = false; 
    }
    if ( typeof window.orientation !== "undefined" && ___isMobileDevice ) {
        if ( localStorage.mobile || window.navigator.maxTouchPoints > 1 || 'ontouchstart' in document) {
            if ( window.navigator.maxTouchPoints > 1 ) {
                // mobile device found
                console.log('Is mobile device? '+navigator.userAgentData.mobile); 
                alert('mobile')
                ___isMobileDevice = ''; 
            }
        }
    }
}
window.onresize = () => {
    isMobileDeviceCheck();
}
isMobileDeviceCheck();
}
 
if (_isMobile()) {
 
    //toggle element
    const advertiser = document.getElementById('toggle');
    const target = document.querySelector(".disc-tooltiptext");
    let visible = false;
    
    advertiser.addEventListener("click", function() {
        if(visible) {
            target.style.visibility = 'hidden';
            visible = false;
        } else {
            target.style.visibility = 'visible';
            visible = true;
        }
    })
}

不过，这对我有用：

if (window.innerWidth < 768) {
    const advertiser = document.getElementById('toggle');
    const target = document.querySelector(".disc-tooltiptext");
    const arrow = document.querySelector(".disc-tooltip .arrow");
    let visible = false;
    
    advertiser.addEventListener("click", function() {
        if(visible) {
            target.style.visibility = 'hidden';
            arrow.style.visibility = 'hidden';
            visible = false;
        } else {
            target.style.visibility = 'visible';
            arrow.style.visibility = 'visible';
            visible = true;
        }
    })
}

Answer 1

您需要检查用户是否使用移动设备，然后运行您的 js 代码 看到这个：

Detecting a mobile browser

例如，您可以执行以下操作：

function _isMobiel() {
//logic to check if a user using a mobile device
}

if (_isMobile()) {

    //toggle element
    const advertiser = document.getElementById('toggle');
    const target = document.querySelector(".disc-tooltiptext");
    let visible = false;
    
    advertiser.addEventListener("click", function() {
        if(visible) {
            target.style.visibility = 'hidden';
            visible = false;
        } else {
            target.style.visibility = 'visible';
            visible = true;
        }
    })
}