ฝัง
- เผยแพร่เมื่อ 18 ก.ย. 2024
- This is the day-18 of #30days30submits. Today we are going to make advance tooltip/image hotspot with HTML, CSS & JS. It will be super responsive. Hope you will like it.
🔔subscribe and turn on the notification bell.
👉 source code: codepen.io/Web...
👉 #30days30submits : github.com/Sha...
👉 Basic Tooltip : • Simple CSS Tooltip | B...
▶ Also Watch :
Make a full website with HTML & CSS: • One Page Full Website ...
HTML & CSS Landing Page : • HTML & CSS Website Lan...
Mini Project for HTML & CSS : • Responsive Website Wit...
How To Make A WordPress website: • How To Make A Professi...
▶ Some useful Playlist :
HTML & CSS: • HTML & CSS
Vanilla JavaScript : • Vanilla JavaScript
Frontend Mentor Challenges: • Frontend Mentor Challe...
🌐 Join The Community :
Our website : webcifar.com/
Facebook Page : / webcifar
Facebook group : bit.ly/fb-group...
Instagram : / web_cifar
twitter : / webcifar
Github: github.com/Web...
#30days30submits #tooltip #imageHotspot
🔔subscribe and turn on the notification bell.
👉 source code: codepen.io/Web_Cifar/pen/yLOYoPR
👉 #30days30submits : github.com/ShaifArfan/30days30submits
Wow! This was a fantastic tutorial. Thank you very much!
Interesting and something new
Thanks🙏🏽
Amazing work!!
It is the only tutorial I found for this topic that show what I want to achieve!
Love your work!
Whaou! This is awesome. Thanks.
You're very welcome!
Love this 30 day challenge. You should do more later teaching me a lot thank you
More to come!
nice bro
Thank you ❤
Thank you for helping with the tooltip concept
❤️❤️❤️❤️
Great job done. Thank you for your helpful content.
You are welcome!
Ótimo vídeo parabéns ✌.
muito obrigado 🙏🏽
Is it possible to edit or adjust the position of the tooltip as shown in the image? Additionally, is there a way to implement a feature that allows users to upload a picture and resize it to align with the page layout or the format of the page alongside other sections?
Perfect!!
Is it possible to set a command to enable dragging and dropping the tooltip to a desired location?
Any idea why it's not want to work after include standard bootstrap css file?
how can we change the position of tooltip with respect to width or height of the screen? like you know if you scroll down tooltip will still in the same position and we won't be able to see it until we scroll up.
The Problem you mentioned, it happens when we use position absolute which is relative to the html/document. So you can prevent this by simply positioning them absolute with position relative to tool-tips section.
Can you please tell me the name of extension you're using for the theme of your vscode
Material Theme
Hi 👋
What is the principal difference between Tooltip and Hotspot..???
I would appreciate your answer..
Hotspot augments an image with interactive spots that contain contextually relevant information. For example, highlighting different spots on the maps and showing some statistical information.
Tooltip extension shows information regarding selected elements in a small container on top of all other content when the pointer is at the spot. For example, to describe the purpose of the particular button.
You can also read this article from CrocoBlock: crocoblock.com/blog/hotspots-vs-tooltips-how-to-use-them-to-max-effect/
are you from bangladesh ?
Yes
is there a way to include the main.js to index.html without running a script? like can i code it to html directly
You can write it inside a script tag in your HTML file.
this tooltip conflicts with bootstrap css