Adding a tooltip to texts in Tablepress

  • Resolved mariaevert

    (@mariaevert)


    3 years, 2 months ago

    Hello Tobias and thank you very much for an absolutely wonderful plugin.

    I am using Tablepress to list a list of houses, and I would like to make a little pop-up when hovering over the address of a house, showing a picture of the house.

    The CSS and HTML of the tooltip are shown here: http://jsfiddle.net/q69eh3Ld/

    Is it not correct that I should be able to add the CSS to the TablePress CSS, and then it should work? I assume that something must be changed, because I have tried different ways (including tablepress. in front and so on), but I can’t seem to make it work. I am afraid that my theme is somehow sabotaging it 🙁 Or else, my lack of CSS knowledge is…

    Would you be able to send me a hint in regards what I should change?

    Thank you very much in advance.

    Regards,

    Maria from Denmark

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

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    3 years, 2 months ago

    Hi,

    thanks for your post, and sorry for the trouble.

    From what I can see, adding that HTML code into a cell (I would however recommend to not include any line breaks, i.e. to write it as one line

    <div class="tooltip">Arnevangen 15<span class="tooltiptext"><img src="https://berteludsenshuse.dk/wp-content/uploads/2023/03/Bertel-Udsen-Brudedalen-29-10.jpg"/ width="200px"></span></div>

    ,except for line breaks that are added automatically, to make the content fit, if the column width is narrow), and adding that CSS code to the “Custom CSS” text area on the “Plugin Options” screen should be sufficient.

    Can you please try that?

    Regards,
    Tobias

    Thread Starter mariaevert

    (@mariaevert)

    3 years, 2 months ago

    Thank you for the reply! So very nice of you.

    I have tried it, but the text/image and tooltip just simply does not appear.

    So I have added the CSS is the TablePress’ Custom CSS:

    /* Tooltip container / .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; / If you want dots under the hoverable text */
    }

    /* Tooltip text */
    .tooltip .tooltiptext {
    visibility: hidden;
    width: 210px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text – see examples below! */
    position: absolute;
    z-index: 1;
    }

    /* Show the tooltip text when you mouse over the tooltip container */
    .tooltip:hover .tooltiptext {
    visibility: visible;
    }

    See screenshot:

    Then, I have inserted the HTML in the table (and refrained from using new lines, as you suggested) and tried two different uses, one with and one without a picture:

    But in the end, the value in the cells including the tooltip is simply not shown:

    But if you say this should work, then the problem is perhaps my theme, and I should add the css to the theme it self.. Though I would really like not to mess too much with it. Do you think there is an alternative?

    Thank you very much in advance.

    Regards, Maria

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    3 years, 2 months ago

    Hi,

    Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

    Regards,
    Tobias

    Thread Starter mariaevert

    (@mariaevert)

    3 years, 1 month ago

    Yes, this is the link: https://berteludsenshuse.dk/placeringer/

    At the very button of the Tablepress there is the row where I tested the tooltip function.

    Here is the source: view-source:https://berteludsenshuse.dk/placeringer/. Here you can see that <link rel=’stylesheet’ id=’tablepress-default-css’ … is imported and contains the tooltip CSS.

    Thank you so much again for your time.

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    3 years, 1 month ago

    Hi,

    thanks for the link! Indeed, the cause for this problem is some interference by your theme. Namely, it includes the Bootstrap framework, which happens to use a .tooltip CSS class as well.

    To work around that, you can simply use different CSS classes for this, e.g. .mytooltip. Just use that instead of .tooltip in the CSS code (three times), as well as in the first piece of the HTML code, <div class="mytooltip">.

    Regards,
    Tobias

    Thread Starter mariaevert

    (@mariaevert)

    3 years, 1 month ago

    You are so kind, thank you very much. I have renamed the classes, and now the tooltip is shown. Progress! But unfortunately is seems like it just ignores the “visibility: hidden;”-part, so it just shows the picture all the time instead of just on hover. Sigh.

    I am unsure.. could this still be an interference with the theme?

    I thank you for your time.

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    3 years, 1 month ago

    Hi,

    you used uppercase Mytooltip1 in the CSS, but lowercase mytooltip1 in the HTML. Both must be the same though! (I recommend using the lowercase version.)

    Regards,
    Tobias

    Thread Starter mariaevert

    (@mariaevert)

    3 years, 1 month ago

    That was an embarrassing error, so sorry.

    Thank you SO much for your time. I will go ahead and buy the pro version right away, as my way of thanking for your time.

    Thank again, you are a life saver 🙂

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    3 years, 1 month ago

    Hi,

    no problem! Great to hear that it’s working now 🙂

    And thanks for getting the Pro version, I really appreciate it!

    Best wishes,
    Tobias

    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Adding a tooltip to texts in Tablepress’ is closed to new replies.