Customize the appearance of a hyperlink

I am having difficulty styling a link's title using jQuery-mobile. Each link represents a player with unique abilities. When the user hovers over a player, I want a tooltip to display their special ability. Despite trying various code samples, none have been successful. My latest attempt can be found in this jsFiddle.

Here is the HTML markup for the link:

<li class="ui-btn-icon-left"><a class="tooltip" data-tooltip="Promising goalkeeper" href="#"><span>L_Oikonomo</span></a></li>

Below is the CSS code for the tooltip (excluding vendor prefixes):

/* tooltip body text */
 .tooltip:hover:before {
    display:block;
    background:#eee;
    background:linear-gradient(rgba(255, 205, 205, 0.9), rgba(228, 230, 230, 0.9));
    content:attr(data-tooltip);    /* this link attribute contains tooltip text */
    position:absolute;
    font-size:0.9em;
    color:rgba(51, 51, 51, 0.9);
    bottom:20px;    /* ensure link text is visible under tooltip */
    right:0px;    /* align both tooltip and link right edges */
    width:11em;    /* a reasonable width to wrap tooltip text */
    text-align:center;
    padding:4px;
    border:2px solid rgba(204, 153, 153, 0.9);
    border-radius:6px;
    box-shadow:-2px -2px 2px rgba(20, 20, 20, 0.4);
}
/* styles shared by both triangles */
 .tooltip:hover span:before, .tooltip:hover span:after {
    content:"";
    position:absolute;
    border-style:solid;
}
/* outer triangle: for border */
 .tooltip:hover span:before {
    bottom:5px;    /* value = tooltip:hover:before (border-width*2)+1 */
    right:40px;    /* controls horizontal position */
    border-width:16px 16px 0;    /* top, right-left, bottom */
    border-color:rgba(204, 153, 153, 0.9) transparent;    /* top/bottom, right-left (lazy becasue bottom is 0) */
}
/* inner triangle: for fill */
 .tooltip:hover span:after {
    bottom:8px;    /* value = tooltip:before (border-width*2) */
    right:42px;    /* above 'right' value + 2 */
    border-width:14px 14px 0;    /* 2 less than above */
    border-color:rgba(225, 238, 238, 0.95) transparent;    /* tweak opacity by eye/eyedropper to obscure outer triangle colour */
}

Is it possible to make this work? If not, do you have any other suggestions to style the link's title?

cssjquery-mobilehyperlinktitle

Answer №1

The issue you are encountering with your code appears to be due in part to the utilization of the .tooltip:before pseudo-element in another context (possibly by the library). Since you are already leveraging the jQuery mobile library, it might be beneficial for you to explore jQuery UI's tooltip.

