#css button hover effects | Explore Tumblr posts and blogs

codenewbies · 2 years ago

Photo

CSS Flipping Button Hover Animation

#css button hover effects #css flipping buttons #flipping button animation #learn css animation #css animation examples #pure css animation #css animation #html css #animation #codenewbies

2 notes · View notes

codingflicks · 6 months ago

Text

CSS Glowing Button

#html css buttons #css button hover effects #html css #neduzone #css gradient #css glowing buttons #css animation examples #glowing button html css #css #html #css3 #frontend #frontenddevelopment

0 notes

divinector · 7 months ago

Text

CSS Social Media Button Hover

#html css #css button hover effects #animated social media buttons #button hover animation css #css animations #css animation tutorial #css animation examples #divinectorweb #code #css #html #css3 #webdesign

0 notes

codeajaymargam · 2 years ago

Text

Learn how to design CSS hover effects

#css #css hover effects #css animations #css effects #css designs #css buttons #css coding #codeaj

0 notes

stranger-avenue · 9 days ago

Text

misc sites for building/decorating sites!

basically part 2 of this [some of these are now down/defunct unfortunately but we always have more!!] semi organized..

website building intro to html in depth explanation on making a website tiled bg css gradient generator layout generator hugeeee resource list another resource site css animation library shiny button generator tiled bg minifier retro website templates decor userbar generator [flashing] buttons assorted links to graphics collections kewl text [flashing on hover] blinkies, stamps, and userboxes stickers [flashing] more 88x31 buttons [flashing] another graphics collection xbox 360 gamerpics 80x15 button generator wmp archive cursors geocities blinkies search [flashing] pixels and 88x31 buttons search internet bumper stickers userbox generator

sites like glitter graphics zwani jelly muffin zingerbug

fun! status cursor effects motherfucking website better motherfucking website best motherfucking website poll maker mood counter tamanotchi webgarden web ring list gify pet

184 notes · View notes

womensflesh · 2 months ago

Text

✰ ✰ ✰ PUMPKIN CAT THEME ✰ ✰ ✰

...by Mikolaj @pervertpet :-))

LIVE PREVIEW 1 x LIVE PREVIEW 2

