Converting text to icons and adding tooltips using only CSS

I am faced with the challenge of transforming a hyperlink into an icon while converting the text content into a tooltip using only CSS and without the ability to modify the HTML or add JavaScript. Data is being extracted from an external source in the form of a table, and one of the columns includes hyperlinks that I wish to change into icons with text content displayed as a tooltip upon hovering.

The provided snippet demonstrates my progress so far. Is there a way to enhance the appearance and functionality of the :hover section to make it mimic a tooltip better? Alternatively, is there another method entirely to achieve the desired outcome?

.external-link {
    font-size: 0;
}

.external-link:after {
    content: ' ';
    background: url(https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196) no-repeat;
    display: inline-block;
    height: 32px;
    width: 32px;
}

.external-link:hover {
    /* While it displays the text, the appearance and functionality could be improved.. */
    font-size: initial;
}
<a href="https://www.stackoverflow.com/" class="external-link">Stack Overflow</a>

htmlcss

Answer №1

Creating a stylish tooltip can be achieved by customizing the before and after pseudo-elements. Simply insert your tooltip content into the content property or adjust your HTML code accordingly.

Your updated code should look something like this: 

.external-link {
  font-size: 0;
}

.external-link::before {
  content: 'Stack Overflow';
  visibility: hidden;
  /* Additional styling properties */
}

.external-link::after {
  content: ' ';
  background: url(image-url) no-repeat;
  display: inline-block;
  height: 32px;
  width: 32px;
}

.external-link:hover.external-link::before {
  /* Adjustments for better display */
}
<a href="https://www.stackoverflow.com/" class="external-link">Stack Overflow</a>

Answer №2

To customize your CSS, consider making the following adjustments. Keep in mind that this is just one approach and may not allow you to directly input tooltip text into the CSS.

.external-link {
    font-size: 0;
    position: relative;
}

.external-link:after {
    content: ' ';
    background: url(https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico?v=ec617d715196) no-repeat;
    display: inline-block;
    height: 32px;
    width: 32px;
}

.external-link:before {
    content: 'Text';
    position: absolute;
    display: inline-block;
    height: auto;
    padding: 2px 5px;
    width: 100%;
    display:none;
    color: white;
    font-size:initial;
    background: #00000099;
    bottom: -15px;
}

.external-link:hover:before {
    /* This code snippet reveals the hidden text on hover, but it may not be the most aesthetically pleasing or practical solution. */
    display:block;
}
<a href="https://www.stackoverflow.com/" class="external-link">Stack Overflow</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

HTML script tag failing to load

As a beginner in using scripts in HTML, I'm currently following a tutorial that suggests loading the script after the body for certain reasons. In my own code, I found that I need to place the script both in the head section and after the body. Remov ...

javascripthtmljquery

What steps should I take to set up my React project in order to eliminate .html extensions from the html files within the public

Currently, I am tackling a project that involves integrating a React app with a static website. Simply converting the HTML to JSX is not feasible because the website utilizes custom CSS that React cannot easily render without significant refactoring. I ha ...

htmlreactjsroutesnext.jscreate-react-app

Incorrect behavior of responsive background images

For the first time, I am working on a school project that requires me to create a responsive website. I am following the "mobile first" approach. On stackoverflow, I came across a helpful way of making background images responsive: background-image: url(. ...

javascripthtmlcssbackground-imageresponsive

Modifying the appearance of InputText through CSS encapsulation

I'm a newbie to using Blazor and I'm currently experimenting with changing the style of InputText by utilizing css isolation. Interestingly, I've managed to successfully change the style when setting it inline or internally, however, things ...

cssasp.net-coreblazor.net-7.0asp.net-core-css-isolation

Switch the checked status of an input dynamically using jQuery function

It seems like I might be overlooking something quite obvious, but I can't figure out why this jquery function is behaving inconsistently. HTML: <label id="income_this_tax_year"> <div class="left"> <p>Have you had Self-Employm ...

javascriptjqueryhtml

Discovering the way to retrieve background height following a window resize using jQuery

Is there a way to obtain the background height once the window has been resized? div { background-image: url(/images/somebackground.jpg); background-size: 100% 90%; background-repeat: no-repeat; width: 70%; background-size: contain; ...

javascriptjquerycssbackground

Iterating through a SASS map and retrieving the next item in the loop

I am working with a color array that looks like this: $colors: ( 'primary': '#aaa', 'secondary': '#bbb', 'color-3': '#ccc', 'color-4': '#ddd', 'color-5': & ...

csssass

Is there a way to display list items in rows of three?

I just bought this theme and I'm looking to customize it so that only three items appear in a row on the homepage instead of four. Can this be achieved with CSS or JQuery? Here is the link to the theme: Here is the link Is it possible to use CSS to c ...

jquerycsswordpress

Create a precise layout for a footer design

I recently revamped a footer using a new UI framework in an attempt to improve it. Despite my efforts to align it properly, I encountered issues with overlapping on the right side. I experimented with using <div> and applying styles to create a diffe ...

cssreactjsmaterial-uifooter

Padding on a flex item nudges a neighboring flex item out of place

Encountering an issue - within a div container, I have 4 nested divs using the grid system. Oddly enough, the third div in the grid is not behaving as expected. When setting a margin-bottom for this div, instead of creating space at the bottom, it pushes ...

htmlcssflexboxmargin

Restore radio input functionality with a transparent method

I've experimented with various methods, including traditional form reset techniques and jQuery solutions from different sources on the internet without success. Snapshot: The Objective: I am working on a sortable list where users are required to ra ...

javascriptjqueryhtmlcssradio-button

Having trouble with tabs in jQuery?

I'm having trouble setting up tabs in a reservation form with 3 tabs that include text boxes for user input. I can't seem to get it working properly and I'm not sure where I've gone wrong. Could it be due to the placement of the content ...

javascriptjqueryhtmlcssjquery-ui-tabs

Encountering a Jquery TypeError while trying to update the content on

I am currently working on a project where I aim to create a Java Spring application that functions as follows: upon receiving a GET request, the application sends an HTML page with a form. When the form button is clicked, a POST request containing XML cont ...

javascriptjqueryhtml

Ways to display or conceal a textbox depending on the choice made from a dropdown list

I'm a beginner in using jquery. I'm trying to create a dropdown menu with different options. When "Others" is selected from the dropdown, I want a text box to be displayed. Can someone provide guidance on how to achieve this? Here is the code sni ...

jqueryhtml

Deactivate zoom on the viewport and display the entire page

Hello, I am currently working on my website www.ecogo.io and I am trying to get the entire page to display instead of just a portion. However, I am encountering an issue where the page loads zoomed in on mobile browsers like Chrome for Android, whether Des ...

csshtmlviewport

Showing php outputs within a container

I want to outline my goal in detail. I have a setup with 3 pages: index.html, form.html, and result.php. By using jQuery, when the button on index.html is clicked, form.html is loaded inside a div within index.html. Upon submitting form.html, it calls resu ...

phpjqueryhtmlajax

It seems that CSS shadows are working perfectly on Firefox and Chrome, but unfortunately, they are not displaying on

I have encountered an issue where CSS shadows appear fine on Firefox and Chrome, but do not display in Internet Explorer. Below is the code I am using: -moz-box-shadow: 0 0 20px #000; Can anyone provide a solution for this compatibility problem? Thank ...

htmlcss

Having trouble aligning my slider in the center

Despite trying various methods to center this slider, such as using align="center" and different margin styles on the images and slider div itself, I am still facing alignment issues. Any assistance would be greatly appreciated. This is my first time posti ...

javascripthtmlcss

Does the sliding transition between views function properly, even though the view appears on top of the header and behind the footer

My angular app is running smoothly, but now I want to add animations between views. When a user clicks on a link in the navbar, I want the view to slide to a different one. I was inspired by this example: Sliding between views. However, when I implemented ...

htmlcssangularjsng-animateangularjs-view

passing a PHP variable into an HTML input field

Recently, I've encountered a problem where I need to transfer PHP variables to HTML input fields. echo $ManuellTagnavnMain; for ($n = 0; $n < 6; $n++) { print_r(++$ManuellTagnavnMain.PHP_EOL); } I'm looking for a way to pass these values ...

javascriptphphtml