Design the title attribute for the style area tag

Currently, I have set up an image with various clickable areas on it, and I want to display a description when the user hovers over these areas. My current solution involves adding the descriptions as titles, but I feel like there might be a better way to achieve this.

Since the tooltips generated by the titles look quite basic, I am looking for ways to style them or find alternative methods to display descriptions on hover. Any guidance on this matter would be greatly appreciated!

Here is the code snippet that I've implemented so far:

<img src="https://i.ibb.co/x11LcrM/team.png" usemap="#image-map" />
    <map name="image-map">
      <div><area
        target="_blank"
        alt="leftGirl"
        title="What is Lorem Ipsum?
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
         Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
         , when an unknown printer took a galley of type and scrambled it to make a
          type specimen book. It has survived not only five centuries, but also the 
          leap into electronic typesetting, remaining essentially unchanged. It was 
          popularised in the 1960s with the release of Letraset sheets containing Lorem
           Ipsum passages, and more recently with desktop publishing software like Aldus 
           PageMaker including versions of Lorem Ipsum. https://www.lipsum.com/"
        href="https://www.webs.com/themes"
        coords="59,669,21,848,75,1151,12,1439,288,1448,568,1446,548,1008,474,691,426,612,400,341,301,281,198,367,161,618"
        shape="poly"
      />
    </map>

htmlcss

Answer №1

If you're searching for a more contemporary approach, CSS clip path might be the solution you need.

.section{
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden
}

.section__item{
  position: absolute;
  width: 100%;
  height: 100%;
}

.section__item--right{
  clip-path: polygon(30% 0%, 100% 0%, 100% 100%, 70% 100%)
}

.section__heading{
  position: absolute;
  padding: .5em;
  background: #fff;
  color: black;
  font-family: sans-serif;
  visibility: hidden;
}

.section__item:hover .section__heading{
  visibility: initial;
}

.section__heading--right{
  top: .5em;
  right: .5em;
}

.section__heading--left{
  bottom: .5em;
  left: .5em;  
}
<div class="section">
  <a href="/x" class="section__item section__item--left">
    <img src="https://picsum.photos/536/354">
    <span class="section__heading section__heading--left">Title A</span>
  </a>
  
  <a href="/y" class="section__item section__item--right">    
    <img src="https://picsum.photos/540/354">
    <span class="section__heading section__heading--right">Title B</span>
  </a>
</div>

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

Customizing WordPress using CSS overrides in the Pinboard theme

I'm currently customizing a WordPress theme for my website (pinboard theme) and so far, it's been an amazing experience. One of the features of this theme is a built-in slider/carousel. However, I am looking to change the title of the slider from ...

csswordpress

Tips for applying unique scss classes to a div based on a specific condition

Currently, I am developing a chat application where I want to showcase messages from one specific user on the right side of the screen while displaying messages from other users on the left side. <ion-item *ngFor="let message of messages | slice:0: ...

cssangularionic-frameworksassflexbox

Resolving the Material-UI NextJS Button Styling Dilemma

I've encountered an issue with the styling of a few buttons in JS. When I apply a styling class using className, the formatting works fine on the initial render but loses its styling on subsequent refreshes. This problem is specific to two individual ...

htmlcssreactjsmaterial-uinext.js

Navigating into the forbidden territory of the if block that holds secrets untold

Encountering an issue with the angularjs $location feature. I have set up an auth interpreter that redirects to the login page if a 401 error (unauthorised) is returned by the server. In my app.js file, both the auth interpreter and the account data loadin ...

htmlangularjs

Struggling to locate the distinctive XPath for the button

I am facing a situation where the XPath is non-unique and identifies 3 elements on the page that change positions upon refresh: <div class="col-xs-12 Hover"> <button data-testid="continueCheckoutButton" ng- class="continueDellMetricsC ...

htmlseleniumxpath

The alignment of the table appears off on Internet Explorer, while it is perfectly centered on all other web

I'm encountering a strange issue with my table alignment on Internet Explorer. The table is offset to the right in IE, but perfectly centered in other browsers like Edge, Firefox, and mobile browsers. I am using Bootstrap for my design, but haven&apos ...

htmlcssbootstrap-4

