Cause thumbnail to appear when hovering over linked character name

Gomez
Gomez

I asked the forum in the general discussion area if there is a way to cause a character's thumbnail to appear when hovering over a linked "Characters" hyperlink, and user @gastoff did some amazing work providing some css and inline html code to make it work.

The only downside is that you have to go and replace every character link with the inline code which is long and cumbersome.

Is there a way to add this as a feature to the existing "Characker Link" button? So linking to a character would not only bridge to the character's page if clicked, and display the text as written in the log, but hovering would show a thumbnail of the associated image as well?

Here is the conversation in the general discussion area, and you can see some users have already adopted the code provided by gastoff. 

https://forums.obsidianportal.com/discussion/5501/is-there-code-to-enable-displaying-character-image-on-hover-over-the-link#latest

Comments

  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998

    That is a really cool thing!

    Just trying to help out.

  • Gomez
    Gomez
    Posts: 10

    Bump! Can I get some more of you fine folks to advocate for this mod?

  • thaen
    thaen
    Posts: 1,064

    I did a little work on adding this to OP...

    Checkout the "Fat Pig" campaign that Kallak, Jynx, and I are playing, and hover over the Bodrin or Kio links:

    https://tobuyafatpig.obsidianportal.com/public-forum/ic-in-character

    Does that look like what you were wanting? 

    I have it setup as a beta feature right now, so anyone that's interested, let me know and I'll add you to the beta (the feature is applied to the GM's account).  You'll also need to add the following css to your custom css after you've been added to the beta:

    .wiki-content-link:hover span{

      visibility: visible;

    }

     

    Thanks,

    thaen/Aleks

     

    Obsidian Portal Developer

  • Kallak
    Kallak
    Posts: 1,090

    This is very cool! I wish it would use the "grey with point" setup that the insertable JS tooltip feature uses as opposed to the "dash-square" setup. It centers overtop of the link/name which is awesome, and I think looks a bit cleaner.

    All the best,
    - Kallak
  • thaen
    thaen
    Posts: 1,064

    @Kallak I just used the css settings from the original thread.  If you think we should use some other css settings as the defaults feel free to post them here and I'll touch it up.  Obviously GMs can use the custom css to change it to whatever they want.

    Obsidian Portal Developer

  • Gomez
    Gomez
    Posts: 10

    Hi @thaen 

    Please add me to the beta! I'd love to try this out today.

    Thanks,

    Matt

  • thaen
    thaen
    Posts: 1,064

    @Gomez, you're now added to the beta!  Report back if you see any issues.  I'm not sure how it will act with the ones you've already added the original method to, so you might have to go back and remove that.

    And remember to add this to your custom css:

    .wiki-content-link:hover span{

      visibility: visible;

    }

    Thanks,

    thaen/Aleks

    Obsidian Portal Developer

  • Gomez
    Gomez
    Posts: 10

    @thaen

    Initial results are fantastic!

    I was able to simply add the lines of code you privided to the existing Custom CSS provided earlier by @gastoff. I checked the adventure log and found that adding the code you provided didn't "break" the existing code, so I didn't need to go back and undo all the HTML I had done before, which was nice both for the benefit and the efficiency.

    Then I went back and edited some of the prior entries and replaced some of the inline html with the regular character tags. I did this only for some, because I noticed the Html will point to whatever the image used was when it was hardcoded, not whatever the current image is. So in some cases where the image had changed, the most recent was not displaying.

    Other than that slight modification to the inline Html I wss able to leave the old code in place, and will revert to using the new beta feature for all future applications.

    If I notice anything else, I'll provide feedback here.

    Thanks again!!

    Matt

  • thaen
    thaen
    Posts: 1,064

    Excellent!  Glad to hear it's working well.

    Obsidian Portal Developer

  • gastoff
    gastoff
    Posts: 136

    @kallak  THe last line of the css I posted on the other thread allows or adjusting where the hovered image appears. It can be adjusted around so that it does not cover the link. The dashed gray border can also be adjusted as well.

    image

  • thaen
    thaen
    Posts: 1,064

    @Gomez, just FYI, this feature is no longer in beta.  It's now available in the Campaign Settings Advanced tab with the checkbox "Character links in Wiki Pages show Character IMG when hovered over".

    I went ahead and "checked" the checkbox for your "Absalom's Misfits" campaign.

    Also, you don't need the below css in your custom css for this to work anymore.  All the GM needs to do is check the checkbox and Save.

    This css is no longer needed:

    .wiki-content-link:hover span{

      visibility: visible;

    }

     

     

    Obsidian Portal Developer

  • Krothos
    Krothos
    Posts: 230

    This is a great feature to add. Thank you!

    Possible to also allow this on the Adventure Logs? One of my players writes these logs for me and is very good about linking the characters.

     

  • gastoff
    gastoff
    Posts: 136

    It is working on the adventure logs as well from what I can see.

    image

  • Gomez
    Gomez
    Posts: 10

    @thaen

    I removed the code and tested - still works great! Thanks for proactively checking the box for me and of course for quickly deploying this in the latest version of the app! 

  • thaen
    thaen
    Posts: 1,064

    @Gomez, excellent!  Happy to!

    @Krothos, this should work anywhere in a Campaign that you can insert a Character link...Wiki, Adventure Log, Forums, etc.

    Obsidian Portal Developer

  • Conan_Lybarian
    Conan_Lybarian
    Posts: 240

    A little late to the party- but are you still doing beta @thaen?

  • Kallak
    Kallak
    Posts: 1,090

    @Conan_Lybarian, this has been moved from a "beta" to a "phase 1 release" state. It is available at the Basic or Free account level, so everyone should have access to it.

    All the best,
    - Kallak
  • Dungeon_Master_Loki
    Dungeon_Master_Loki
    Posts: 358

    BTW, credit where it is due: I love this. 

     

     

    Game Designer, Pro GM, multiple ENnie Award winner

    GM of Planejammer: The Spelljoined (Pathfinder 1e) Campaign of the Year 2011 and still going strong!

    GM of The Planewalker's Guild (Pathfinder 1e) 

    Need a GM? Book me today!

  • thaen
    thaen
    Posts: 1,064

    Awesome!  Thanks for the feedback!

    Obsidian Portal Developer

  • UselessTriviaMan
    UselessTriviaMan
    Posts: 546

    I also very heartily approve of this improvement. 


    Ptolus, City by the Spire - 2016 Campaign of the Year

    "Please pay attention very carefully, because this is the truest thing a stranger will ever say to you: In the face of such hopelessness as our eventual, unavoidable death, there is little sense in not at least TRYING to accomplish all your wildest dreams in life."  - - Kevin Smith

  • NimrodYanai
    NimrodYanai
    Posts: 101

    I love this feature! Noticed it live a few weeks ago for the first time, and it was great!

  • Leonidas300
    Leonidas300
    Posts: 273

    Is there a way to change the color of this link to something else?

  • ragnarhawk
    Posts: 168

    @Leonidas300, this selector should target all of the links to characters:

    a[href^="/characters/"] 

    You should then be able to apply whatever styling you want to those links

    As a side note, if you just make the selector for "/" rather than "/characters/", it will target all direct wiki links (and skip anything with an http or https).  With a:not([href^="/"]) you could then target all "non-standard" links in your wiki to make them stand out

Sign In or Register to comment.

March 2024
Wrath of the Highborn

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions