Javascript 用css制作信息气泡

我搜索了整个网络世界，但什么也没找到。我的问题是，我们正在试图制造泡沫，它们必须看起来像这样

当我们单击任何人时，它必须显示有关某些数据的信息

你能帮我们吗

首先：

使用

border radius

创建气泡，然后单击鼠标即可扩展其大小

添加一些JS逻辑，单击时会移动其他气泡

*{
框大小：边框框；
}
.框架{
位置：相对位置；
}
.泡泡{
位置：绝对位置；
显示：内联块；
宽度：130px；
高度：130像素；
文本对齐：居中；
边界半径：50%；
背景色：rgba（50,90,140,3）；
填充顶部：55px；
过渡：所有200ms的缓进缓出；
z指数：6；
}
.泡沫.内容{
显示：无；
}
.bubble.active{
宽度：260px；
高度：260px；
z指数：20；
}
.bubble.active.content{
显示：块；
宽度：130px；
高度：130像素；
溢出：自动；
显示：内联块；
}
#b1{
顶部：50px；
左：60px；
}
#b2{
顶部：168px；
左：68px；
背景色：rgba（150,40,90,3）；
}
#b3{
顶部：168px；
左：68px；
背景色：rgba（60,200,90,3）；
}
#b3{
顶部：80px；
左：150px；
背景色：rgba（20020040.3）；
}

随机文本

随机文本随机文本随机文本随机文本随机文本随机文本

随机文本随机文本随机文本随机文本随机文本


随机文本随机文本随机文本
随机文本

随机文本随机文本随机文本随机文本随机文本随机文本

随机文本随机文本随机文本随机文本随机文本


随机文本随机文本随机文本
随机文本

随机文本随机文本随机文本随机文本随机文本随机文本

随机文本随机文本随机文本随机文本随机文本


随机文本随机文本随机文本
随机文本

随机文本随机文本随机文本随机文本随机文本随机文本

随机文本随机文本随机文本随机文本随机文本


随机文本随机文本随机文本

使用

边界半径

，同时将元素设置为

标记。这是非常非常广泛的。请先尝试一下，然后我们可以从那里开始。我的建议是，不要一次解决所有问题，一次解决一个问题，比如，练习在单击时使一个圆圈展开，或者先做一些事情。@swelar你是对的。但我找不到关于这件事的详细信息。我是后端开发人员，这对于css来说是很难找到的。