Question

我设计了一个仅使用HTML和CSS的工具提示。以下是我的代码。单击按钮时应显示工具提示。

    <div class="box" ng-show="displayTooltip">
              <ul>
                <li>Coffee</li>
                <li>Tea</li>
                <li>Milk</li>
              </ul>
    </div>
   <button ng-click="displayTooltip = true" >OK</button>

CSS代码

div.box {
    height:100px;
    width:200px;
    background-color:#eee;
    border:1px solid #aaa;
    position:relative;              
    top:50px;
    left:50px;
    border-radius:7px;
}

.box:before {
    position:absolute;              
    right:-20px; 
    top:5px;
    content:'';                     
    height:0;
    width:0;
    border:10px solid transparent;
    z-index:1;                      
}

.box:after{
    position:absolute;          
    right:-17px;    
    top:25px;
    content:'';                         
    height:0;
    width:0;
    border-top: 8px solid transparent;
    border-left: 8px solid #aaa;
    border-right: 8px solid transparent;        
    border-bottom: 8px solid transparent;
    z-index:1;                  
}


ul{

    color:#D70A0A;
    list-style-type:none;
    margin:0;
    padding:0;
    }
    li{
        border-bottom:2px solid black;
        padding:5px;
        }
        li:last-child{
        border-bottom:none;
        }
    li:hover{

    color:black;
    }

我想在按下按钮后显示这个工具提示完全按下按钮。我想隐藏工具提示，当我点击（工具提示和按钮）时。任何人都可以帮我这样做。

Answer 1

类似的东西：

<style>
    div.box {
        display: none;
        position: absolute;
    }

    div.box.show {
        display: block;
    }
</style>

<div class="box" ng-show="displayTooltip">
    <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>
</div>

<button ng-click="displayTooltip = true">OK</button>

<script>
    var button = document.querySelector('button');
    var box = document.querySelector('.box');
    document.body.addEventListener('click', function () {
        box.classList.remove('show');
    });
    button.addEventListener('click', function (e) {
        e.stopImmediatePropagation();
        box.classList.add('show');
        box.style.left = e.target.offsetLeft + 'px';
        box.style.top = (e.target.offsetTop + 
                         e.target.offsetHeight) + 'px';
    });
</script>

注意：确保.box的容器具有position：relative

在按钮上单击使用HTML和CSS将工具提示左侧显示为按钮

1 个答案: