Question

我已经实施了MaterializeCSS tooltip。每当特定文本短语悬停时，都会触发tooltip。它在桌面上运行良好，但在移动设备上不完美。

当触摸/点击该短语（通过iOS）时会出现tooltip 'box'，但短暂出现后文本会消失。 tooltip 'box'会继续显示，直到用户触摸/点击为止。

基本上，错误是消失的文本。我自然希望文本保留在框中，直到用户触摸/点击为止。

我添加了以下 css ，以确保tooltip适用于桌面。此代码还可确保tooltip 'box'在用户点击/触摸时消失：

body { 
    cursor: pointer;    
}

我添加了这个，因为它最初被告知here，虽然后来的海报正确地指出这种方法可能会导致其他怪癖，例如我所看到的那个。

工具提示的 HTML 是：

<a class = "tool tipped light" data-position="bottom" data-delay="100" data-tooltip="here be the tooltip!">
    the text to hover over
</a>

所以，在句子中，如何通过移动设备确保tooltip text在点击时不会立即消失？

更新：我添加了以下javascript：

$(document).ready(function(){
    $('.tooltipped').tooltip({delay: 100});
    $('.tooltipped').trigger('mouseleave');
    $('.tooltipped').trigger('needs click');
});

目前，点击的第一个工具提示将会打开，但如果用户首先点击，后续的工具提示将显示消失的文字。如果用户点击另一个工具提示，那么他们的文本将正确呈现： - /

MaterializeCSS工具提示文字在移动版

0 个答案: