Jump to content

Why must you hurt me so HTML


Recommended Posts

I'm just about to pull my hair out!!! I've spent the last 4 hours trying to add tooltips to my Link Image on neopets and I can't figure out a solution AT ALL! I just want to put the available Neopets Dailies and such on this page with tooltips on little details about each daily.

Originally I had this in my style tag

.tooltip {
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #C8A2C8;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 1s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

And it worked GREAT! Came out exactly how I wanted it too. Images were aligned and tooltips were coming up great. As seen in the images below in the spoilers

 

qcfau0N.jpg

pKL3Z5a.jpg

Well come to find out after all that work; Neopets doesn't like the tags "Postion". So when I remove them I get this

DyuYGaM.jpg

upjypxa.jpg

 

I've tried everything I could and searched everywhere online for a solution. I've tried putting the style tag outside of the <Style></Style> section and putting it into the <div class="tooltip"> and in the <span class="tooltiptext"> and then I tried putting them in BOTH those areas for each image and it make the images that have those tags in it disappear entirely OR no tooltip will appear. 

 

Is there a way to effectively use tooltips on images without them all spread out like this without having to use the "position" tag in my <style></style>?

Link to comment
Share on other sites

Are you certain it's allowed on Neopets? Somethings aren't when it comes to coding. I have no experience with tooltips, but if it looked like it was working and it's not then maybe it's not being allowed. What exactly is happening? Are you getting an error message or it's just not working when you save your page?

Link to comment
Share on other sites

Is it possible that Neopets is having issues with something other than the 'position' tag? Because I found at least two Neopets CSS reference guides that recommend using position. Neither mentions tooltips though, so the issue might be with tooltips themselves.

Link to comment
Share on other sites

5 hours ago, Mouseykins said:

Are you certain it's allowed on Neopets? Somethings aren't when it comes to coding. I have no experience with tooltips, but if it looked like it was working and it's not then maybe it's not being allowed. What exactly is happening? Are you getting an error message or it's just not working when you save your page?

The error message I get is with the word/tag "position" and "border radius" when I take those out I'm able to save the page with no error codes and with the tooltip tags. The problem is I need a way to set the position of the tooltip as absolute and I'm not sure how to do that. Because it won't allow the "position" tag in my actually style tab. So I tried it this way. I had added it like so.

<div class="tooltip" style="position: absolute;">Text or image to display
  <span class="tooltiptext" style="position: absolute;">Floating tooltip text</span>

When I did this I believe it brought the image back to the proper positioning that I wanted, but the tooltips were not displaying.

I also tried it with this

<div class="tooltip" style="position: absolute;">Text or image to display 
  <span class="tooltiptext">Floating tooltip text</span>

And like this;

<div class="tooltip">Text or image to display 
  <span class="tooltiptext" style="position: absolute;">Floating tooltip text</span>

I did close them all out with </div>

 

When I put the position tag in the <div class> or <span class> the positioning tag error stopped popping up and it allowed me to save the petpage. But it wouldn't show the tooltips, so I'm not sure if it's just not supported? Or maybe there's another way to position it?

 

When I used w3school's website with the first example I game you up there ^ I had deleted the positioning tag from my style tab and added it to the <div class> and <div span> it worked on that site... so maybe it's a Neopets thing?

Is there a way to maybe have the image turn into a text when it's hovered over and I can do kind of my on "rendition" of a tooltip?

Link to comment
Share on other sites

5 hours ago, Musical_Shoyru said:

Is there a way to maybe have the image turn into a text when it's hovered over and I can do kind of my on "rendition" of a tooltip

You could try to use the :hover tag. This Stackoverflow question is about the reverse: showing an image when hovering over some text (and also links to this JSFiddle). I suppose it should be possible to show text when hovering over an image, but I have no idea how Neopets will respond to this.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...