【问题标题】:Show tooltip without double tapping for field?在不双击字段的情况下显示工具提示?
【发布时间】:2016-03-28 18:47:04
【问题描述】:

如果用户使用移动设备。并单击以编辑字段。如果我有该字段的工具提示,他必须单击两次。一次显示工具提示,然后另一个用于编辑字段。我希望这就像在计算机上一样单击一下。

我们如何使工具提示在用户只需点击一次以显示工具提示并在移动设备上编辑字段的情况下工作?

<div data-toggle="tooltip" title="Tooltip Title, Baby!">
  <%= f.number_field :days_challenged, value: 10 %> Day Challenge
</div>

<script>
  $('[data-toggle="tooltip"]').tooltip()
</script>

我正在使用tooltip from bootstrap

【问题讨论】:

  • AFAIK 我们做不到。这就是 Bootstrap 的工具提示问题。他们建议禁用移动设备的工具提示。检查此问题以获取更多详细信息:github.com/twbs/bootstrap/issues/6232

标签: javascript ruby-on-rails ruby twitter-bootstrap tooltip


【解决方案1】:
<div onclick="$(this).tooltip('show')" data-toggle="tooltip" title="tooltip text" class="alert alert-danger alert-dismissible fade in" data-dismiss="alert" aria-label="Close">
         div content                           
</div>

onclick="$(this).tooltip('show')" 在点击时显示工具提示。

那么你可以使用$(this).tooltip('hide')方法再次隐藏它。

对于编辑部分: 我不确定你编辑字段是什么意思,你能解释一下吗?

编辑:

<script>
$( "target" ).click(function() {
  $(this).tooltip('show');
});
</script>

【讨论】:

  • 如果用户使用移动设备。并单击以编辑字段。如果我有该字段的工具提示,他必须单击两次。一次显示工具提示,然后另一个用于编辑字段。我希望这就像在计算机上一样单击一下。
  • 尝试将 onclick="$(this).tooltip('show')" 放在输入中,或者编写一个脚本:$(document).ready(function(){ $('input' ).click(tooltip('show')); })
【解决方案2】:

我发现了另一个类似的工具提示 UI。 你可以找到它here

我在自己的手机上测试过,它显示正确;您只需单击一次。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2013-12-09
    • 2012-01-26
    • 1970-01-01
    • 2021-11-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多