parent
9c499b5360
commit
7d55273e8b
4 changed files with 73 additions and 4 deletions
@ -0,0 +1,17 @@ |
|||||||
|
import { Component } from "react"; |
||||||
|
import * as React from "react"; |
||||||
|
import styles from './styles.module.scss'; |
||||||
|
|
||||||
|
export default class Tooltip extends Component<{ tooltipText: string }> { |
||||||
|
constructor(props) { |
||||||
|
super(props); |
||||||
|
} |
||||||
|
|
||||||
|
render() { |
||||||
|
return ( |
||||||
|
<div className={styles.tooltip}>{this.props.children} |
||||||
|
<span className={styles.tooltiptext}>{this.props.tooltipText}</span> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,46 @@ |
|||||||
|
/* 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: 120px; |
||||||
|
background-color: #555; |
||||||
|
color: #fff; |
||||||
|
text-align: center; |
||||||
|
padding: 5px 0; |
||||||
|
border-radius: 6px; |
||||||
|
|
||||||
|
/* Position the tooltip text */ |
||||||
|
position: absolute; |
||||||
|
z-index: 1; |
||||||
|
bottom: 125%; |
||||||
|
left: 50%; |
||||||
|
margin-left: -60px; |
||||||
|
|
||||||
|
/* Fade in tooltip */ |
||||||
|
opacity: 0; |
||||||
|
transition: opacity 0.3s; |
||||||
|
} |
||||||
|
|
||||||
|
/* Tooltip arrow */ |
||||||
|
.tooltip .tooltiptext::after { |
||||||
|
content: ""; |
||||||
|
position: absolute; |
||||||
|
top: 100%; |
||||||
|
left: 50%; |
||||||
|
margin-left: -5px; |
||||||
|
border-width: 5px; |
||||||
|
border-style: solid; |
||||||
|
border-color: #555 transparent transparent transparent; |
||||||
|
} |
||||||
|
|
||||||
|
/* Show the tooltip text when you mouse over the tooltip container */ |
||||||
|
.tooltip:hover .tooltiptext { |
||||||
|
visibility: visible; |
||||||
|
opacity: 1; |
||||||
|
} |
Loading…
Reference in new issue