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:

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.

javascripthtmlcss

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

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

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:

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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How come ng-class doesn't apply to a specific class name?

I recently wrote the following code: <style> .dotted { border:dotted; } </style> .... <p ng-style="mystyle" ng-class="dotted">{{ answer }}</p> My intention was to have the paragraph element enclosed within a ...

javascriptcssangularjsng-classangularjs-ng-class

Unable to pass data to the onChange event for the material-ui datePicker components

Need help with a form that includes a material-ui DatePicker. Here is an example: <DatePicker name="startDate" autoOk={true} floatingLabelText="startDate" onChange={(x, event) => {console.log(arguments);}} /> When I change the date, the console ...

javascriptreactjsdatepickerreduxmaterial-ui

Customize the appearance of buttons and tabs located in the header section

Front end development is new to me and I'm trying to learn, but I've hit a roadblock. I have 4 components - 2 buttons and 2 tabs that I want to style in a header at the top of the page. Specifically, I want one button on the top left with padding ...

jqueryhtmlcssangularjs

Converting php array submitted from a form using ajax

I have a form on my website that collects user input and sends it to an email address using php. The form includes a checkbox input where users can select multiple options, which are then stored in an array. However, when the form is submitted, the email r ...

javascriptphpjqueryarraysajax

Update a variable in one component class using another component

My Hue class in a component contains a variable that I'm trying to modify: export default class Hue extends Component { state = { toggleState : false, toggleWhite : false } render(){...} ... } Within this component, I can chang ...

javascriptreactjsreact-native

Troubleshooting on Safari for iOS

As I work on my portfolio website using only HTML 5 without any JavaScript, I encountered an issue with the about page not functioning properly on iPhones. There seems to be a problem with scrolling as some elements are fixed and do not move along with t ...

htmlioscssdebuggingsafari

Tips for stopping Angular from rendering a directive that is producing incorrect results after an error is thrown

My directives have a template and a compile function that modifies the template. Occasionally, Angular fails to recognize jQuery (and defaults to using jqLite), causing my compile to encounter errors. Despite this, Angular continues to render the directive ...

javascriptangularjsdirective

What method can be used to keep Chromium open while using Puppeteer?

I am trying to figure out how to launch only one instance of Chromium from my first script and then connect to it from subsequent scripts. I am aware of the puppeteer.connect() method, but the issue is that when I start the script responsible for launching ...

javascriptnode.jschromiumpuppeteer

Encountering the issue "error TS2339: Property 'user' is not available on type 'Object'."

issue TS2339: The property 'user' is not found on the type 'Object'. export class UserAuthentication implements OnInit { user = new BehaviorSubject<Userlogin>(null); constructor( private route: ActivatedRoute, private rou ...

htmlnode.jsangularjsmongodb-query

Utilizing Cache Features in the XDK Application Framework API

I recently posted a question in the Intel Developer Zone forum for XDK, but unfortunately have not received any answers yet. So I decided to seek help here: My project involves creating a simple HTML5-only periodical website that will be packaged as a sta ...

htmlmobileintel-xdk

What is the proper method for storing user registration information in the database so that it can be easily retrieved and accessed later? (Error message)

User.cs: An error is occurring in the User class where 'User' is not a valid type in the context of TestBlazor project. It happened when attempting to save user registration data. using System; using System.Collections.Generic; using S ...

c#htmlcssblazor

Is there a way to divide my time during work hours using Javascript?

This is just a simple example. 9.00 - 18.00 I am looking to modify the schedule as follows: 9.00 - 10.00 10.00 - 11.00 11.00 - 12.00 12.00 - 13.00 13.00 - 14.00 14.00 - 15.00 15.00 - 16.00 16.00 - 17.00 17.00 - 18.00 The current code implementation see ...

javascriptnode.jsmomentjs

"Steps to retrieve the button's ID when using the onClick event in Reactjs

Currently, I am working with Reactjs and Nextjs. I am utilizing functional components instead of classes. Within a loop, I have buttons and I am attempting to retrieve the id of the button when clicked using "onClick". Unfortunately, I am encountering th ...

javascriptreactjsnext.js

What is the best way to sum up all the values per month from a JSON file in React and showcase it as a single month using ChartJs?

Apologies if I didn't explain my question clearly enough. As a junior developer, sometimes it's challenging to ask the right questions, and I'm sure we've all been there, right? The data in my JSON file is structured like this: [ { &qu ...

javascriptreactjsjsonchart.js

The jQuery keyup event initiates multiple times, increasing exponentially with each trigger

I recently added a search bar with auto-complete functionality to my website. The search bar queries the database for elements that begin with the text entered by the user as they type. Although it works well, I noticed that every time the user inputs ano ...

javascriptjqueryhtmldjangokeyup

Issue with excessive content causing scrolling difficulty

I've created CSS for a modal dialog, but I'm facing an issue. When the content exceeds the vertical space of the wrapper, the scrolling functionality doesn't work correctly. Although I can scroll, it's limited and I can't reach th ...

htmlcss

Understanding the Class Syntax in Node.js

I'm having trouble understanding how to retrieve the value from a Node JS Class [Trying to use [Symbol.iterator '']]alert(Hello, ${this.name}!); Is there another way to approach this? class User { name = "Anonymous"; sayHi() { ...

javascriptmysqlnode.js

There appears to be an issue with the compilation of the TypeScript "import { myVar }" syntax in a Node/CommonJS/ES5 application

In my Node application, I have a configuration file that exports some settings as an object like this: // config.js export var config = { serverPort: 8080 } Within another module, I import these settings and try to access the serverPort property: // ...

javascriptnode.jstypescriptecmascript-6es6-modules

Learn how to efficiently reload a card in React upon submitting new data

Is there a way to automatically refresh the card component after submitting data without having to manually refresh the page? I've tried using useEffect but it's not updating the data even though the value is changing. Any suggestions on how to r ...

javascriptreactjsuse-state

Apply a chosen style to the element that was clicked on, while removing the style from the rest

Here is an example of my ul li structure: <div id="categoryTree"> <ul> <li id="cat_15"> <a class="hasSubCat" href="javascript:void(0);"><img src="images/icons/folder.gif" border="0" alt="Folder" title=" Folder ">N ...

javascriptjqueryhtmlcss