Generating an interactive tooltip for an image using a click event (html, scss)

I have a social media icon with a click-through URL. When someone hovers over the icon, I would like a sentence to be displayed over it (a tooltip). Using the "title" command is doing the job, but I can't style it as needed. I believe using an inline span or a span class could be a solution. Despite trying different setups following online articles, I still can't get the tooltip to show up. Can someone guide me on how the html should be structured (div class/span class) and the corresponding SCSS setup?

Below is my code without the tooltip, and I'm seeking assistance in implementing it:

<div class="socials">
<a href="https://twitter.com/user" target="_blank">
<img src="../images/twitter.png"  alt="twitter logo" >
</a>

Please note that I am relatively new to coding with only 4 weeks of experience. Therefore, I prefer something simple to grasp and troubleshoot.

I have tried using HTML/CSS setups from various websites mentioned below, but none seem to work for me:

  1. How to add tooltip to image on hover with CSS
  2. how to display Tooltip on click of an image link
  3. https://www.w3schools.com/css/css_tooltip.asp

The tooltip design on this particular site closely matches what I am looking for: 4.

However, most examples do not incorporate a clickable image feature.

I am eagerly awaiting your feedback. Thank you!

htmlcsssasstooltip

Answer №1

Create a unique tooltip using a pseudo-element

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

a {
  position: relative;
}

a:after {
  content: "this is a custom tooltip";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateY(-120%);
  padding: 0 .25em;
  background: lightblue;
  width: fit-content;
  white-space: nowrap;
  display: none;
}

a:hover:after {
  display: block;
}
<a href="https://twitter.com/user" target="_blank">
  <img src="https://picsum.photos/50/50" alt="twitter logo">
</a>

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

Looking for a way to make this HTML tab appear using ng-show and an external variable in AngularJS - seeking guidance as a beginner!

Here is the HTML code snippet controlling the tab presentation: <li class="presentation" ng-show="currentUserAuthority == LIBRARIAN" > However, there seems to be an issue with the variable "currentUserAuthority" not updating until after the web pag ...

javascripthtmlangularjs

Listing pages with a title attribute and custom order

I came across a tutorial on this website that showed how to add a custom function called "mytheme_list_pages" to the functions.php file in order to include a title attribute in a link. Although it successfully adds the title attribute to the "href" output, ...

phphtmlwordpress

Enhancing the appearance of a Textfield with PHP and HTML styling

How can I adjust the width and center text in a textfield within a container? <input type=text style=width:90%text-align:center value=" . $rows[mysql_field_name($sql_result, 3)] . "> Setting the width in the style attribute works when isolated like ...

phphtmlstyles

The overflowing pop-up container

When I trigger a popup that dynamically generates a fixed background with a centered dialog, it works well. However, on smaller monitors like laptops, tablets, and phones, the content can overflow beyond the visible area due to its fixed container, making ...

jquerycss

The Bootstrap form fails to function properly on mobile devices

On my Bootstrap form, everything works fine when entering data on the desktop version. However, I am facing an issue with the mobile version where I cannot input any information into the fields. The fields are unresponsive and not allowing me to enter an ...

htmlformstwitter-bootstrap

Troubleshooting a Peculiar Problem with Form Submission in IE10

Please take a look at the code snippet provided below: <!DOCTYPE html> <html> <body> <form name="editProfileForm" method="post" action="profileDataCollection.do"> <input type="text" id="credit-card" name="credit-card" onfocu ...

javascripthtmlsubmitinternet-explorer-10onfocus

Experience the innovative feature of React Splide Carousel where a peek of the next image is shown until you reach

My current challenge arises when I reach the last slide in the slider. I am trying to prevent it from looping and instead stop with no extra space or any other images peeking out. To address this, I have utilized the padding: '5%' option, which ...

javascriptcssreactjssplidejs

Obtaining connection data in jsPlumb can be accomplished through a variety of

I have created a compact table of nodes that allow me to drag and drop connections or manually input node IDs to establish connections between them. Despite searching through the documentation and scouring the internet for examples, I am struggling to fin ...

javascriptjqueryhtmljsplumb

I am looking to utilize jQuery to dynamically update a selected checkbox through AJAX

I've been struggling to make my ajax json script update my HTML checked box with the value from the database, but so far I haven't had any luck. Any assistance would be greatly appreciated! Here's the JS code snippet: setInterval(functi ...

javascriptjqueryhtmljsonajax

Tips for automatically adjusting a vertical side bar to fit between the browser's header and bottom

I'm having trouble with aligning my sidebar vertically between the header and the bottom of the browser window. Currently, the bottom items are extending beyond the browser's bottom edge. How can I adjust this to ensure proper alignment? Here is ...

htmlcss

Wrapping a series of grids within a parent container to manage height effectively with grid960

Testing on the following browsers: Internet Explorer, Chrome, Firefox; Check out this example of an ideal layout in a PDF: Here is the link to the direct page: While Grid systems work well for width layout, I struggle with setting height constants. In ...

htmlcsslayout

What is the process for deselecting text from a text field?

After performing a search and displaying the results on my search form, I've noticed that the text query in the textfield is being marked as selected text even though I don't want it to be. How can I prevent this? Fiddle 1) What is the best app ...

javascriptcsshtml

Having trouble with the "Cannot POST /contact.php" error message?

Help needed with ERROR "Cannot POST /contact.php". Here is the code: Code from index.html <form action="/contact.php" method="post"> <div class="w3-row-padding" style="margin:0 -16px 8px -16px"> <div class="w3-half"> ...

phphtml

Object C UIWebView adapting to HTML

How can I get a responsive HTML page to display correctly in a UIWebView in Xcode? The page adjusts properly in other iPhone browsers, but not in the UIWebView. I would prefer not to use PhoneGap for this. Any suggestions for making the HTML responsive i ...

iphonehtmlobjective-ciosuiwebview

Is the application cache in Chrome automatically cleared after a long period of inactivity?

In the HTML5 specification, the section discussing Expiring application caches begins by stating: Generally, user agents are advised not to expire application caches unless requested by the user or if left unused for a prolonged period. Does Chrome aut ...

htmlgoogle-chromecachingapplication-cache

Show the name of the current user in a WordPress form using a readonly input field

How can I display the logged-in WordPress username (display name) in a form input field that is set to readonly? I have already checked out the Function Reference/wp get current user, but haven't had any success with it. Take a look at the code snip ...

phphtmlwordpress

What is the best way to eliminate the border line from a table?

I'm in the process of creating a table and I would like to know how to remove the border line from it. Below is my code snippet: <div id="table"> <table class="table table-bordered"> <thead> <tr> & ...

htmlcss

How can I horizontally add divs until the width size is exceeded?

I am looking to make tiles flow horizontally until there is no more space, then wrap to the next line. Additionally, I want them to be responsive to different screen sizes. Here is my initial code snippet: .tile { width: 248px; height: 126px; ba ...

htmlcss

Is it possible to continuously refresh a DIV element?

After spending the past 4 or 5 hours scouring Stack and various other resources, I am still unable to find a solution to my problem. The issue at hand involves an Iframe within a page that displays 5 lines of information fetched from a database. This info ...

javascriptphpjqueryhtmlpage-refresh

Guide on traversing to various sections within a single page with Vuetify

I attempted to use HTML anchors to achieve this: <ul> <li><a href="#dashobard">Dashboard</a></li> </ul> Here is what my target looks like: <v-card id="dashboard"> <v-card-text class="document"> Con ...

htmlvue.jsvuetify.js