If you prefer not to utilize the library, the following modifications should rectify the issue and enable a styled tooltip (or title) to appear when hovering over the anchor element:

  • The current implementation by the library includes adding an overflow: hidden property to the anchor element. Removing this will ensure the complete display of the tooltip without any hidden portions.

    .ui-page-theme-a .ui-block-a a.ui-btn {
    overflow: visible;
}

  • Instead of using the a tag, employ the span tag to generate the tooltip (since the a tag's pseudo-element appears to be in use).

    <li class="ui-btn-icon-left">
  <a href="#">
    <span class="tooltip" data-tooltip="Promising goalkeeper">L_Oikonomo</span>
  </a>
</li>

  • Include position: relative for the span element to facilitate absolute positioning of the tooltip relative to it.

    .tooltip {
    position: relative;
}

  • Add the necessary code to reveal the tooltip upon hovering over the anchor element. The adjustments are minimal compared to your original code, with the addition of z-index to ensure the tooltip displays above the link text.

    a:hover .tooltip:before {
    position: absolute;
    content: attr(data-tooltip);
    bottom: 2em;
    right:0px;
    height: 2em;
    width: 11em;
    background:linear-gradient(rgba(255, 205, 205, 0.9), rgba(228, 230, 230, 0.9));
    content:attr(data-tooltip);
    font-size:0.9em;
    color:rgba(51, 51, 51, 0.9);
    text-align:center;
    padding:4px;
    border:2px solid rgba(204, 153, 153, 0.9);
    border-radius:6px;
    box-shadow:-2px -2px 2px rgba(20, 20, 20, 0.4);
    z-index: 1;
}

  • The subsequent code pertains to the triangular indicator at the base. A transform: rotate(45deg) approach is used to form the triangle instead of utilizing borders, as we have only one available pseudo-element. An additional gradient is employed to color half of the triangle.

    a:hover .tooltip:after {
    content:"";
    position:absolute;
    bottom: calc(2em - 8px);
    right:42px;
    height: 10px;
    width: 10px;
    background: linear-gradient(135deg, transparent 50%, #eee 50%);
    border: 1px solid rgba(204, 153, 153, 0.9);
    border-width: 0px 2px 2px 0px;
    transform: rotate(45deg);
    z-index: 2;
}

Fiddle Demo

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

Styling is lost in FancyBox popup when loading Partial View

I've been attempting to incorporate a partial view into my MVC project using fancybox. It seems to be loading the content correctly, mostly anyway, as it tends to cut off part of the page and loses all styling from the view upon loading. Even after i ...

javascriptjquerycssasp.net-mvcfancybox

Creating a personalized gradient using Tailwind CSS and Daisy UI framework

I’m attempting to incorporate a unique gradient into my next.js application with the help of Tailwind CSS and Daisy UI. Below is the specific code snippet I plan on using: background: linear-gradient(180deg, rgba(192, 192, 192, 0.04) 0%, rgba(201, 180, ...

cssnext.jstailwind-cssgradientdaisyui

A layout featuring a grid design that includes spacing and gutters between items, however, there is no spacing between the items

I am looking to create a grid layout where each child element represents an individual grid square. However, I am facing an issue with spacing between the children and the parent container, which is not desired. How can I eliminate this unwanted space? U ...

htmlcssgrid-layoutcss-grid

Correctly align the div on the screen as the viewport is scrolled

I am currently working on a parallax website where the sliders are designed to slide from the left and align within the viewport as the user scrolls. However, I have encountered an issue where multiple scroll actions are required for the slide to align pro ...

javascriptjqueryhtmlcssparallax

Show a loading image after clicking on an image or button using JavaScript

I recently created an App using PhoneGap and JqueryMobile. Transitioning between multiple HTML pages by clicking on images seems to be causing slow loading times, leaving end users unaware of what's happening in the background. I am looking for a way ...

javascriptjqueryhtmlcordovajquery-mobile

What is the best way to utilize a mask in an inline SVG that is compatible with Chrome browser?

I am looking to visually crop my element using an SVG shape that is defined within the same HTML file (inline SVG). Using clip-path works perfectly: div { width: 200px; height: 200px; background-color: red; clip-path: url("#c"); } <div> ...

htmlcsssvg

evolving the design of mui stepper

I am looking to customize the code below for my specific needs I want to change the icon from to this: I am unable to modify the style and also need to add an intermediate step I have included , '.Mui-active': { color: '#1C6FC9', }, ...

cssreactjsmaterial-uistepper

Tips for concealing the fourth child element within a list item

I'm facing an issue with a list of items rendered in my react component where I need to hide the 4th child of the list item. Here is the relevant html code: <div class="ExpandableContent-Content MyAccountTabList-ExpandableContentContent&qu ...

htmlcssreactjssass

Position two div elements so that the second div expands to occupy the entire available space

I am struggling with aligning two divs within a container div, one on the left and one on the right. I am using flexbox for alignment purposes, as shown in the code snippet below. .box { display: flex; align-items: center; just ...

htmlcssflexbox

Ways to modify the color of mat-icon within an input field using Angular 6

Here is the code from my HTML file: <div class="input-field"> <div> <input type="text" id="name" required email/> <label for="name">Email: <mat-icon svgIcon="mail" class="change-color"></mat-icon> &l ...

cssangularinputicons

Adjust the size of a div element dynamically to maintain the aspect ratio of a background image while keeping the

Utilizing the slick slider from http://kenwheeler.github.io/slick/ to display images of varying sizes, including both portrait and landscape pictures. These images are displayed as background-image properties of the div. By default, the slider has a fixed ...

javascriptcssslideraspect-ratioslick.js

Achieving consistent width for flex items in each row

Can I ensure that all flex items have the same width? Currently, my code looks like this: .video-container { background-color: blue; min-height: 90vh; display: flex; flex-wrap: wrap; } .video { flex: 1 0 25%; } <div class="video-contain ...

htmlcssflexbox

Tips for Providing Real-Time Data for a Dynamic Chart in d3

I have a line chart sample from D3, and the issue I'm facing is that I need to continuously feed live data from a server at certain time intervals and use D3 to draw the chart based on this dynamic data. Despite my efforts to search for a solution, I ...

javascripthtmlcssd3.js

Struggling with implementing Mobile Navigation menu

I'm struggling to implement a mobile menu for my website. After adding the necessary code, when I view the page in a mobile viewport, all I see are two sets of periods ("..."). However, unlike in the code snippet provided, the list does appear on the ...

javascriptjqueryhtmlcss

Exploring the Fusion of Different Styles in Material-UI Using React

I have two different styles that I use in my code. One style is specific to certain components, while the other style is global and used across various components. For example, consider the following file tree: index.tsx -App.tsx -globalConstants.ts In ...

javascriptcssreactjsstylesmaterial-ui

Content located on the right-hand side of the menu

I am currently working on a vertical navigation menu design, but I am facing some issues with aligning the text to start from the very left edge of the element. HTML <div class="jobs-links"> <ul> <li><a href="renovations. ...

htmlcsstextnavigationalignment

Can anyone recommend a user-friendly JavaScript dialog box compatible with jQuery that is mobile-responsive?

Mobile browsers. Using Jquery dialog alert box. Avoiding the use of alert() due to its unattractive appearance in web browsers. In the process of creating a website for both mobile and web platforms, seeking a dialog box that is compatible with both. ...

javascriptjquerycssbrowsermobile

ReactJS Application: Issue with Selective Mobile Scrolling

I've been working on a ReactJS web app where we mainly use styled-components for styling, but also sometimes utilize index.css for global styles (such as body and html). The application consists of an app header, a page header, and a container with a ...

javascriptcssreactjsscroll

Combining several position-aligned classes into a single div instead of each having their own individual div

http://jsfiddle.net/58arV/ Trying to create a question component where users can choose the correct answer out of 4 options. I planned to use 4 input styles with a checkmark "radio" DIV on the right. When a user clicks on an option, it should display a c ...

jqueryhtmlcsstwitter-bootstrap

What could be causing the issues with the compatibility of <input type="text" and flex properties?

I'm having an issue where the search box expands in size when I apply display:flex in my CSS. Can someone explain why this happens and offer a solution to return the search box to its normal height? Additionally, I would like the search bar and the se ...

htmlcssflexbox