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

The iframe is not adjusting its size in relation to the parent window

For more information, click here: http://jsfiddle.net/5HYve/ <div style="position: fixed; top:0; right:0; width:300px; height: 100%; text-align:justify; overflow:hidden;" class="chat-container"> <iframe id="chat_1" style="width:300px;height:1 ...

htmlcssiframeresize

Android WebView does not support rendering Persian fonts

I am having an issue with applying a Persian font to my html content, which contains both Persian and English text. The CSS is correctly applied except for the font itself. In the CSS, I have defined the font-face like so: @font-face{ font-family ...

androidhtmlcssfontswebview

The CSS and JS codes are not successfully integrating into the webpage

I am encountering an issue with loading CSS and JS files onto my page. My project involves PHP and Xampp. The file structure is as follows: My Site - CSS - index.css - JS - index.js - Index.php (Apologies for the lack of a folder tre ...

javascriptphphtmlcss

Find and retrieve all data attributes with JavaScript

What is the method to retrieve all data-attributes and store them in an array? <ul data-cars="ford"> <li data-model="mustang"></li> <li data-color="blue"></li> <li data-doors="5"></li> </ul> The resultin ...

javascriptcsshtml

Is it feasible to obtain multiple tag-name indexes using JavaScript?

Exploring the table search function provided by W3Schools has brought up an interesting question in my mind. Is it feasible to simultaneously retrieve multiple indexes using getElementsByTagName and conduct a search across the entire table instead of just ...

javascripthtmlcsshtml-table

Issues with Videojs Responsive Lightbox Functionality

I am looking for a solution to display VideoJS in a lightbox while keeping it responsive. I came across this helpful code snippet: https://github.com/rudkovskyi/videojs_popup. It seemed perfect until I tried using it with the latest version of Videojs and ...

javascriptcsshtmllightboxvideo.js

Elevate the React experience by smoothly sliding a fixed navbar upwards when scrolling down, and elegantly sliding it

tl;dr Don't miss the solution at the end! Looking to create a slide up and down effect on a fixed navbar in react? What's the best approach - using refs or the componentDidMount lifecycle hook? hideNav = (navbar) => { const hide = () ...

javascripthtmlcssreactjsjsx

Removing items from a JavaScript list

I am seeking assistance with an issue I am facing. I have a function that generates a list based on user inputs. For instance, when a user enters apples, the function adds it to a <ul> list. My concern is about deleting specific inputs from the lis ...

javascripthtmlcsslistappendchild

Having difficulty with the placement of a div element in HTML code, wondering how to position it according to my specific

As a beginner, I ran into some trouble with my code while trying to create a simple 'game' for fun. The initial result looked like this. After that, I attempted to add another div onto the brown element using the following CSS: #energy_and_coins ...

htmlcsspositioning

Tips for customizing the appearance of a mat-select chosen item?

Is there a way to modify the color of the selected option text in a mat-select component within an Angular 15 project? .html <mat-form-field> <mat-label>From</mat-label> <mat-select panelClass="mat-select-red"> ...

cssangularsass

Fixed Navigation - Employing stickUp.js extension

* { box-sizing: border-box; } body { margin: 0; padding: 0; font-weight: 500; font-family: 'Helvetica Neue', sans-serif; } main {} .bckgrnd { background-position: center center; background-repeat: no-repeat; background-attachment: ...

javascriptjqueryhtmlcss

Enhancing Blog Navigation with PicoCMS Pagination

After successfully setting up PicoCMS on my website, everything seems to be working well except for the blog pages. I am having issues with the "Older Posts" button not functioning as expected. Unfortunately, I couldn't find any information in the the ...

phpcsshtmlpagination

Ways to vertically align a div in Bootstrap 4?

As I delve into working with bootstrap 4, I am experimenting with creating various basic layouts. In line with the guidelines provided in bootstrap 4 documentation, I aimed to vertically align block elements by applying the class align-items-center. Despi ...

cssbootstrap-4

Display the scrollbar on a flexbox container instead of the entire browser window

I'm curious about how to implement a scroll-bar on a div using flexbox CSS. To better illustrate the issue, I've provided an example below: * { box-sizing: border-box; } .flex-display { display: flex; align-items: stretch; height: 100 ...

htmlcssflexbox

Is there a way to selectively display a portion of my CSS class based on certain conditions?

Is there a way to conditionally render all of the css inside the following hover psuedoclass based on a variable (data) being not null? Within my React Component that utilizes Material UI makeStyles, I have the following styles: const useStyles = makeStyle ...

cssreactjsmaterial-uipseudo-classconditional-rendering

conceal the offspring from the guardians, not the offspring

Could you please assist me with this situation... <li id="4331">Region <ul> <li id="4332">Asia</li> <li id="6621">Europe</li> </ul> </li> I have a query when I click on the Reg ...

jquerycssajax

Valid ways to ensure that a CSS image expands outside the boundaries of the containing div

I have inserted an image using the following CSS code: .imgtemp { float:right; top:0px; left:0px; overflow:visible; width:100%; } Although I have added the div tag to display it on the page, ...

htmlcss

Encountering an "Invalid CSS" error while trying to import an external font in SASS

Encountering an issue while attempting to load an external font in my SASS file. Below is the code snippet used to import the font-face from the all.sass file located in the same directory as leaguespartan-bold-webfont.woff and leaguespartan-bold-webfont.w ...

csssassfonts

Is Bootstrap CSS Carousel malfunctioning following a float adjustment?

Currently, I am trying to implement a carousel in bootstrap, but I am facing two significant issues. The alignment of the carousel is vertical instead of horizontal (my div elements are stacking downwards). When I apply the float: left property, the carou ...

htmlcssbootstrap-4

Creating customizable divider lines with text next to them using HTML in emails

How can I create an adjustable line with a word next to it, ensuring that long words do not wrap onto a second line? I want the line to stay on one line and the left side to shrink accordingly. Also, I need the text input area to be flexible so I can input ...

htmlcssemailnewsletter