字数超出显示...，鼠标划过显示完整内容

在微信公众号上看到这篇纯css实现多行文字截断，本来想在项目中练习使用一下，发现效果不太好，所以项目中还是使用了单行文本截断，下面是实现单行超出宽度，然后使用...显示的代码

 .courseTitle{
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    height: 30px;
                }

如果有兴趣的可以看看上面的文章，尝试多行文本截断，接下来说一下如何使用鼠标划过显示完整内容，网上提供的方法有：

1.添加title属性，但缺点是如果给每一个元素自己添加title属性会很麻烦；

2.自定义：自己写一个提示框，然后通过js划入显示，划出隐藏，将文本赋值到该框里，但这样效果不太好，而且还牵扯到判断提示框的定位，有点麻烦；

然后参考上述方法，我就尝试通过获取当前元素的值，然后通过attr方法添加title属性，代码如下：

//鼠标滑动到课程显示隐藏的元素内容
   $('.courseTitle').mouseover(function(event) {
        var $target = $(event.target);
        var target_text = $target.text();
        $target.attr('title',target_text);
   })

	<!--精选课程-->
		<div class="course">
			<div class="title">精选课程</div>
			<div class="courseList">
				<div class="courseInfo">
					<img src="">
					<div class="courseTitle">晓晓老师带你30天从零学会爵士舞基础</div>
					<div class="courseDes">课程描述</div>
					<div class="courseTeacher">授课老师</div>
				</div>
				<div class="courseInfo">
					<img src="">
					<div class="courseTitle">晓晓老师带你30天从零学会爵士舞基础</div>
					<div class="courseDes">课程描述</div>
					<div class="courseTeacher">授课老师</div>
				</div>
				<div class="courseInfo">
					<img src="">
					<div class="courseTitle">晓晓老师带你30天从零学会爵士舞基础</div>
					<div class="courseDes">课程描述</div>
					<div class="courseTeacher">授课老师</div>
				</div>
				<div class="courseInfo">
					<img src="">
					<div class="courseTitle">晓晓老师带你30天从零学会爵士舞基础</div>
					<div class="courseDes">课程描述</div>
					<div class="courseTeacher">授课老师</div>
				</div>
				<div class="courseInfo">
						<img src="">
						<div class="courseTitle">晓晓老师带你30天从零学会爵士舞基础</div>
						<div class="courseDes">课程描述</div>
						<div class="courseTeacher">授课老师</div>
				</div>
			</div>
		</div>

效果图：

字数超出显示...，鼠标划过显示完整内容