Question

我有输入字段本身和相关标签的所有选项的工具提示，但不幸的是它们不会在平板电脑模式下显示在手机或PC上。

那么我怎样才能让它们发挥作用，或者通常的替代方案。

我理解在触摸屏上你没有鼠标指针盘旋的概念，但我至少可以用手指触摸标签，这会导致显示工具提示，我该如何制作发生了。

   <input name="preview" id="preview" type="checkbox" title="Preview only, a license is required to actually make changes" disabled="disabled">
    <label for="preview" id="previewlabel" class="label_disabled" title="Preview only, a license is required to actually make changes">
Preview only</label>

Answer 1

您可以更改定位并使用您的代码。

* {
  transition: 0.5s;
}

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
}

p, h1 {
  margin: 0;
}

.wrapper {
  position: relative;
}

.tooltip {
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  width: 1000px;
  max-width: 50vw;
  opacity: 0;
  background: #333;
  padding: 5px;
  color: #eee;
  border-radius: 5px;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  top: 150%;
}

.arrow {
  width: 0;
  height: 0;
  border: 15px solid transparent;
  border-bottom-color: #333;
  position: absolute;
  top: -30px;
  align-self: center;
}

.wrapper:hover .tooltip {
  opacity: 1;
}

<div class="wrapper">
  <h1 class="text">Hover on Pc</h1>
  <p>(Click Here Mobile)</p>
  <div class="tooltip">
    <div class="arrow"></div>
    <p class="tooltip_text">This is the tooltip</p>
  </div>
</div>

Answer 2

我的CSS中的媒体查询旨在使其仅适用于移动设备上的较小屏幕。

然后获取title属性的内容并在标签后显示它。（您可以添加任何您喜欢的格式 - 填充，边距，圆角等。）

[点击＆＃39;运行代码段＆＃39;然后＆＃39;整页＆＃39;然后将浏览器窗口的大小调整为小于768px宽，以使其正常工作。]

＆＃13;

@media screen and (max-width: 768px) {
  label:after {
     content: attr(title);
     background-color: #333;
     color: #fff;
     display: block;
     margin-top: 2px;
  }
}

＆＃13;

<input name="preview" id="preview" type="checkbox" title="Preview only, a license is required to actually make changes" disabled="disabled">
    <label for="preview" id="previewlabel" class="label_disabled" title="Preview only, a license is required to actually make changes">
Preview only</label>

＆＃13;

Answer 3

我认为最好的解决方案是实现一个悬停工具提示在完成时会显示，我会怎么做？

$( document ).ready(function() {
    
    $('.show-tooltip').on('mouseover', function() {
        
        $(this).next().css('display','inline-block');
    });
       
    $('.show-tooltip').on('mouseout', function() {
        $(this).next().css('display','none');
    });
});

.triangle-isosceles.left {
    margin-left: 50px;
    background: #dedede;
}

.triangle-isosceles {
    position: relative;
    padding: 15px;
    margin: 1em 0 3em;
    color: #000;
    background: #dedede;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.triangle-isosceles.left:after {
    top: 16px;
    left: -50px;
    bottom: auto;
    border-width: 10px 50px 10px 0;
    border-color: transparent #dedede;
}
.triangle-isosceles:after {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 50px;
    border-width: 15px 15px 0;
    border-style: solid;
    border-color: #dedede transparent;
    display: block;
    width: 0;
}

.tooltip {
  width: 60%;
  display: none;
}

.show-tooltip {
    padding: 35px 5px;
    display: inline-block;
}

.group {
    padding: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="group">
  <input name="preview" id="preview" type="checkbox" disabled="disabled">
  <label for="preview" id="previewlabel" class="label_disabled show-tooltip">Preview only</label>
  <div class="tooltip triangle-isosceles left">Preview only, a license is required to actually make changes</div>
</div>

语音气泡样式工具提示改编自Nicholas Gallagher

请全屏查看演示，否则看起来不对。（您需要调整它以适应移动设备）

Answer 4

悬停在触摸上的唯一区别是你必须按住任何与之相关的触发器，js或css才能被激活...所以它可能是编码不好，说到哪个

您确实意识到您还没有提供＆＃34; Tooltip＆＃34;代码本身吗？它可能是一个定位问题，因为工具提示在附加时可能会因为代码而与屏幕重叠......

测试它：在悬停时提供背景或颜色变化，现在继续联系，看看悬停是否正常工作，如果你知道悬停的工作......但是工具提示不是，所以提供代码。如果它没有，那么再次....提供代码！

Answer 5

试试这个：

＆＃13;

  label:hover:after {
     content: "Preview only, a license is required to actually make changes";
     background-color: #333;
     color: #fff;
     display: inline;
     padding: 3px;
     border-radius: 3px;
     margin-left: 6px;
  }

label {
    padding: 3px;
     border-radius: 3px;
    display: inline-block;
}

＆＃13;

<input name="preview" id="preview" type="checkbox" disabled="disabled">
    <label for="preview" id="previewlabel" class="label_disabled">
Preview only</label>

＆＃13;

在平板电脑上运行时，如何使工具提示在Webapp上运行

5 个答案: