title – mouse over

  • Resolved cheryanne

    (@cheryanne)


    4 years, 10 months ago

    Hi there,

    I love this plugin and have been using it for quite a while.

    Until something updated (either the plugin, theme or WP) the title of each popular post in the thumbnail grid was shown as a mouseover. I’m not sure how I managed to disable this but it no longer works on my display. Any hints would be greatly appreciated.

    Thanks,
    Chery.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Hector Cabrera

    (@hcabrera)

    Hi @cheryanne,

    I’m guessing you’re talking about the tooltip text browsers display when hovering over some links with your mouse, correct? If so, it wasn’t something you did. Actually that’s by design and for usability / accessibility reasons (see related issue here).

    I see you’re using a custom HTML structure for your popular posts list (it looks fantastic btw!) If you could please share the code you’re using (go to Widgets > WordPress Popular Posts > HTML Markup Settings) I may be able to provide some suggestions so you can get the tooltip back.

    I love this plugin and have been using it for quite a while.

    Thank you! I’m glad you like it!

    Thread Starter cheryanne

    (@cheryanne)

    Hey @hcabrera

    Thank you for your help. I’m not using much in HTML markup settings:
    Before / after Popular Posts:`<ul class=”wpp-grid”> </ul>
    <li>
    <a href=”{url}”>{thumb_img}</a>
    </li>`

    However, I am using custom css:

    /* start of wp popular posts css */
    #wpp-4 {
    color: #222222;
    }

    .wpp-grid {
    overflow: hidden;
    margin: 2.5em auto;
    padding: 0;
    }

    .wpp-grid li {
    position: relative;
    display: inline;
    float:left;
    padding: 0;
    list-style: none;
    width:20%;
    }

    .wpp-grid li .wpp-thumbnail {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
    }
    /* end of wp popular posts css */

    • This reply was modified 4 years, 10 months ago by cheryanne.
    Thread Starter cheryanne

    (@cheryanne)

    <li>
<a href="{url}">{thumb_img}</a>
</li>

    This is what the HTML markup says.

    • This reply was modified 4 years, 10 months ago by cheryanne. Reason: fixed it in previous post
    Plugin Author Hector Cabrera

    (@hcabrera)

    Awesome, thanks for sharing. Try this:

    <li>
<a href="{url}" title="Permalink to: {text_title}">{thumb_img}</a>
</li>

    Feel free to change the “Permalink to: {text_title}” bit to whatever you want (but make sure to keep the {text_title} part). I suggest not leaving it as just “{text_title}” because the title itself is being added to the <img> tag already and having it being repeated twice per each popular post might result in accessibility/usability issues for some of your visitors.

    Update: leaving it as just “{text_title}” should be fine, after all. I just remembered that with version 5.0 the plugin no longer uses the post title as the thumbnail’s ALT text so it (probably) should be fine ^^

    If you have any additional questions don’t hesitate to ask, alright?

    • This reply was modified 4 years, 10 months ago by Hector Cabrera. Reason: Fixed typos
    • This reply was modified 4 years, 10 months ago by Hector Cabrera. Reason: Added note about the ALT attribute
    Thread Starter cheryanne

    (@cheryanne)

    Thank you – perfect!

    And kudos for coming up with such an elegant solution.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘title – mouse over’ is closed to new replies.