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,702
    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

    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