The Mat-paginator is refusing to align to the right edge when scrolling the table horizontally in an Angular application

Overview: My Angular component features a table with Angular Material's mat-table and paginator. Despite fetching data from a source, the paginator fails to float right when I scroll horizontally. Sample Code: <!-- Insert your code snippet below ...

htmlcssangularangular-material

Zooming in on the background with an animated effect

I'm experimenting with a zoom in animation on a background image for a brief moment. It seems to work initially but then resets itself. To see an example, I've created a jsfiddle link: https://jsfiddle.net/onlinesolution/tk6rcLdx/ Any idea what ...

csscss-transitionscss-animations

Duration of Animated Text

Despite trying various methods, I'm struggling to adjust the duration of my animations. I want each animated text to be displayed for 2-3 seconds, as they are currently moving too quickly. How can I resolve this issue? Please note that the specific pl ...

csscss-animations

Is there a specific explanation as to why ng-repeat-start is not functioning properly even with the most recent version of AngularJS?

Can someone please explain why ng-repeat-start is not functioning properly despite using the most up-to-date AngularJS version? I have included it from the CDN: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></scr ...

javascriptjqueryhtmlangularjs

What are the steps to adjusting page margins for Kindle devices?

While converting an HTML page for Kindle, I encountered a problem with multiple CSS files. The Kindle Guide recommends setting the left and right margins to 0 for normal body text in order to prevent content from falling off the edge of the screen or overl ...

csshtmlkindle

Do you want to reset the validation for the paper input?

I am encountering an issue with a paper-input element in my code. Here is what it looks like: <paper-input id="inputForValidation" required label="this input is manually validated" pattern="[a-zA-Z]*" error-message="letters only!"></paper-input&g ...

javascripthtmlpolymerpolymer-1.0web-component

How can I create dynamic tabs using Tailwind CSS?

I am looking to create an animated tab using React and Tailwind CSS. Here is the code I have so far: import React from 'react' import clsx from 'clsx' export const Modal = () => { const [theme, setTheme] = React.useState<' ...

htmlcssreactjscss-transitionstailwind-css

Issue encountered: Inoperable binding when employing ko.mapping with two distinct models

I've been struggling to implement a drop-down select in conjunction with a table on a page using knockout bindings. The issue arises when I try to use the mapping options in the knockout binding plugin – either the drop-down or the table behaves inc ...

javascripthtmlknockout.js

Height of the div dynamically increases upwards

Just a quick question - is there a way to make position: fixed divs at the bottom of an element (such as the body) grow upwards as content is dynamically added? Maybe something like anchor: bottom or increase: up? I'm thinking that using JavaScript m ...

javascriptjqueryhtmlcss

The getText method in Selenium seems to be malfunctioning as it is unable to retrieve any text content from

Struggling to capture the text of WebElement using two different methods, but both are returning blank strings. // Method 1 d.findElement(By.id("deliveryDate")).getTex(); // Method 2 WebElement deliveryDate = d.findElement(By.id("deliveryDate")); Sys ...

htmlselenium

Ways to change the class attribute on button click with jquery

I attempted to change the class attribute here, but unfortunately was unsuccessful. Can anyone provide guidance on how to toggle the class value successfully? <button id="mybt" class="fa fa-plus"></button> <script> $("#m ...

jqueryhtmlfont-awesome

Looking to extract data from a Json object and add it into a table

<!DOCTYPE html> <html> <head> <script type="text/javascript"> function displayJsonData() { var jsonData = { "cars": [ '{"model":"Sentra", "doors":4, "features":["hi"," ...

javascripthtml

How can I place this ribbon on top of an image in an HTML email to ensure it displays correctly on email clients such as Outlook?

As I delve into my research, it's becoming apparent that achieving this result might not be feasible across all email clients. However, I'm curious to know if there have been any recent developments in the email world that would allow me to repli ...

htmlcssemailoutlookhtml-email

Can the underline height be adjusted when a developer uses `text-decoration: underline;` in CSS to generate an underline effect?

Can the height of the underline created using text-decoration: underline; in CSS be adjusted? I used CSS to apply an underline to the word "about" with an 'id' of '#title4' but I want to increase the space between the word and the unde ...

htmlcss