Painfully simple CSS question

Anvil Q&A
1

Following this tutorial, I want to add a tooltip over text when the user hovers over it. https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip

I’ve collected the CSS & added it to the theme.css file associated with the material design template. As an aside, adding the following to the top of the CSS broke the entire page design in the sense that the placement & colors changed. I added it to the footer, but I don’t know why it broke to begin with.

/* 
	Hover over tooltip. Added by Sergio on 08/10/2018
*/

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

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

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;

In either case, it’s now ostensibly working, but I don’t know where to place the actual HTML. If I edit the HTML directly then I’m editing the template. How do I associate that a given label or textbox should have that hover functionality? The HTML for it is simple:

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>
2

I’m pretty sure that’s where you’d use roles. For example, in my CSS I have this:

.anvil-role-scrollable-cart
{
    max-height: 55vh;
    overflow-y: scroll;
}

Then I set the role for a repeating panel like this:

self.repeating_panel_1.role='scrollable-cart'

That causes the repeating panel to pick up that CSS. There are more examples in the forums that I used to put that together.

2 Likes
3

@jshaffstall Yes, that looks like the right approach to me :slight_smile:

@dev01 let me know if you get it working using Roles.

4

@jshaffstall thanks! It worked.

1 Like