Positioning the Tooltip at the Bottom

I'm a guitarist, not a programmer, but I am working on improving my guitar lesson website. (I apologize in advance if I make any mistakes posting the code below.) The issue I'm facing is related to tooltip positioning using HTML and CSS. If you hover over it on this specific page, you'll see what I'm aiming for. It's essential that it also functions properly on mobile touchscreens. Any assistance would be greatly appreciated. https://codepen.io/Daverino/pen/zboNoQ

    .toolTipDiv {
     float: none;
     width: 275px;
     margin-left: 20px;
    }
    
    .toolTipLink a {
     display: block;
     color: #202020;
     background-color: transparent;
     width: auto;
     padding: 0px 10px;
     text-decoration: none;
     font-size: 12px;
     margin-left: 0px;
     border-bottom-width: 1px;
     border-bottom-style: solid;
     border-bottom-color: #878787;
     line-height: 17px;
    }
    
    .toolTipLink a:hover {
     background-color: #ddd;
     color: #9B0E11;
     padding-left: 10px;
    }
    
    a.tooltip span {
     z-index: 10;
     display: none;
     padding: 7px 10px;
     margin-top: -80px;
     
     margin-left: 200px;
     width: 140px;
     line-height: 16px;
     opacity: 0.85;
    }
    
    a.tooltip:hover span {
     display: inline;
     position: absolute;
     color: #EEE;
     background: #000;
    }
<body>
    <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
    
    <div class="toolTipDiv">
    
    <span class="toolTipLink"> 
     
    <a href=“#” class="tooltip">
    <div class="tooltipWrapper">
    <div class="toolTipEdge">Medium amount of text in this line.</div>
    <span>I want the bottom of every tooltip to be at the top of every line it hovers over.</span>
    </div>
    </a> 
    
    <a href=“#” class="tooltip">
    <div class="tooltipWrapper">
    <div class="toolTipEdge">This is the text that will be hovered over. Sometimes it may be this long</div>
    <span>The bottom of this tooltip is too low. It should be just above the line.</span>
    </div>
    </a> 
    
    <a href=“#” class="tooltip">
    <div class="tooltipWrapper">
    <div class="toolTipEdge">Here is a shorter line of text.</div>
    <span>Sometimes the text in the "tooltip" will be a couple sentences long. If the tooltip text is ong or if it is short, the bottom of the tooltip should be right above the hovered line.</span>
    </div>
    </a> 
    
    <a href=“#” class="tooltip">
    <div class="tooltipWrapper">
    <div class="toolTipEdge">Medium amount of text in this line.</div>
    <span>This tooltip is way too high.</span>
    </div>
    </a> 
    
    </span> 
    </div>
    
</body>

htmlcsspositiontooltip

Answer №1

When it comes to the "span" element, you had mentioned it should be absolute but forgot to provide any positioning details. To address this, include "bottom":

   position: absolute;
   bottom: 0em;

Furthermore, there seems to be no frame of reference for its placement, so consider adding:

   .tooltipWrapper { position: relative; }

Answer №2

Have you considered exploring Tippy.js? It's a fantastic tooltip and popover tool with extensive customization options.

Answer №3

Someone in an online HTML CSS JAVASCRIPT group shared a codepen solution that corrected the issue I was having. It turns out, I had made errors with the absolute and relative positioning. Check out the fix here!

    .toolTipDiv {
    float: none;
    width: 275px;
    margin-left: 20px;
}
.toolTipLink a {
display: block;
color: #202020;
background-color: transparent;
width: auto;
padding: 0px 10px;
text-decoration: none;
font-size: 12px;
margin-left: 0px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #878787;
line-height: 17px;
}

.toolTipLink a:hover {
background-color: #ddd;
color: #9B0E11;
padding-left: 10px;
}

a.tooltip {
  position: relative;
}

