• Announcements

    • Ian

      TDN Items is now a complete items database!   07/18/17

      Hello community! We are very excited to announce the second version of our Items Database! We've redesigned the entire database from the ground up and added (mostly) every Neopets item in existence to our database. If something is missing, don't worry just yet, as we're still ironing out the final details. Find information about any Neopets item instantly at our items database, complete with search suggestions as you type! Try it out today. Visit TDN Items Database today! Enjoy,
      TDN Management
Musical_Shoyru

Why must you hurt me so HTML

5 posts in this topic

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>?

Share this post


Link to post
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?

Share this post


Link to post
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.

Share this post


Link to post
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?

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now