Tooltip feedback

import Css
import Css.Global
import Css.Transitions
import Html.Styled as Html exposing (Html)
import Html.Styled.Attributes as Html


tooltip : Html msg
tooltip =
    Html.div
        [ Html.css
            [ Css.position Css.relative
            , Css.hover
                [ Css.Global.descendants
                    [ Css.Global.selector ".tooltip__content"
                        [ Css.opacity <| Css.num 1
                        , Css.pointerEventsAll
                        ]
                    ]
                ]
            ]
        ]
        [ Html.div
            [ Html.class "tooltip__content"
            , Html.css
                [ Css.opacity Css.zero
                , Css.position Css.absolute
                , Css.backgroundColor <| Css.hex "333333"
                , Css.width <| Css.px 200
                , Css.color Colors.white
                , Css.bottom <| Css.pct 100
                , Css.left <| Css.pct 50
                , Css.transform <| Css.translate2 (Css.pct -50) (Css.px -8)
                , Css.Transitions.transition
                    [ Css.Transitions.opacity 200 ]
                , Css.after
                    [ Css.property "content" " "
                    , Css.position Css.absolute
                    , Css.border3 (Css.px 8) Css.solid Css.transparent
                    , Css.borderTopColor <| Css.hex "333333"
                    , Css.bottom Css.zero
                    , Css.left <| Css.pct 50
                    , Css.transform <| Css.translate2 (Css.pct -50) (Css.px 16)
                    , Css.height Css.zero
                    , Css.width Css.zero
                    , Css.Transitions.transition
                        [ Css.Transitions.opacity 200 ]
                    ]
                ]
            ]
            [ Placeholders.Block.view block ]
        , Html.div
            [ Html.class "tooltip__trigger" ]
            [ Placeholders.Rectangle.view rectangle
            ]
        ]