a.tooltip span {
z-index: 10;
display: none;
padding: 7px 10px;
position:absolute; 
bottom: 100%;
color:#EEE;
background:#000;
/* margin-left: 200px; */
width: 140px;
line-height: 16px;
opacity: 0.85;
}

a.tooltip:hover span{
display:block;
}

<body>

<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

<div class="toolTipDiv">

<span class="toolTipLink"> 

<a href="_lessons/_beginner/054-Basic-Boogie-Rock.html" target="_blank" class="tooltip">
<div class="tooltipWrapper">
<div class="toolTipEdge">Medium amount of text in this line.</div>
<span>I want the bottom of every tooltip to be at the top of every line it hovers over.</span>
</div>
</a> 

<a href="_lessons/_beginner/054-Basic-Boogie-Rock.html" target="_blank" class="tooltip">
<div class="tooltipWrapper">
<div class="toolTipEdge">This is the text that will be hovered over. Sometimes it may be this long</div>
<span>The bottom of this tooltip is too low. It should be just above the line.</span>
</div>
</a> 

<a href="_lessons/_beginner/054-Basic-Boogie-Rock.html" target="_blank" class="tooltip">
<div class="tooltipWrapper">
<div class="toolTipEdge">Here is a shorter line of text.</div>
<span>Sometimes the text in the "tooltip" will be a couple sentences long. If the tooltip text is ong or if it is short, the bottom of the tooltip should be right above the hovered line.</span>
</div>
</a> 

<a href="_lessons/_beginner/054-Basic-Boogie-Rock.html" target="_blank" class="tooltip">
<div class="tooltipWrapper">
<div class="toolTipEdge">Medium amount of text in this line.</div>
<span>This tooltip is way too high.</span>
</div>
</a> 

</span> 
</div>

</body>

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

Is there a way to create automatic line breaks in this text?

Is there a way to automatically ensure the span spans multiple lines? I am working with HTML and CSS. Below is a modified version of my code, as some parts are in PHP: <div style='border: 1px solid; padding: 10px; margin-top: 5px;'> < ...

htmlcssscaledevicedisplay

What are the elevated sections in bootstrap?

Having come from Semantic-UI and starting to learn Bootstrap, I must say that despite its widespread popularity, I find Bootstrap a bit lacking compared to what Semantic-UI has to offer in terms of basic stylings. Currently, I am on the lookout for the Bo ...

htmlcssbootstrap-4semantic-ui

Apply a see-through overlay onto the YouTube player and prevent the use of the right-click function