(...please go check these out the png/still images don't do it justice -_-.)

GET THE CODE HERE

Features and tips below the cut.

Features:

Falling leaves & floating blobs/blurs - three custom blob colors for the blobs...

Falling sparkles (one color, custom)

Ghost cursor

Trailing image cursor (custom image, customizable speed of the trail + length of trail)

Custom cursors for both normal + link/image hover.

Fancy link effects.

Glowing + dropshadow title and desc.

4-song music player.

Hover image links (flip card - hover over the sidebar and the links show up...!)

Optional image border + glitter background for the title font.

More that I'm forgetting because I am doopid.

+ a couple of tips.

Toggle things on and off a few times if they don't work... Tumblr's if meta feature is kinda wonky, so sometimes you need to do that.

I left a full list of the fonts I've installed via my custom CSS sheet + my Halloween fonts! The ones with stars beside them in the notes under <head> are better suited for title or other large fonts (the pagination buttons)

Transparent PNGs look best as the sidebar.

If you're wondering how I got the shaking font in my desk, apply the class "shk" to anything you want to shake. span class and div class both work. Like so:

If there's anything you're having issue with let me know and I'll try my best to help :)

#my themes #themes #tumblr themes

71 notes · View notes

amphibianauthor · 5 months ago

Text

Ao3 Coding References

I recently made a code-heavy choose your own adventure fic, and I wanted to compile all of the really helpful resources I've found along the way. I know little to nothing about HTML but having all of these resources were amazingly helpful.

Basics:

This Ao3 Posting Doc converts Google doc into HTML, adding bold, underline, italics, strikethrough, paragraph breaks, and centered text. Major game changer for heavy HTML works

The Fic Writer's Guide to Formatting by AnisaAnisa: This is a masterpost in itself, covering links, images, boxes, borders, fonts etc. So I'm putting it here since it's amazingly helpful

HTML References by W3 schools- I've linked the HTML colors here, but this is a platform designed to help people learn/reference HTML

This got long: Text resources, fancy formatting & other website formats below the cut

Text resources:

Font's chapter: The Fic Writer's Guide to Formatting: okay I know I already linked it above, but listen it's very good so I'm linking again

Fonts colors and work skins oh my by Charles_Rockafeller takes fonts to a different level.

Multicolored text skin by ElectricAlice GRADIENT TEXT

All the Emoji by CodenameCarrot while Ao3 has signifigantly improved on hosting emojis, this code helps with using some more unconventional emojis. Amazing resource.

Upsidedown text and Zalgo text generators - these specific text generators allow for you to see their direct HTML codes

Workskin for showing and hiding spoilers by ElectricAlice makes text appear when hovered/clicked. Amazing for Trigger Warnings

Make text appear when you click [Work skin] by Khashana clickable end notes buttons for your work, similar to the spoiler button text

Desktop/mobile friendly short tooltips workskin by Simbaline

How to make Linked Footnotes on Ao3 by La_Temperanza

User-selectable Names in a Fanfic work by fiend Ever want people to select between different names in a fanfic? I could also see this used as ability to switch gender in a fanfic.

AO3 Comic Text Effects using CSS by DemigodofAgni Ever want a giant comicbook POW in your fic?

How to override the Archive's Chapter Headers by C Ryan Smith

Fancy Formatting:

Embedding youtube videos on ao3 to scale with the screen by pigalle add youtube videos mid fic

Conlangs and Accessibility by Addleton this fic instructs how to have accessible translations in fic

How to mimic letters, fliers and stationary without using images by La_Temperanza Really helped with box formatting

Decorations for Fic (HTML/CSS): Fanart, Dividers, Embedded Songs and More by Jnsn this has SO MANY cool coding features, including a chessboard that moves when you hover over it

How to make a News Website Article Skin on Ao3 by ElectricAlice

Screenplay skin by astronought

How to make custom Page Dividers by La_Temperanza

How to make Images Fit on Mobile Browsers by La_Temperanza great image adding code

How to Wrap text around images by La_Temperanza image text wrapping

How to insert Gmail emails in your fic by DemigodofAgni

How to mimic Email Windows by La_Temperanza

How to make a Choose Your Own Adventure Fic by La_Temperanza allows for clickable links and hidden text.

Personal Experiment with HTML and CSS by MohnblumenKind This has a variety of help, Chapter 6 & 7 were great for choose your own adventure, Chapter 4 talks about columns and skins, and Chapter 10 even has a newspaper made entirely from site code.

Learn to Microsoft Excel by ssc_lmth insert a spreadsheet in your fic

Ao3 Work skin: a simple scoreboard by revanchist shows how to code a scoreboard

Colossal Cave Adventure by gifbot Working Keyboard anyone?

How to make a rounded playlist by La_Temperanza Ever want to show a character's music playlist within your fic

Tabbing experiment by gifbot (clickable tabs)

Repository by gaudersan google searches, ao3 stats, instagram and text messages galore

Workskin for in Universe Investigative/Mission Report with Redaction by wafflelate case files/CSI reports

CSS in Testing/Bleed Gold by InfinitysWraith Masterclass in cool formatting, including overidding default headers, Doors opening animation, Grid interactive photos, Hovering to change a photo, Retroactive text etc.

CSS in Testing:Second in Series by InfinitysWraith: Interactive keypads, Mock news site and interactive locking mechanism.

Other Websites:

Texting

--How to make iOS Text Messages on Ao3 by CodenameCarrot, La_Temperanza

--A Quick Generator for Embeddable iOS Text Messages by 221b_ee

--imessage Skin by Adzaema

--Retro imessage by Adzaema

--Basic Text Message Work Skin by ProfessorMotz

-- Bubble platform [workskin] by Khashana

Tumblr

--Tumblr style CSS Tweaks by Aposiopesis

--Ao3 Workskin Testing and Tutorials by junietuesday25 tumblr DM

--How to make Tumblr Posts on Ao3 by phyyripo

Twitter

--Repository - Twitter by gadaursan

-- How to mimic Social Media in an Ao3 work by aerynevenstar

--Twitter Work Skin Template by etc e tal

--Twitter Workskin: Tweets and Profile by starskin

--Twitter Mock-Up by TheBrookesNook

Ao3

--How to mimic Authors notes and Kudos/Comment Buttons by La_Temperanza

--How to mimic AO3 Comments by bittermoons

--How to add mobile Ao3 in your fic by DemigodofAgni

--How to make a fanfic style header Ao3 style by ElectricAlice

Facebook/Instagram/Whatsapp

--Whatsapp Group Chat builder by FestiveFerret

--How to make Facebook Messenger Chat on Ao3 by ran_a_dom

--Whatsapp Work Skin Template Revamped by etc e tal

--Whatsapp group chat skin by ovely

--Instagram DMs for Ao3 by monarch_rhapsodies

--How to make Instagram DM mockup by xslytherclawx

Snapchat

--Snapchat skin by Azdaema

--Snapchat Template for Ao3 by starskin

Reddit/Forum

--UPDATED Reddit Skin by diamine

--2020 Reddit Work Skin by timstokerlovebot

--Reddit Work Skin CSS & HTML by knave_of_swords

--How to mimic Social Media in an Ao3 work by aerynevenstar

--template Reddit Skin by spookedcroon

--Ao3 workskin for Forum Thread by fencesit

--How to mimic 4chan posts without just taking screenshots of 4chan

Twitch/Youtube

--Mimicking Twitch Chat for fics by Ultraviollett

--Workskin testing by tohmas [Youtube comments]

Discord/Slack/Zoom

--2023 Discord Theme Workskin by TrojanTeapot

--Discord Work Skin by unpredictableArtist

--Discord (Dark Theme) Workskin by Heterochromia_Mars

--Ao3 Workskin Testing and Tutorials by junietuesday25

--Slack Workskin by Khashana

--Zoom inspired Ao3 skin by mystyrust

Video Game Dialog Mimics

--Dialog [workskin] by Clover_Zero

--Dialogue Workskin (with parallax BG effect) by mystyrust

--My S Ranks--System Windows by unpredictableArtist [computer dialog workskin]

--Tutorial: Ace Attorney Work Skin by QuailFence

--Among Us Ao3 skin by mystyrust

--How to Mimic Undertale Fonts on Ao3 by La_Temperanza

--Tutorial:Rain Code Work Skin by faish

Misc. Sites

--How to mimic Deadpool Thinking boxes by La_Temperanza

--FetLife Skin [Work Skin] by Khashana

--Replika workskin by FaeriMagic

--Disco Elysium workskin by SarunoHadaki

--StarTrek PADD workskin by duskyspirit

--Wikipedia article work skin by styletests

--Yelp Reviews by kiwiana

--Amazon Reviews by kiwiana

--MDZS-themed letters by allollipoppins

--A Newbie's Guide to Podficcing by Adzaema [skin for podfics]

Bonus: Ever wanted to see how crazy HTML can be on AO3? Try playing But can it run Doom? or Tropémon by gifbot

Happy Creating!

Last updated: Aug 19 2024

#archive of our own #html coding #fanfic #Hopefully I'll update this list as I find more resources #ao3 #ao3 writer #ao3 fanfic #fanfiction #ao3fic

15 notes · View notes

cssscriptcom · 1 year ago

Text

45 CSS-Only Buttons For Modern Web Styling

This is a collection of 45 CSS-only button designs for modern web projects to improve user experience and engagement. These 45 unique designs, all made purely with CSS/CSS3, come with intriguing hover effects that can captivate and retain user attention. Whether for a call to action, navigation, or simple user input, these buttons cater to a wide range of use cases. How to use it: 1. Go to the…

View On WordPress

4 notes · View notes

freefrontend-blog · 1 year ago

Text

UI Button with Mix-Blend-Mode: https://codepen.io/dan10gc/pen/EQbjgP More CSS button hover effects: https://freefrontend.com/css-button-hover-effects/

#html #css #javascript #codepen #webdevelopment #webdesign

3 notes · View notes

thewebcomicsreview · 2 years ago

Note

More ComicEasel Character picture questions! So I was reading your post replying to "I hope this isn't as stupid of a question as I'm worried it is but hi. How do you make a website to host a webcomic?" (no links in ask sry) and even with that lovely explanation and example CSS I genuinely cannot for the life of me figure out how to apply it. I opened the Customize Theme button and added to the Additional CSS but nothing shows up. Should I be adding it elsewhere?

To catch everyone up, the ask is referring to this post. On my comic’s site, there’s a section to the left of every page with a picture of all the major characters in the page where you can mouse over it to get a reminder bio of who the character is.

This is useful if, say, I bring Cassette back into the story in Chapter 7 when she hasn’t been in a non-bonus page since Chapter 1 and people might’ve forgotten who she is. Click on the picture also brings you to an archive of every page with that character on it. Here’s how I do it! (Note, I use Wordpress with the Comic Easel plugin)

1.

First, I have to tell Comic Easel about the character. This is simple enough. The name is the character’s name, the description is what shows up, and the “slug” is used by the CSS

2.

Then, in the Widgets section, I add the “Comic Easel - Cast Hover” widget to where I want it. In this case, left of the comic.

3.

Then, I go to Additional CSS, and add a section to set the background image of all the character boxes. I start with on that applies to all the icons with a placeholder image, and then add the pictures for each character. This is where you use the slug.

If you’re having trouble knowing what a box is called, you can right click it on your site and inspect element to see.

Then, when adding the comic, I simply list all the characters in the characters section, which is not the tags section. (You can also see in this screenshot that you can do this whole same thing with Locations if that makes sense for your comic, but I don’t).

Finally, I don’t do this on my cast icons, but if you’ve been poking around on my site you may have noticed that my Patreon banner is greyscale but if you mouse over it it turns into color and gets a little bigger (and if you think that’s cool, check out what happens if you click it!). You’re probably wondering how I did that cool effect. Well...I forget! It’s Javascript somewhere but I can’t find it on the site! Probably should’ve written that down somewhere!

6 notes · View notes

coralfestivalcollection · 14 hours ago

Text

Best Press Component Manufacturing Service in Hosur - TSK

Understanding the Press Component: A Fundamental Element in Web Development

In the realm of modern web development, interactivity plays a crucial role in crafting engaging user experiences. One of the core elements that allow users to interact with websites and applications is the Press component. From submitting forms to navigating between pages, the Press component—often represented by buttons or clickable elements—forms the backbone of user interaction on the web. This blog will explore the fundamental aspects of the Press component, its importance, and how developers can implement it effectively.

What is a Press Component?

The Press component refers to an interactive element within a website or application that responds to user input, typically in the form of a click or tap. Most commonly, this takes the shape of a button, link, or other clickable areas that, when pressed, trigger an event or action on the website. Examples include submitting a form, triggering a modal popup, navigating to a new page, or changing content dynamically.

While simple in concept, the Press component is a vital part of the web's interactive experience. Without it, websites would be static and unresponsive, hindering user engagement.

Why is the Press Component Important?

User Interaction: At its core, the Press component facilitates user interaction, allowing visitors to perform actions on a webpage. Whether it's clicking a "Submit" button, pressing a "Next" link, or toggling between different sections of content, these interactive elements are central to how users navigate and engage with digital content.

Feedback and Usability: A critical aspect of the Press component is the feedback it provides. Users need to know that their actions have been acknowledged. Visual feedback, like changes in button color, text changes, or animations, assures users that their input was successful. This immediate feedback not only improves usability but also contributes to a positive user experience.

Mobile Responsiveness: With the rise of mobile web browsing, ensuring that Press components are optimized for touchscreen interactions is essential. Press components must be large enough to be easily tappable on small screens, and they should offer smooth responses to touch gestures. Mobile-friendly design is no longer optional but a necessity.

Accessibility: An often overlooked yet crucial benefit of the Press component is its role in web accessibility. Properly designed Press components with clear labels, focus states, and support for keyboard navigation ensure that users with disabilities can interact with a website effectively.

How to Implement a Press Component

Basic HTML and CSS

The most fundamental way to create a Press component is through simple HTML and CSS. For example, a basic button can be created using the <button> tag:

<button>Click Me</button>

By adding some CSS, you can make the button more interactive:

button {

padding: 10px 20px;

background-color: blue;

color: white;

border: none;

cursor: pointer;

}

button:hover {

background-color: darkblue;

}

In this example, the button changes color when hovered over, providing visual feedback to the user.

Adding JavaScript for Interactivity

To enhance the Press component further, JavaScript is often used to add functionality. For example, you can use JavaScript to trigger an action when the button is clicked, such as showing an alert or changing the content on the page:

<button onclick="alert('Button Pressed!')">Press Me</button>

In this case, when the user clicks the button, an alert box will appear on the screen, confirming that the press action was successful.

Advanced Implementation with Frameworks

For more complex applications, many developers turn to JavaScript frameworks like React, Vue, or Angular. These frameworks offer more powerful ways to manage user interactions and state changes within the application.

For example, in React, a Press component might look like this:

import React, { useState } from 'react';

function PressButton() {

const [pressed, setPressed] = useState(false);

const handlePress = () => setPressed(!pressed);

return (

{pressed ? 'Pressed' : 'Press Me'}

</button>

);

}

Here, the button changes color based on its state (pressed or not), making the interaction even more dynamic and engaging.

Best Practices for Press Components

Clear Labeling: Buttons and other pressable elements should have clear, descriptive labels that indicate their function. For example, use labels like "Submit," "Next," or "Learn More" rather than ambiguous terms.

Visual Feedback: Always provide visual feedback when a Press component is activated. This could be a color change, a shadow effect, or a subtle animation.

Mobile Optimization: Ensure that Press components are large enough for mobile users to interact with easily. Make buttons and links easily tappable, with enough spacing to prevent accidental clicks.

Keyboard Accessibility: Make sure interactive components are accessible via keyboard. Buttons should be focusable and activated using the Enter or Space keys, providing an inclusive experience for all users.

Conclusion

The Press component is a fundamental part of the web development toolkit. It empowers users to interact with websites and applications, triggering actions and events that shape the user experience. By understanding its importance and implementing it with care—through clear labeling, visual feedback, and accessibility considerations—developers can create seamless, engaging, and user-friendly digital experiences. Whether it's a simple button or a complex interactive element, mastering the Press component is key to building modern, functional, and responsive websites.

#Press Component #TSK

0 notes

codenewbies · 8 days ago

Text

CSS Button Border Animation

#css button hover effects #html css #codenewbies #frontenddevelopment #html5 css3 #css animation examples #pure css animation #css animation tutorial #webdesign #css #css button border animation #animation

0 notes

codingflicks · 11 months ago

Text

Awesome CSS Button Hover Animation

#css button animation #css button hover effects #html css buttons #css animation examples #css animation #css buttons #button animation css #animation #code #learn to code #html css #codingflicks #html #css #css3 #frontenddevelopment

0 notes

divinector · 9 months ago

Text

Creative CSS Button Hover

#css button hover effects #css buttons #css animation tutorial #css animation examples #divinector #html css #frontenddevelopment #css #html #css3 #html5 #learn to code #learn css #learn css animation

1 note · View note

playstationvii · 1 month ago

Text

Certainly! We can build upon the PlayStation 7 UI framework with even more sophisticated elements to support a streamlined user experience and optimized performance. Let’s look at features like contextual help overlays, responsive design for various screen types, localization support, and performance optimizations to ensure the UI is both functional and adaptable.

7. Contextual Help Overlays

For a user-friendly experience, contextual help overlays guide users through advanced features. This can include on-hover or on-click explanations of interface elements, which is especially useful for onboarding and accessibility.

// HelpOverlay.tsx component for contextual help

import React, { useState } from 'react';

interface HelpOverlayProps {

message: string;

position: { x: number; y: number };

}

export const HelpOverlay: React.FC<HelpOverlayProps> = ({ message, position }) => {

return (

{message}

</div>

);

};

// Usage in another component

import React, { useState } from 'react';

import { HelpOverlay } from './HelpOverlay';

export const Settings: React.FC = () => {

const [showHelp, setShowHelp] = useState(false);

const [helpPosition, setHelpPosition] = useState({ x: 0, y: 0 });

const handleMouseEnter = (event: React.MouseEvent) => {

setHelpPosition({ x: event.clientX, y: event.clientY });

setShowHelp(true);

};

return (

<button onMouseEnter={handleMouseEnter} onMouseLeave={() => setShowHelp(false)}>

Customize Theme

</button>

{showHelp && <HelpOverlay message="Change your theme here" position={helpPosition} />}

</div>

);

};

8. Responsive Design for Multiple Screen Types

As gaming consoles increasingly connect to diverse displays, the UI should support responsive design to adapt to both large TV screens and smaller monitors. This involves using CSS flexbox, grid layouts, and media queries to maintain usability on various screen sizes.

/* styles/Responsive.module.css */

.container {

display: grid;

grid-template-columns: 1fr 1fr;

}

@media (max-width: 768px) {

.container {

grid-template-columns: 1fr;

}

.largeText {

font-size: 2rem;

}

@media (max-width: 768px) {

.largeText {

font-size: 1.2rem;

}

9. Localization Support for Global Users

To support users worldwide, the UI should offer localization for different languages. This can be done using a localization library (e.g., react-intl or i18next) to manage text translations and formatting.

// Example using i18next for localization

import React from 'react';

import { useTranslation } from 'react-i18next';

export const Settings: React.FC = () => {

const { t } = useTranslation();

return (

<h1>{t('settings.title')}</h1>

<button>{t('settings.changeTheme')}</button>

</div>

);

};

With a translation file (e.g., en.json):

{

"settings": {

"title": "Settings",

"changeTheme": "Change Theme"

}

10. Performance Optimizations for Fluid UI Experience

For smooth performance, code splitting and lazy loading help manage resources effectively by only loading necessary UI components when they are needed.

// Lazy loading components in App.tsx

import React, { Suspense, lazy } from 'react';

const Home = lazy(() => import('./components/Home'));

const Games = lazy(() => import('./components/Games'));

export const App: React.FC = () => (

<Suspense fallback={<div>Loading...</div>}>

</Routes>

</Router>

</Suspense>

);

11. State Management for Optimized Data Handling

Using Redux or Context API can ensure global state management for user preferences, UI theme, and accessibility options, making data consistent across the entire UI. This helps components access the necessary state without excessive re-renders.

// Example using Context API in UserContext.tsx

import React, { createContext, useState, useContext } from 'react';

interface UserPreferences {

theme: string;

voiceCommands: boolean;

}

interface UserContextProps {

userPreferences: UserPreferences;

setUserPreferences: (prefs: UserPreferences) => void;

}

export const UserContext = createContext<UserContextProps | undefined>(undefined);

export const UserProvider: React.FC = ({ children }) => {

const [userPreferences, setUserPreferences] = useState<UserPreferences>({ theme: 'light', voiceCommands: false });

return (

<UserContext.Provider value={{ userPreferences, setUserPreferences }}>

{children}

</UserContext.Provider>

);

};

export const useUserContext = () => useContext(UserContext);

12. Dark Mode and Dynamic Themes

For better visual ergonomics, adding dark mode and dynamic theme switching allows users to adjust the interface’s look and feel according to their preference.

// ThemeSwitcher.tsx for toggling light/dark modes

import React, { useContext } from 'react';

import { UserContext } from '../context/UserContext';

export const ThemeSwitcher: React.FC = () => {

const { userPreferences, setUserPreferences } = useContext(UserContext);

const toggleTheme = () => {

setUserPreferences({

...userPreferences,

theme: userPreferences.theme === 'light' ? 'dark' : 'light',

});

};

return (

Switch to {userPreferences.theme === 'light' ? 'Dark' : 'Light'} Mode

</button>

);

};

Using CSS variables for theme colors:

/* styles/theme.css */

:root {

--background-color: white;

--text-color: black;

}

[data-theme='dark'] {

--background-color: black;

--text-color: white;

}

body {

background-color: var(--background-color);

color: var(--text-color);

}

Summary

With these additions:

1. Contextual help overlays improve accessibility.

2. Responsive design ensures usability across devices.

3. Localization allows global users to interact comfortably.

4. Lazy loading and state management optimize UI performance.

5. Dark mode and dynamic themes personalize the user experience.

These features aim to make the PlayStation 7 interface versatile, globally adaptable, and highly user-centric. Let me know if there’s a specific feature here that could use more detail or customization for your vision!

#dark mode #contextual help overlays improve accessibility #responsive design #localization global support #playstation7 #ps7 #deardearestbrands #digitalconsole #framework

0 notes

jcmarchi · 1 month ago

Text

Clarifying the Relationship Between Popovers and Dialogs

New Post has been published on https://thedigitalinsider.com/clarifying-the-relationship-between-popovers-and-dialogs/

Clarifying the Relationship Between Popovers and Dialogs

The difference between Popovers (i.e., the popover attribute) and Dialogs (i.e., both the <dialog> element and the dialog accessible role) is incredibly confusing — so much that many articles (like this, this, and this) have tried to shed some light on the issue.

If you’re still feeling confused, I hope this one clears up that confusion once and for all.

Distinguishing Popovers From Dialogs

Let’s pull back on the technical implementations and consider the greater picture that makes more sense and puts everything into perspective.

The reason for this categorization comes from a couple of noteworthy points.

First, we know that a popover is content that “pops” up when a user clicks a button (or hovers over it, or focuses on it). In the ARIA world, there is a useful attribute called aria-haspopup that categorizes such popups into five different roles:

menu

listbox

tree

grid

dialog

Strictly speaking, there’s a sixth value, true, that evaluates to menu. I didn’t include it above since it’s effectively just menu.

By virtue of dialog being on this list, we already know that dialog is a type of popover. But there’s more evidence behind this too.

The Three Types of Dialogues

Since we’re already talking about the dialog role, let’s further expand that into its subcategories:

Dialogs can be categorized into three main kinds:

Modal: A dialog with an overlay and focus trapping

Non-Modal: A dialog with neither an overlay nor focus trapping

Alert Dialog: A dialog that alerts screen readers when shown. It can be either modal or non-modal.

This brings us to another reason why a dialog is considered a popover.

Some people may say that popovers are strictly non-modal, but this seems to be a major misunderstanding — because popovers have a ::backdrop pseudo-element on the top layer. The presence of ::backdrop indicates that popovers are modal. Quoting the CSS-Tricks almanac:

The ::backdrop CSS pseudo-element creates a backdrop that covers the entire viewport and is rendered immediately below a <dialog>, an element with the popup attribute, or any element that enters fullscreen mode using the Fullscreen API.

That said, I don’t recommend using the Popover API for modality because it doesn’t have a showModal() method (that <dialog> has) that creates inertness, focus trapping, and other necessary features to make it a real modal. If you only use the Popover API, you’ll need to build those features from scratch.

So, the fact that popovers can be modal means that a dialog is simply one kind of popover.

A Popover Needs an Accessible Role

Popovers need a role to be accessible. Hidde has a great article on selecting the right role, but I’m going to provide some points in this article as well.

To start, you can use one of the aria-haspopup roles mentioned above:

menu

listbox

tree

grid

dialog

You could also use one of the more complex roles like:

treegrid

alertdialog

There are two additional roles that are slightly more contentious but may do just fine.

tooltip

status

To understand why tooltip and status could be valid popover roles, we need to take a detour into the world of tooltips.

A Note on Tooltips

From a visual perspective, a tooltip is a popover because it contains a tiny window that pops up when the tooltip is displayed.

I included tooltip in the mental model because it is reasonable to implement tooltip with the Popover API.

The tooltip role doesn’t do much in screen readers today so you need to use aria-describedby to create accessible tooltips. But it is still important because it may extend accessibility support for some software.

But, from an accessibility standpoint, tooltips are not popovers. In the accessibility world, tooltips must not contain interactive content. If they contain interactive content, you’re not looking at a tooltip, but a dialog.

You’re thinking of dialogs. Use a dialog.

Heydon Pickering, “Your Tooltips are Bogus”

This is also why aria-haspopup doesn’t include tooltip —aria-haspopup is supposed to signify interactive content but a tooltip must not contain interactive content.

With that, let’s move on to status which is an interesting role that requires some explanation.

Why status?

Tooltips have a pretty complex history in the world of accessible interfaces so there’s a lot of discussion and contention over it.

To keep things short (again), there’s an accessibility issue with tooltips since tooltips should only show on hover. This means screen readers and mobile phone users won’t be able to see those tooltips (since they can’t hover on the interface).

Steve Faulkner created an alternative — toggletips — to fill the gap. In doing so, he explained that toggletip content must be announced by screen readers through live regions.

When initially displayed content is announced by (most) screen readers that support aria-live

Heydon Pickering later added that status can be used in his article on toggletips.

We can supply an empty live region, and populate it with the toggletip “bubble” when it is invoked. This will both make the bubble appear visually and cause the live region to announce the tooltip’s information.

<span class="tooltip-container"> <button type="button" aria-label="more info" data-toggletip-content="This clarifies whatever needs clarifying">i</button> <span role="status"> <span class="toggletip-bubble">This clarifies whatever needs clarifying</span> </span> </span>

This is why status can be a potential role for a popover, but you must use discretion when creating it.

That said, I’ve chosen not to include the status role in the Popover mental model because status is a live region role and hence different from the rest.

In Summary

Here’s a quick summary of the mental model:

Popover is an umbrella term for any kind of on-demand popup.

Dialog is one type of popover — a kind that creates a new window (or card) to contain some content.

When you internalize this, it’s not hard to see why the Popover API can be used with the dialog element.

<div popover>...</div>  <dialog popover>...</dialog>  <dialog>...</dialog>

When choosing a role for your popover, you can use one of these roles safely.

menu

listbox

tree

grid

treegrid

dialog

alertdialog

The added benefit is most of these roles work together with aria-haspopup which gained decent support in screen readers last year.

Of course, there are a couple more you can use like status and tooltip, but you won’t be able to use them together with aria-haspopup.