html 工具提示波普尔

Posted 2021-05-11

.tooltip {
    position: absolute;
    z-index: 1070;
    display: block;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    word-wrap: normal;
    white-space: normal;
    filter: alpha(opacity=0);
    line-break: auto;
}
.tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}
.tooltip-inner {
    max-width: 200px;
    padding: 3px 8px;
    color: #fff;
    text-align: center;
    background-color: #e84520;
    border-radius: 4px;
}

.tooltip{
    opacity: 1;
    &-arrow{
       border-width: 11px 6px;
    }
    &[x-placement^=top]{
      margin-bottom: 15px;
     .tooltip{
      &-arrow{
        border-top-color: rgba(0,0,0,.75);
        transform: translate(-50%, 100%);
        bottom: 0;
      }
    }
    }
    &[x-placement^=bottom]{
      margin-top: 15px;
    
     .tooltip{
      &-arrow{
        border-bottom-color: rgba(0,0,0,.75);
        top: 0;
        transform: translate(-50%, -100%);
      }
    }
    }
    &-inner{
      background-color: rgba(0,0,0,.75);
      font-size: 14px;
      max-width: 350px;
    }
}

<!-- подключаем библиотеку -->
<script type="text/javascript" src="https://unpkg.com/popper.js"></script>
<!-- подключаем универсальный скрипт, который использует API propper.js для упрощенного использование подсказок -->
<script type="text/javascript" src="https://unpkg.com/tooltip.js"></script>

<script>
    if (!Modernizr.touchevents) {
        var tooltips = document.querySelectorAll('.b-cab-teaser-bottom__btns .btn');
        [].forEach.call(tooltips, function(el) {
            var tooltip = new Tooltip( el, {
                    title: function () {
                        return this.getAttribute('data-tooltip');
                    },
                    placement: 'bottom-start',
                    html: true
                }
            );
        });
    }
    
</script>

<div data-tooltip="текст tooltip-a">Текст кнопки</div