Integrate an input field with a copy function similar to the GitHub clone view

Question

Integrate an input field with a copy function similar to the GitHub clone view

Can anyone help me create a view with a tooltip similar to the one on Github? You can see the example here: https://i.sstatic.net/iBSof.png

I attempted to use CSS but couldn't quite replicate the exact UI. Here is my current CSS code:

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

If you have any advice on how I can achieve the desired effect, please let me know.

javascript html css

Answer 1

Answer №1

If you're looking to implement a bootstrap-like design or partially integrate bootstrap classes, you can achieve the desired layout using the following code:

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 remaining work involves cosmetic adjustments and replacing "http://" with a dropdown menu, which should be straightforward for you to handle.

Check out the DEMO here!

Answer 2

If you're looking to implement a bootstrap-like design or partially integrate bootstrap classes, you can achieve the desired layout using the following code:

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 remaining work involves cosmetic adjustments and replacing "http://" with a dropdown menu, which should be straightforward for you to handle.

Check out the DEMO here!

Answer 3

Answer №2

Consider taking out, modifying left:20%, and maybe even adjusting padding: 5px 15px; within [tooltip]:hover:after

Answer 4

Consider taking out, modifying left:20%, and maybe even adjusting padding: 5px 15px; within [tooltip]:hover:after

Answer 5

Answer №3

Discover a tooltip design that gracefully 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="Behold! I am the tooltip">
  Behold! I am some content.
</div>
<hr>
Let's embrace a tooltip on an <span tooltip="Hey, look at me, I'm a tooltip too!">inline element.</span>

However, the best approach is to include tooltip attributes in the HTML element and create specific positioning rules for your alignment parameters (Consider setting the tooltip-position attribute as top|bottom|left|right and creating custom CSS for each case). For instance:

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

Upon further review, it may be beneficial, given your CSS proficiency and the required coding efforts, to utilize a library. Here are some possible options:

Bootstrap Tooltip
jQuery tooltip
Tooltipster
QTip2
Tipped
Tooltipsy

These examples are just a starting point, and I do not endorse any particular one. There are numerous others available, so research thoroughly and choose based on your project requirements.

Answer 6

Discover a tooltip design that gracefully 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="Behold! I am the tooltip">
  Behold! I am some content.
</div>
<hr>
Let's embrace a tooltip on an <span tooltip="Hey, look at me, I'm a tooltip too!">inline element.</span>

However, the best approach is to include tooltip attributes in the HTML element and create specific positioning rules for your alignment parameters (Consider setting the tooltip-position attribute as top|bottom|left|right and creating custom CSS for each case). For instance:

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

Upon further review, it may be beneficial, given your CSS proficiency and the required coding efforts, to utilize a library. Here are some possible options:

Bootstrap Tooltip
jQuery tooltip
Tooltipster
QTip2
Tipped
Tooltipsy

These examples are just a starting point, and I do not endorse any particular one. There are numerous others available, so research thoroughly and choose based on your project requirements.

Integrate an input field with a copy function similar to the GitHub clone view

Answer №1

Answer №2

Answer №3

Similar questions

Issue with Component not displaying properly upon refreshing

Instructions on making a Popup appear after a specified duration of mouse inactivity on a webpage

Is there a way to automatically scroll the parent page's top when the user navigates within an iframe?

Issues with babel plugin-proposal-decorators failing to meet expectations

The method Object.keys.map does not return the initial keys as they were in the original object

Updating language settings on-the-fly in a Vue application does not automatically refresh the translated content displayed on the website

Compiling TypeScript into JavaScript with AngularJS 2.0

What is the most efficient way to update a counter when a button is clicked in React and display the result on a different page?

Expanding image in table data to full screen upon clicking using jQuery

Failure to append an object to the array occurs when submitting an HTML form

Troubleshooting Bootstrap 4 Modal in JavaScript and Vue: Uncaught ReferenceError: $ is not defined

Unable to dynamically load a component into page.tsx within Next.js

What could be the reason for the issue `injection "store" not found` showing up when attempting to call `this.store.commit()`?

What is the best way to notify a user one minute before their cookie expires using PHP and JavaScript?

Using nested ternary operations in React can cause issues with accessing local variables

Loading images efficiently using JavaScript

Creating a div that automatically scrolls along with the page as it reaches the edges of the viewport

Execute a function before the page reloads in ASP.NET with the help of JQuery

Combine two languages into a single <p>

Deleting an element from an HTML page with jQuery