Click here to Skip to main content
15,868,016 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
As soon as the scrollbar is activated the arrow indicator leaves its central position above the tooltip and shifts to the side by the width of the scrollbar.

The arrow is created additionally to the tooltip using bootstrap.
Therefore the notation looks like this:


function arrowGenerator(color) {
  return {
    '&[x-placement*="bottom"] $arrow': {
      top: 0,
      left: 0,
      marginTop: "-0.95em",
      width: "3em",
      height: "1em",
      "&::before": {
        borderWidth: "0 1em 1em 1em",
        borderColor: `transparent transparent ${color} transparent`,
      },
    },
    '&[x-placement*="top"] $arrow': {
      bottom: 0,
      left: 0,
      marginBottom: "-0.95em",
      width: "3em",
      height: "1em",
      "&::before": {
        borderWidth: "1em 1em 0 1em",
        borderColor: `${color} transparent transparent transparent`,
      },
    },
    '&[x-placement*="right"] $arrow': {
      left: 0,
      marginLeft: "-0.95em",
      height: "3em",
      width: "1em",
      "&::before": {
        borderWidth: "1em 1em 1em 0",
        borderColor: `transparent ${color} transparent transparent`,
      },
    },
    '&[x-placement*="left"] $arrow': {
      right: 0,
      marginRight: "-0.95em",
      height: "3em",
      width: "1em",
      "&::before": {
        borderWidth: "1em 0 1em 1em",
        borderColor: `transparent transparent transparent ${color}`,
      },
    },
  };
}



The vertical scrollbar is only supposed to be visible when needed.

What I have tried:

I have tried variates of overflow-values. Also, the often suggested approaching adopting margin according to the scrollbar wouldn't work so far.
Posted
Updated 15-Feb-22 22:17pm
v3

1 solution

Try the following, just adjust the naming conventions to your own. Change your HTML markup to take more control on overflow:

<tr>
    <td class="hasTooltip">
        <div class="SerialNumberContainer">
            <div class="SerialNumber">3119985815206</div>
            <div class="SerialNumberTooltip">3119985815206</div>
        </div>
    </td>
</tr>


Table css:
.ResultsTable th, .ResultsTable td {
    border:1px solid black;    
    text-overflow:ellipsis;
}


CSS for divs etc:
.SerialNumberContainer {
    position: relative;
    z-index: 10;
}

.SerialNumber {
    width: 80px;
    overflow: hidden;
}

.SerialNumberTooltip {
    position: absolute;
    top: 10px;
    left: 2px;
    background-color: #FFF;
    border: 1px solid #CCC;
    display: none;
}

.SerialNumberContainer:hover {
    z-index: 20;
}

.SerialNumberContainer:hover .SerialNumberTooltip {
    display: block;
}


Hope this helps towards a solution.
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900