html - 将工具提示放在按钮上方的左侧而不是右侧

Question

我试图将按钮的工具提示放在左侧而不是右侧。

左边:

工具栏:

$('#divToolbar').css({
        'top': '0%',
        'left': '0%',
        'z-index': '100',
        'position': 'absolute'
});

工具提示:

.toolbar-vertical-group > .adsk-button > .adsk-control-tooltip 
{
     left: 120%;
     bottom: 25%;
}

但在右边:

  $('#divToolbar').css({
        'top': '0%',
        'left': '96%',
        'z-index': '100',
        'position': 'absolute'
    });

.toolbar-vertical-group > .adsk-button > .adsk-control-tooltip {
    left: -120%;
    bottom: 25%;
}

它被屏幕边缘截断了。我试图添加一些填充或边距，但这似乎没有帮助..

工具栏应该在屏幕的右边缘。

Answer 1

也许尝试获得一些灵感。很难确定你想要实现什么。 编辑:也许是“如何？”会比“什么”更合适

.tools {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 30px;
  height: 120px;
  border-radius: 5px;
  background: rgba(0, 0, 0, .75);
}

.tool {
  position: static;
  width: 80%;
  height: 17%;
  margin: 10%;
  border-radius: 20%;
  background: #FFF;
}

.tooltip {
  left: calc(100% + 5px);
  position: absolute;
  display: none;
  background: rgba(0, 0, 0, .75);
  padding: 2px;
  border: 1px solid #000;
  color: #FFF;
  width: 200px;
}

.tool:hover .tooltip {
  display: block;
}

.right {
  left: auto;
  right: 5px;
}

.right .tooltip {
  left: auto;
  right: calc(100% + 5px);
}

<div class="tools">
  <div class="tool">
    <div class="tooltip">Hello there, i am tooltip!
    </div>
  </div>
  <div class="tool">
    <div class="tooltip">Hello there, i am tooltip!
    </div>
  </div>
  <div class="tool">
    <div class="tooltip">Hello there, i am tooltip!
    </div>
  </div>
  <div class="tool">
    <div class="tooltip">Hello there, i am tooltip!
    </div>
  </div>
  <div class="tool">
    <div class="tooltip">Hello there, i am tooltip!
    </div>
  </div>
</div>
<div class="tools right">
  <div class="tool">
    <div class="tooltip">Hello there, i am tooltip!
    </div>
  </div>
  <div class="tool">
    <div class="tooltip">Hello there, i am tooltip!
    </div>
  </div>
  <div class="tool">
    <div class="tooltip">Hello there, i am tooltip!
    </div>
  </div>
  <div class="tool">
    <div class="tooltip">Hello there, i am tooltip!
    </div>
  </div>
  <div class="tool">
    <div class="tooltip">Hello there, i am tooltip!
    </div>
  </div>
</div>