Question

我必须在没有悬停的情况下显示工具提示并点击。这是我用于保持打开工具提示而不悬停或点击但不能正常工作的示例。它在悬停时显示。请您帮助我吗？

HTML

<span class="field-tip">
 Keep open tooltip
<span class="tip-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis tellus ac lectus porta volutpat. </span>
 </span>

的CSS

/* Hover tooltips */
.field-tip {
    position:relative;
}
    .field-tip .tip-content {
        position:absolute;
        top:-10px; 
        right:9999px;
        width:200px;
        margin-right:-220px; 
        padding:10px;
        color:#000;
        background:#F9E79F;
        opacity:0;
        -webkit-transition:opacity 250ms ease-out;
        -moz-transition:opacity 250ms ease-out;
        -ms-transition:opacity 250ms ease-out;
        -o-transition:opacity 250ms ease-out;
        transition:opacity 250ms ease-out;
            border-radius: 10px;
    }

        .field-tip .tip-content:before {
            content:' '; 
            position:absolute;
            top:50%;
            left:-16px; 
            width:0;
            height:0;
            margin-top:-8px; 
            border:8px solid transparent;
            border-right-color:#F9E79F;
        }
        .field-tip:hover .tip-content {
            right:-20px;
            opacity:1;
        }

Answer 1

.field-tip {
  position: relative;
}
.field-tip .tip-content {
  position: absolute;
  top: -10px;
  right: 9999px;
  width: 200px;
  margin-right: -220px;
  padding: 10px;
  color: #000;
  background: #F9E79F;
  opacity: 0;
  -webkit-transition: opacity 250ms ease-out;
  -moz-transition: opacity 250ms ease-out;
  -ms-transition: opacity 250ms ease-out;
  -o-transition: opacity 250ms ease-out;
  transition: opacity 250ms ease-out;
  border-radius: 10px;
}
.field-tip .tip-content:before {
  content: ' ';
  position: absolute;
  top: 50%;
  left: -16px;
  width: 0;
  height: 0;
  margin-top: -8px;
  border: 8px solid transparent;
  border-right-color: #F9E79F;
}
.field-tip .tip-content {
  right: -20px;
  opacity: 1;
}

<span class="field-tip">
 Keep open tooltip
<span class="tip-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis tellus ac lectus porta volutpat. </span>
</span>

使用.field-tip .tip-content { right: -20px; opacity: 1; }删除:hover

Answer 2

您可以通过悬停点击事件绑定来通过jquery / javascript实现此目的。没有javascript代码就不可能。

＆＃13;

$(document).ready(function(){

$(".field-tip").hover(function(){
$(this).addClass('active');
});
$(".field-tip").click(function(){
$(this).removeClass('active');
});
  
});

＆＃13;

/* Hover tooltips */
.field-tip {
    position:relative;
}
    .field-tip .tip-content {
        position:absolute;
        top:-10px; 
        right:9999px;
        width:200px;
        margin-right:-220px; 
        padding:10px;
        color:#000;
        background:#F9E79F;
        opacity:0;
        -webkit-transition:opacity 250ms ease-out;
        -moz-transition:opacity 250ms ease-out;
        -ms-transition:opacity 250ms ease-out;
        -o-transition:opacity 250ms ease-out;
        transition:opacity 250ms ease-out;
            border-radius: 10px;
    }

        .field-tip .tip-content:before {
            content:' '; 
            position:absolute;
            top:50%;
            left:-16px; 
            width:0;
            height:0;
            margin-top:-8px; 
            border:8px solid transparent;
            border-right-color:#F9E79F;
        }
        .field-tip.active .tip-content {
            right:-20px;
            opacity:1;
        }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<span class="field-tip">
 Keep open tooltip
<span class="tip-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis tellus ac lectus porta volutpat. </span>
 </span>

＆＃13;

Answer 3

试试这个：

<html>
    <title>This is test</title>
    
    <head>
        
        <style>
            
            .field-tip {position:relative;top: 38px;}
            
            .tip-content {
                
                position:absolute;top:-10px;right:9999px;
                width:200px;margin-right:-220px;padding:10px;
                color:#000;background:#F9E79F;opacity:0;
                -webkit-transition:opacity 250ms ease-out;
                -moz-transition:opacity 250ms ease-out;
                -ms-transition:opacity 250ms ease-out;
                -o-transition:opacity 250ms ease-out;
                transition:opacity 250ms ease-out;
                border-radius: 10px;
            }
            
            
            .tip-content:before {
                
                content:' ';position:absolute;top:50%;left:-16px; 
                width:0;height:0;margin-top:-8px; 
                border:8px solid transparent;border-right-color:#F9E79F;
            }
            
            .tip-content {
                
                left:150px;top: 10px;opacity:1;
            }
        </style>
    </head>
    <body>
        
        <span class="field-tip">Keep open tooltip</span>
        
        <span class="tip-content">
            
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis tellus ac lectus porta volutpat. 
        
        </span>
        
    </body>
</html>

如何使用HTML和CSS或Jquery保持活动工具提示？

3 个答案: