display a tooltip for a disabled image hyperlink in JSP

I am currently working on a popup menu that displays different images, each with its own unique link. Here is an example of what a single menu element looks like: 

<li class="button-link" data-idp="idfirst">
<s:a href='%{linkMethod("linked")}' class="original-styling blocked"><span class="sr-only">Linked ID</span><img src="LinkedImage" onerror="this.src='ErrorImg'; this.onerror=null;" alt="linked ID" /></s:a>

The CSS styles are primarily for aesthetic purposes, but there is a specific style for the 'blocked' element which includes:

.original-styling.blocked {
  pointer-events: none;
  cursor: default;
}

In addition, I am trying to implement a tooltip similar to the one shown in this example: https://www.w3schools.com/css/css_tooltip.asp

Unfortunately, I have been unable to get the tooltip to work when the '.blocked' class is active. Even just having the title attribute function would be a step in the right direction.

My main constraint is that I am limited to using JSP struts and Java, without the ability to incorporate jQuery or JavaScript. Any suggestions or insights would be greatly appreciated. Thank you!

javahtmlcssjsp

Answer №1

By utilizing the pointer-events: none; attribute, you can prevent the tooltip popup from appearing when the mouse hovers over it.

Alternatively, adding a disabled tag to your HTML element allows for the functionality of a blocked link while still enabling the tooltip to function.

Check out this demonstration to see it in action:

<!DOCTYPE html>
<html>
<style>

.originalStyling.blocked {
  cursor: default;
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.originalStyling .originalStylingtext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.originalStyling:hover .originalStylingtext {
  visibility: visible;
}
</style>
<body>

<s:a href="%{linkMethod("linked")}" class="originalStyling blocked" disabled>Linked ID
  <span class="originalStylingtext">
    <img src="https://techcabal.com/wp-content/uploads/2014/10/css3.jpg" onerror="this.src='ErrorImg'; this.onerror=null;" alt="linked ID" style="width:90%" />
  </span>
</s:a>


</body>
</html>

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

I wish to have the option to choose a courseId when creating a new hole by clicking the "create new hole

I'm currently developing a golf score tracking application. I have set up a database with tables for Rounds, Courses, and Holes. The Hole table contains a foreign key that links to the CourseId, allowing me to associate each hole with a specific cour ...

c#htmlasp.net-mvcentity-framework

I would like to explore a multithreading example from the Head First Java book. Could you

class BankAccount { private int balance = 100; public int getBalance() { return balance; } public void withdraw(int amount) { balance = balance - amount; } } public class ThreadExample implements Runnable{ private BankAccount account = new BankA ...

javamultithreading

anchor to # inquiry

I'm curious about the href link and its usage, I tried looking it up online but didn't find much information. Here is an example of a href link I have: <a href='#' onclick='openSerialWindow();return false;'><h:output ...

htmlhreflocation-href

Creating an interactive map on WordPress: A step-by-step guide

I have successfully created a clickable image on Codepen <div style="width: 1000px; height: 993.73px;"> <img src="https://www.dyfedarchaeology.org.uk/wp/wp-content/uploads/Testmap.svg" alt=&q ...

javascripthtmlcsswordpressclickable-image

Tips for utilizing the <img src> tag within Google Apps Script

I am trying to incorporate an image into a google apps script using the src attribute. I have specified the folder id and path, but unfortunately the image is not displaying as expected. The folder has been shared here for reference. Any assistance with t ...

htmlgoogle-apps-script

Testing PHP files during the connection of an Android device to a server

I am currently working on developing an Android app that needs to connect to a database. Since I don't have a web host to store the database, I am using Wamp for testing purposes. To create the Android app, I opted to use Intellij Idea and managed to ...

javaphpandroidintellij-idea

Personalized border color for radio buttons

What is the best way to change the color of my radio button along with its border color when the radio button is selected? My code is functioning properly, except for the border color when the radio button is selected. Below is the CSS code that I have ad ...

htmlreactjscsscss-selectors

Photo positioned on top of the form with Bootstrap 5

I am working on creating a responsive webpage using Bootstrap, where I need to display a large image above a form. To manage the size of the image, I have placed it inside a "peek-view" container which allows scrolling both horizontally and vertically to v ...

htmlcssbootstrap-5

Increasing a Column in MySQL/SQL

Keeping track of points/stats by using a column that auto-increments can be tricky. The goal is to have the column increment when a row is updated, not when a new row is added. To illustrate, running an update command should increase the "count" column for ...

javamysqlsqldatabase

Creating a windows task bar addition in Java that resembles the functionality of laptop battery widgets

I am hoping to enhance the functionality of my Windows taskbar by having my app automatically dock itself when minimized. To better illustrate this, I have created a visual representation in the following image: https://i.sstatic.net/aCJrh.jpg If anyone ...

javawindowsswingtaskbar

Creating a dynamic list filter using JavaScript and three select boxes

Looking for a way to implement a similar feature to the one on this webpage: I will be showcasing a list of brands on the page, with each brand requiring three pieces of information: Starting letter Store (multiple options) Category (multiple options) ...

phpjavascripthtmlwordpress

Displaying items in a row when the navbar is collapsed: Bootstrap 4 tips

Is there a way to change the display of items in the collapsed navbar so that they appear next to each other rather than in a column? You can see how it currently looks here: Navbar collapsed. My goal is to have the image displayed next to the username ins ...

htmlcssbootstrap-4

The overflow:hidden property does not completely conceal the parent div when it has a border-radius applied

I've noticed some residual overflow in my simple layout that becomes quite apparent when setting a border radius. The expected behavior is for the white div class='inner' to fully cover the red div class='outer'. However, there see ...

htmlcssreactjs

A technique for adding a border to a Mat Card that mimics the outline of a Mat Form Field within a custom

I am faced with a unique design challenge where I am utilizing the MatCardComponent and each card contains a table. I would like to incorporate a floating label within the border gap similar to what is seen in MatFormField. https://i.stack.imgur.com/51LBj ...

cssangularcustomizationmat-form-fieldmat-card

An error was detected in the logcat indicating that a window was leaked due to an activity

Could you please help me resolve this error? I can't seem to figure it out. Every time I click the submit button, my app crashes. Any idea why this is happening? Should I provide more information from my end? MainActivity.java public class MainActiv ...

javaandroidandroid-asynctasksharedpreferencesandroid-room

Creating a Java application to append an array to a preexisting object in a mongoDB database

I have been working on a program that enables users to input information about a team, including the team name, size, and player details. While the code is functional, it does not behave as desired. My goal is to store an array of "players" and add data to ...

javajsonmongodb

Is there a way to obtain the ID of the submit button type?

I am wondering if it is possible to retrieve the value of a submit button's id without using JavaScript, as I need to insert these values into a MySql database. Below is the code snippet I have been working on: <form action="messages.php" method= ...

phphtmlsubmit

Where should AJAX-related content be placed within a hyperlink?

When needing a link to contain information for an AJAX call, where is the correct place to include the info? I have typically placed it in the rel attribute, but after reviewing the documentation for rel, it appears that this may not be the right location ...

javascriptjqueryhtmlajax

Ways to access the ConsumerRecord instance within a Consumer code in StreamListener

My aim was to activate manual commit for my consumer by using the code and configuration below. I want to manually commit the offset in case an exception is thrown by the signIn client. So far, everything works fine up until manually committing the offset. ...

javaspring-bootspring-cloudapache-kafka-streamsspring-cloud-stream

Include a stylesheet as a prop when rendering a functional component

Using Next.js, React, Styled JSX, and Postcss, I encountered an issue while trying to style an imported component for a specific page. Since the stylesheets are generated for a specific component at render time, I attempted to include custom styles for the ...

javascriptcssreactjsjsxnext.js