【问题标题】:how to display Tooltip on click of an image link [duplicate]如何在单击图像链接时显示工具提示 [重复]
【发布时间】:2019-10-10 04:42:20
【问题描述】:

点击时我有一个图标我希望它显示一个工具提示

<a class="toolclick"  href="#" ><i class="icon-ellipsis-vertical"></i></a>

脚本

<script>
    $( document ).ready( function() {
        $( '.toolclick' ).tooltip( {title: "Hooray!", trigger: "click"} ); 
    } );
</script>

点击图标时工具提示不显示

【问题讨论】:

  • 您想要悬停或点击工具提示吗?
  • 我想要点击它

标签: jquery css tooltip


【解决方案1】:

鼠标悬停在元素上时显示工具提示的方式。

如果您想在悬停事件上显示工具提示,请尝试以下代码。

<div class='toolclick'>
    Here you can write your tooltip content
</div>

$('.icon-ellipsis-vertical').hover(function(){
    $('.toolclick').tooltip({title: "Hooray!", trigger: "click"}); 
});

用于在点击时显示工具提示。

$('.icon-ellipsis-vertical').click(function(){
    $('.toolclick').tooltip({title: "Hooray!", trigger: "click"}); 
});

【讨论】:

    【解决方案2】:

    HTML代码:

     <div id="tt">Test</div>
    

    jQuery 代码:

       $('#tt').on({
      "click": function() {
        $(this).tooltip({ items: "#tt", content: "Displaying on click"});
        $(this).tooltip("open");
      },
      "mouseout": function() {      
         $(this).tooltip("disable");   
      }
    });
    

    试试这个。

    【讨论】:

    • 我希望工具提示在点击时显示,而不是在悬停时显示
    • 什么是#tt是锚类吗?
    • tt是id,我已经更新了代码。
    猜你喜欢
    • 1970-01-01
    • 2022-11-18
    • 2011-11-13
    • 2023-02-02
    • 2021-10-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多