CODEWITHSUNDEEP
javascripthtmlcss
Adnan
Adnan

Reputation: 5075

Input with a copy button just like github clone view

I need to develop a view with similar tooltip which is on github.enter image description here

I tried using the css but was not able to create the exact ui. enter image description here

My CSS is as follow

[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;
}

Please advise how can I get the same effect.

Upvotes: 0

Views: 225

Answers (3)

tao
tao

Reputation: 90227

Here's a tooltip that opens downwards. 

[tooltip] {
  display: inline;
  position: relative;
  border-bottom: 1px dotted rgba(0,0,0,.21);
}
[tooltip]:hover {
  border-bottom: 1px solid transparent;
}
[tooltip]:hover:after {
  background: #333;
  background: rgba(0, 0, 0, .8);
  border-radius: 5px;
  top: calc(100% + 3px);
  color: #fff;
  content: attr(tooltip);
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 15px;
  position: absolute;
  z-index: 99;
  white-space: nowrap;
  box-sizing: border-box; 
 
}
[tooltip]:hover:before {
  border: solid;
  border-color: transparent transparent rgba(0,0,0,.8);
  border-width: 6px;
  bottom: -3px;
  left: calc(50% - 3px);
  content: "";
  position: absolute;
  z-index: 99;
 }
<div tooltip="I am tooltip">
  I am some content.
</div>
<hr>
Let's see a tooltip on an <span tooltip="Hey, I'm a tooltip, too!">inline element.</span>

However, the way to go here is to have tooltip arguments on the html element and build specific positioning rules for your alignment params (You probably want to have tooltip-position attribute set to top|bottom|left|right and have specific CSS for each case). For example:

[tooltip][tooltip-position="bottom"]:hover:after { /*code here*/ }

From the looks of it, considering the required coding effort and your apparent CSS knowledge, using a library might save you some time. Possible candidates:

These are only a few examples, I'm not endorsing any of them and there are plenty of others. You should research this yourself and decide based on your projects' needs.

Upvotes: 1

LOTUSMS
LOTUSMS

Reputation: 10270

For what is worth if you consider bootstrap, similar, or a partial bootstrap installation or related classes, you can achieve this like this:

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;
}

Tooltip JQUERY

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

The rest of your work would be practically cosmetics and replacing the http:// with a dropdown. That should be fairly easy for you to do.

Here is the DEMO

Upvotes: 1

guest271314
guest271314

Reputation: 1

Try removing , adjusting left:20% , also possibly padding: 5px 15px; at [tooltip]:hover:after

Upvotes: 1

Related Questions