javascript - 使用复制按钮输入，就像 github clone view

Question

我需要在 github 上开发一个带有类似工具提示的 View 。

我尝试使用 css 但无法创建准确的 ui。

我的 CSS 如下

[tooltip] {
  display: inline;
  position: relative;
}
[tooltip]:hover:after {
  background: #333;
  background: rgba(0, 0, 0, .8);
  border-radius: 5px;
  bottom: 26px;
  color: #fff;
  content: attr(tooltip);
  left: 20%;
  padding: 5px 15px;
  position: absolute;
  z-index: 99;
  white-space: nowrap;
}
[tooltip]:hover:before {
  border: solid;
  border-color: #333 transparent;
  border-width: 6px 6px 0 6px;
  bottom: 20px;
  content: "";
  left: 50%;
  position: absolute;
  z-index: 99;
}

请指教我怎样才能得到同样的效果。

Answer 1

如果您考虑 Bootstrap 、类似的或部分 Bootstrap 安装或相关类，对于什么是有值(value)的，您可以像这样实现:

HTML

<div class="container">
    <div class="col-xs-4 col-xs-push-4 martop50">
        <div class="input-group">
            <span class="input-group-addon">https://</span>
            <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
            <span class="input-group-addon"><i class="fa fa-clipboard" data-toggle="tooltip" data-placement="bottom" title="Copy to clipboard"></i></span>
        </div>
        <span class="download-btn"><button class="btn btn-sm" ><i class="fa fa-download"></i></button></span>
    </div>
</div>

CSS

.martop50{
    margin-top:50px;
}
.download-btn{
    display:inline;
    float: left;
    margin: 0px 2px;
}

.btn-group-sm>.btn, .btn-sm {
    padding: 7px 12px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

.input-group {
    position: relative;
    display: table;
    border-collapse: separate;
    width: 88%;
    float: left;
}

工具提示 JQUERY

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

您的其余工作实际上是装饰品，将 http://替换为下拉菜单。这对您来说应该很容易做到。

这是 DEMO