Holiday Notice – Support Unavailable on April 18 and April 21

We just wanted to let you know that our support team will be offline on Friday, April 18th (Good Friday) and Monday, April 21st (Easter Monday) due to the holidays.
We'll be back on Tuesday, ready to assist you!

In the meantime, if you need any help, feel free to:

Amelia YouTube Channel

wpDataTables YouTube Channel

Thank you for your understanding, and we wish you a wonderful holiday weekend!

Okay
  Public Ticket #3046360
tooltip
Closed

Comments

  • Pavel started the conversation

    Hello,
    I have tried your plugin and I need to add a tooltip from the Betheme template to a table. Unfortunately after adding it, the tooltip hides in one cell. How to fix it?    Or advise me another solution, thank you. Pavel 

    Shortcode sample - 

    <span data-content="wpdt-do-shortcode" data-cell-id="20" data-shortcode="[tooltip hint="Jednoduchá, ale revoluční technika dýchání, která zlepší hospodaření vašeho těla s kyslíkem, podpoří vaše zdraví, úbytek hmotnosti a zvýší váš sportovní výkon, ať už jste člověk bez sportovních ambicí nebo vítěz triatlonu Ironman. Často dýcháme mnohem víc, než potřebujeme, aniž bychom si to uvědomovali. Tím si ničíme zdraví i kondici a způsobujeme si řadu zdravotních komplikací, od úzkosti a astmatu až po nespavost a srdeční problémy. "]Advantage Oxygen[/tooltip]">[tooltip hint="Jednoduchá, ale revoluční technika dýchání, která zlepší hospodaření vašeho těla s kyslíkem, podpoří vaše zdraví, úbytek hmotnosti a zvýší váš sportovní výkon, ať už jste člověk bez sportovních ambicí nebo vítěz triatlonu Ironman. Často dýcháme mnohem víc, než potřebujeme, aniž bychom si to uvědomovali. Tím si ničíme zdraví i kondici a způsobujeme si řadu zdravotních komplikací, od úzkosti a astmatu až po nespavost a srdeční problémy. "]Advantage Oxygen[/tooltip]</span>

  •  1,894
    Miloš replied

    Hi, Pavel 

    Thanks for reaching out to us.

    We don't currently have a built-in feature to create tooltips on hover,

    our developers will work to add it in the future, but i can't say an ETA on it.

     At this time, i can only suggest a custom workaround. 

    It is quite a custom solution, but, with some effort, it can be done,

    and all of this requires some level of skill with HTML and CSS.

    -

    In this example, i made a string type column, and directly in the cell typed in some HTML, 

    a DIV with an ID, with some text inside; 

    then nested a SPAN element inside, with the "hover text" inside that, like this :

    <div id="tooltipwrapper">mainText<span id="tooltiphover">hovertext</span></div>
    
    5796944191.png

    More about string type columns and their limitations and advantages here - https://wpdatatables.com/documentation/column-features/string-columns/

    Then with some custom CSS, I created a hover text above the field; 

    now, depending on exactly where you want to position it, you can experiment with some styles;

     I positioned it somewhere at the "middle top" above the cell, and you can choose whether to use px for pixels, or % for percentages of the screen for the values, such as width, positioning, margin, etc.

    div#tooltipwrapper{    position:relative;
    }
    span#tooltiphover{
    visibility: hidden;  width: 120px;  background-color: black;  color: #fff;  text-align: center;  padding: 5px 0;  border-radius: 6px;    position: absolute;  z-index: 1;  bottom: 100%;    left: 55%;    margin-left: -100px
    }
    div#tooltipwrapper:hover span#tooltiphover {    visibility: visible;
    }
    .wpDataTablesWrapper table.wpDataTable td {    overflow: unset !important;
    }
    
    5157473396.png

    Try this out if you wish, and experiment with the styles, to find what could be the best for your project.

    Here is a very useful resource with more information about creating tooltips with CSS - https://www.w3schools.com/css/css_tooltip.asp

    I hope that this helps.

    -

    If you need a higher level of custom support for that, we do not provide custom solutions, so we can only do our best to advise and give examples in situations when we have them.

    If you need to hire someone to do custom work, we can recommend WP Kraken, but we can't advise on their pricing.

    Let me know if you have any questions. Thank you.

    Kind Regards, 

    Miloš Jovanović
    [email protected]

    Rate my support

    Try our FREE mapping plugin! MapSVG - easy Google maps, interactive SVG maps and floor plans, choropleth maps and much more - https://wordpress.org/plugins/mapsvg-lite-interactive-vector-maps/

    wpDataTables: FAQ | Facebook | Twitter | InstagramFront-end and back-end demo | Docs

    Amelia: FAQ | Facebook | Twitter | InstagramAmelia demo sites | Docs | Discord Community

    You can try wpDataTables add-ons before purchasing on these sandbox sites:

    Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables