WP-96: Tooltip Web Component #78
Conversation
|
|
||
| <link rel="stylesheet" href="../../dist/tooltip/style.css" media="all"> | ||
| <script type="module" src="../../dist/tooltip/index.js"></script> | ||
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> |
There was a problem hiding this comment.
@harshdeep-gill Let's make this file bare-bones and only contain code and styles that are absolutely required (won't work without it)
| <main > | ||
| <tp-tooltip> | ||
| <tp-tooltip-trigger> | ||
| <div class="my-btn">Hover Me</div> |
There was a problem hiding this comment.
@harshdeep-gill Let's use a button tag so the user has full control over the markup
| </head> | ||
| <body style="padding: 0; margin: 0"> | ||
| <main > | ||
| <tp-tooltip> |
There was a problem hiding this comment.
@harshdeep-gill Let's remove this component, and allow the user to be define their own ID
| } | ||
|
|
||
| tp-tooltip-popover { | ||
| --arrow-top-positioning: 0; |
There was a problem hiding this comment.
@harshdeep-gill Let's rename to --tp-tooltip-popover-arrow-top-position
|
|
||
| tp-tooltip-popover { | ||
| --arrow-top-positioning: 0; | ||
| --arrow-left-positioning: 0; |
There was a problem hiding this comment.
@harshdeep-gill Let's rename to --tp-tooltip-popover-arrow-left-position
| @@ -0,0 +1,29 @@ | |||
| tp-tooltip-trigger > button { | |||
| background-color: transparent; | |||
There was a problem hiding this comment.
@harshdeep-gill Let's remove all styles that are not essential
| &::backdrop { | ||
| width: 0; | ||
| height: 0; | ||
| border-width: 8px; |
There was a problem hiding this comment.
@harshdeep-gill Let's make all these styles as bare-bones as possible
| <i>i</i> | ||
| </div> | ||
| </tp-tooltip-trigger> | ||
| <tp-tooltip-popover style="width: 265px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia molestiae distinctio tempore nobis rem provident libero voluptatum excepturi optio pariatur, accusantium minus ex, doloremque a, repellendus iure quae eaque consectetur!</tp-tooltip-popover> |
There was a problem hiding this comment.
@harshdeep-gill Let's add <tp-tooltip-arrow></tp-tooltip-arrow> here so that the user can have full control over the arrow's styles
Hi @junaidbhura , please take a look at this PR, I am raising this to seek your insights whether I am heading in the right direction.
Here, I have used popover API as you suggested.
Features:
Please ignore any hard coded values in the code, I am still working on as making this more customizable.
I would suggest you to please run it locally to have a better look at functionality.
Thank you.