.wrapper-noaction { position: absolute; margin-top: -558px; width: 100%; height: 100%; border: 1px solid red; } .video-stat { width: 94%; margin: 0 auto; } .player-control { background: rgba(0, 0, 0, 0.8); border: 1px ...

javascripthtmlangularcsstwitter-bootstrap-3

Getting the submit button to be positioned above the open keyboard in React Native

On one screen, we have two View components within another View. I styled it so that the button is at the bottom. When we click on the input text, the keyboard opens up and the screen adjusts to show the input text properly. However, the submit button rem ...

cssreactjsreact-native

Implementing CSS Transform for Internet Explorer

Hello, is there a way to make this function in IE ?? I have been looking into IE transformations but it appears that they are not supported.. Is there an alternative method or something else? It works in other browsers like Firefox, Chrome, and Opera. I s ...

htmlinternet-explorercss

Leveraging dynamic anchor tags within a Chrome extension

In my current project, I am dynamically generating anchor tags and using them to redirect to another page based on their unique IDs. While I have successfully implemented this feature using inline scripts in the past, I ran into an issue with Chrome exte ...

javascriptjqueryhtmlgoogle-chrome-extension

What is the solution to the error message stating that <tr> cannot be a child of <div>?

displayTodos() { return this.state.todos.map(function(item, index){ return <div todo={item} key = {index}>; <tr> <td>{item.todo_description}</td> <td>{item.todo_responsible}</td> ...

javascripthtmlreactjsrender

Using JavaScript to open links in a new tab with the target

document.getElementById("mahacareer").onclick = function () { window.open("http://www.mahacareermitra.in", '_blank'); }; <a href="" id="mahacareer">Access the portal</a> Hi there, I am looking to have the link above open in a new tab ...

javascriptjqueryhtmltwitter-bootstrapcss

Is there a way to modify the background shade of an HTML meter element?

Can the background color of an HTML meter be customized? I noticed that by default, it has a green background. Is there a way to change this green background to a different color? I attempted using the style attribute with a red background color, but it ...

htmlcss

Create a div that pops up when clicked, just like the Fancybox jQuery feature

I'm looking to create a popup div with an elastic effect similar to jQuery's fancybox. I've tried using the following code, but it doesn't seem to work... Here is the HTML: <a href="#" id="LoginAnchorLink">ClickME</a> < ...

jqueryhtmlcssfancybox

Uncovering Twig's Power: Navigating JSON Key Values

In my current project, I am utilizing OctoberCMS and Twig to fetch dynamic data and translations from JSON files for the front end. Here is an example snippet of code: <div class="wrapper items"> <div class="items"> {% for suggestion in ...

htmljsontwig

What is the best way to prevent autoplay on a local video embedded in an iframe within a

I have the following code in an HTML5 web page, using div and iframe. Whenever I load the page, video1.mp4 starts automatically. :( I do not want video1.mp4 to start automatically. Can anyone help me with this issue? Thank you very much. ...

htmliframevideoplayback

What is preventing me from displaying my paragraph?

I have some content that I want to show a paragraph with the class paragraphtoggle when clicked, but it's not working as expected. Here is what I have tried: https://example.com/jsfiddle HTML <div class="enzimskiprogramindex herbaprogramindex he ...

javascriptjqueryhtmlcss

Transform HTML into PDF while maintaining the original letter spacing

We are in need of converting numerous files to enable search and word highlighting functionality in a web browser, as well as server-side indexing for the searchable words. I have previously utilized an online service like (Step 1, Step 2 on linked page) ...

htmlpdfconverters

Steps to create a dynamic <div> that is only visible within a parent <div>

First of all, I want to express my gratitude for welcoming me into the group. I am seeking assistance with an inquiry regarding jQuery animation. The specific animation in question can be seen on the navigation menu items of this template from Template Mon ...

javascriptjqueryhtmlcssanimation

Attempting to modify the background color of an iFrame in Internet Explorer

I am experiencing an issue with my webpage where the iFrame is displaying with a white background in IE, while it shows up with a blue background in Firefox and Chrome. I have attempted various solutions to make the background of the iframe blue or transpa ...

javascripthtmlcssinternet-exploreriframe

What is the best way to ensure that the text remains visible on the image?

Is there a way to maintain the static 'BUY NOW' tag on an image while allowing other elements to be dynamic? Any suggestions on how to achieve this within an img tag?https://i.sstatic.net/6eLoN.jpg ...

javascriptjqueryhtmlcss

Utilize generated styling data bindings when referencing assets

Currently, I am working with vue-cli 3 and trying to create background-image paths. To achieve this, I am utilizing the style data bind within a v-for-loop. Below is the component structure: <template> <ul> <li v-for="(tool, inde ...

csswebpackvue.jsassets

Dropdown colorization

I want to create a dropdown menu in my black navbar, but the text color becomes blue and the background of the pop-up turns white, which clashes with my black background. I need it to be transparent while using Bootstrap v4.1.1 <nav className="navbar n ...

cssbootstrap-4react-bootstrap

jQuery not functioning properly for adjusting quantities with plus and minus buttons

Hey there, I've been trying to create a number input increment using jQuery but haven't had any luck so far. Could you please take a look at my code and provide some guidance? CHECK OUT THE DEMO HERE Here's the HTML: <div class="sp-qua ...

jqueryhtmlcss